必会的jquery选择器

1.      jquery是一个javascript库，封装的是一些常用的操作。

2.      为什么要封装

（1）      javascript，dom非常繁琐

（2）      浏览器兼容性非常令人头疼

3.      封装一些javascript常用的操作：

（1）prototype：封装javascript常用的对象和函数（功能强大，而且最早的库），缺点（面向对象把握的不是很好）

（2）dojo：提供了其他库没有的功能，例如离线存储，SVG绘图，而且他得到了IBM  SUN这些公司的推广。文档不全，学习起来曲线比较陡；

（3）ExtJs: 企业级的框架，功能强大（他以jquery做最底层的），缺点：注重的是样式，结构比较臃肿，他不是完全免费，如果需要从事商业用途，需要付费获得许可证

4. jquery的优势：

        市场占有率稳步上升，代码比较少，功能强大：DOM比较强大，事件处理，完全解决了浏览器的兼容性问题，ajax操作（比较好）

5. Jquery的$(document).ready（）和window.onload还是有区别：

（1）window.onload()  需要等到整个页面加载完毕（包括需要的图片等文件都加载完毕）       才执行

（2）$(document).ready（）只需要解析器先将文件的DOM结构绘制完毕就执行，不等待其他文件是否加载完毕

（3）Window.onload()不可以绑定多个onload()

但是$(document).ready（）可以

 6.jquery对象和DOM对象

DOM对象——javascript操作的对象

Jquery对象——将常用的javascript对象封装后形成自己的对象

（1）       为了区分DOM对象和jquery对象，我们通过声明变量的时候设置：

Jquery对象使用 var $p  

DOM对象使用   var p

    (2) jquery对象和DOM对象的相互转化

       ①jquery转化成DOM通过数组下标的形式  var p=$p[0]  或 get（索引）

       ②DOM转化成jquery用  $()

7. 选择器

   （1）基本选择器

      ①根据id匹配元素 

var $p = $("#para");

                 $p.click(function(){

                      alert("this is paragraph");

                 });

 

      ②根据给定的类名匹配元素

         var $span = $(".span");

                 $span.css("font-size","35px");

 

      ③根据给定的元素名匹配元素

         var $div = $("div");

                 $div.css("background","blue");

 

      ④*匹配所有的元素

var $suo=$("*");

                 $suo.css("background","green");

 

      ⑤集合元素，将每个选择器匹配到的元素合并后一起返回

var $jihe = $("p,span,div");

                     $jihe.click(function(){

                           alert("这是集合");

                 });

 

   （2）层次选择器

      ①后代元素选择器 

$("#d ulli").css({"color":"red","fontSize":"30px"});

      ②子元素选择器

$("#di >p").css({"background":"orange","fontSize":"40px"});

      ③相邻元素选择器

          $("#d ul +div").css({"color":"red","fontSize":"50px"});

       ④兄弟元素选择器                                                     

          $("span~div").css("background","blue");

（3）过滤选择器

 1>基本过滤选择器

   1,所有div元素中，第一个div

       $("div:first").click(function(){alert("第一个div")});

   2,所有div元素中,最后一个div

      $("div:last").click(function(){alert("最后一个div")});

   3,获取索引是偶数的所有元素,索引从0开始

     $("div:even").click(function(){alert("偶数")});

   4,获取索引是奇数的所有元素，索引从0开始

       $("div:odd").click(function(){alert("奇数")});

   5,获取索引等于index的所有元素

     $("div:eq(0)").click(function(){alert("这是索引为0的div")});

   6,索引大于小于 gt() lt()

      $("div:gt(1)").css("color","orange");

   7,获取网页中所有的h标签内容

       $(":header").css("color","green");

2>内容过滤选择器

       (1)选取含有文本内容为标签的元素

         $("span:contains('标签')").css("background","pink");

       (2)选取含有某元素的元素（含有b元素）

          $("div:has(b)").css("fontSize","100px");

3>可见性过滤选择器

   (1)选取所有可见的元素

        $(":visible").css("fontSize","30px");

       (2)选取所有不可见的元素

       $("div:hidden").show(4000);

4>属性过滤选择器

    (1)选取拥有id属性的元素

           $("div[id]").css("color","red");

      (2)选取属性值为value的元素

           $("div[class=value]").css("fontSize","30px");

5>子元素过滤选择器

（1）     选取父元素下，索引值是偶数的元素（索引从1开始）

$(“span.child:nth-child(even)”).css(“fontSize”,”30px”);

（2）     选取父元素下，索引值是奇数的元素（索引从1开始）

 $(“span.child:nth-child(odd)”).css(“fontSize”,”30px”);

     （3）匹配每个父元素下,索引值为index的子元素

                 $("span.child:nth-child(1)").css("color","green");

        （4）匹配每个父元素的第一个子元素  first-child

                 $("span.child:first-child").css("fontSize","100px");

        （5）匹配每个父元素的最后一个子元素 last-child

                 $("span.child:last-child").css("fontSize","100px");

6>表单对象属性过滤选择器

      （1）选取所有被选中的元素（单选框，复选框）

           var $check =$("input:checked").length;

(2) 选取所有被选中的下拉列表选项

           var $select = $("selectoption:selected").length;

                 alert($select);

(4)表单选择器

①选取所有的input,textarea,select,button

                 var $input =$("input:button").length;

             alert($input);

                 var $select =$("select option:select").length;

                 alert($select);

                

②选取所有的单行文本框

   var $text=$(“input:text”).length;

alert($text);

③选取所有的密码框

  var $pass =$("input:password").length;

             alert($pass);

④选取所有的单选框

var $radio =$("input:radio").length;

                 alert($radio);

⑤选择所有的复选框

var $checkbox =$("input:checkbox").length;

                 alert($checkbox);

⑥选择所有的提交按钮

var $submit =$("input:submit").length;

                 alert($submit);

 

⑦选择所有的文件上传域

var $file =$("input:file").length;

                 alert($file);