jquery基础及选择器

jquery库文件

分为开发版和发布版

  在页面中引用jquery

      <script src="js/jquery-1.12.4.js" type="text/javascript"></script>

 使用jquery弹出提示框

       <script>

         $(document).ready(function() {

          alert("我的第一个jQuery示例！"); 

    });

     </script>

   jquery语法规则

        工厂函数￥（）：将DOM对象转化为jquery对象

  jquery操作页面元素

       使用addClass( )方法为元素添加样式

       使用css( )方法设置元素样式

      使用show( )、hide( ) 方法设置元素的显示和隐藏

addClass（）方法 --为元素添加样式

     语法：jQuery 对象.addClass([样式名]);

     示例：$("tr:odd").addClass("odd");

 css()方法  --设置元素样式

      语法：css({"属性1":"属性值1","属性2":"属性值2"...}) ;

      示例：$(this).css({"background":"#c81623"});

 设置元素的显示和隐藏

      语法：$(selector).show( );

                $(selector).hide( );

     示例：$(this).children("div").show();

                $(this).children("div").hide();

jquery代码分割

     $等同于jquery

    $（document）.ready（）等同于jquery（document）.ready（）

    $（function(){}）等同于jquery（function（）{...}}）

链式操作   --对一个对象进行多重操作，并将操作结果返回给该对象

       示例：

 $("h2").css("background-color","#ccffff").next().css("display","block");

隐式操作

示例：

       $(document).ready(function() {

                   $("li").css({"font-weight":"bold","color":"red"});

    });

jquery选择器分类

基本选择器

示例：

$("h1").css("color", "blue");   //标签选择器

$(".price").css({"background":"#efefef","padding":"5px"});  //类选择器

$("#author").css("clor", " #083499");  //id选择器

$(".intro,dt,dd").css("color", " #ff0000");  //并集选择器

$("*").css("font-weight", "bold");  //全局选择器

层次选择器

示例：

$(".textRight p").css("color","red");  //后代选择器

$(".textRight>p").css("color", "red");  //子选择器

$("h1+p").css("text-decoration", "underline");  //相邻元素选择器

$("h1~p").css("text-decoration", "underline");   //同辈元素选择器

属性选择器

示例：

$("#news a[class]").css("background","#c9cbcb");//a标签带有class属性

$("#news a[class='hot']").css("background", "#c9cbcb"); // class为hot

$("#news a[class!='hot']").css("background", "#c9cbcb");// class不为hot

$("#news a[href^='www']").css("background","#c9cbcb");//以www开头

$("#news a[href$='html']").css("background", "#c9cbcb");//以html结尾

$("#news a[href*='k2']").css("background","#c9cbcb"); //包含"k2"的元素

基本过滤选择器

语法	描述	示例
:eq(index)	选取索引等于index的元素（index从0开始）	$("li:eq(1)" )选取索引等于1的<li>元素
:gt(index)	选取索引大于index的元素（index从0开始）	$("li:gt(1)" )选取索引大于1的<li>元素（注：大于1，不包括1）
:lt(index)	选取索引小于index的元素（index从0开始）	$("li:lt(1) " )选取索引小于1的<li>元素（注：小于1，不包括1）
:header	选取所有标题元素，如h1~h6	$(":header" )选取网页中所有标题元素
:focus	选取当前获取焦点的元素	$(":focus" )选取当前获取焦点的元素
:animated	选择所有动画	$(":animated" )选取当前所有动画元素

 示例：

// 标题元素

$(".contain :header").css({"background":"#2a65ba",…});

// 第一个、最后一个元素

$(".contain li:first").css({"font-size":"16px",…});

$(".contain li:last").css("border","none");

// 偶数、奇数元素

$(".contain li:even").css("background","#f0f0f0");

$(".contain li:odd").css("background","#cccccc");

// 小于、大于某个索引值

$(".contain li:lt(2)").css({"color":"#708b02"});

$(".contain li:gt(3)").css({"color":"#b66302"});

可见性过滤选择器

语法	描述	示例
:visible	选取所有可见的元素	$(":visible")选取所有可见的元素
:hidden	选取所有隐藏的元素	$(":hidden") 选取所有隐藏的元素

示例：

$("p:hidden").show();

$("p:visible").hide();