jquery选择器详细说明

　　jquery中选择器感觉是用的特别多并且特别方便的一个方法，今天就在这里详细的记载下大多数常用的选择器，一起学习探讨。

　首先介绍的是css3的选择器，其中包括了标签选择器（div），ID选择器（#ID），类选择器（.class），群组选择器（div1,div2,div3），后代选择器（div1 div2），通配选择器（*），伪类选择器（div:first-child），子选择器（div > li），临近选择器（div + div），属性选择器（div[id='ID']）,后代同胞选择器（div ~ div）等等。

jquery的选择器完全继承了css的选择器，包括css1,css2以及css3。

1 <ul class="menu" id="#menu">
2             <li class="level1">
3                 <a href="#no1">层次1</a>
4                 <ul>
5                     <li>菜单1</li>
6                     <li>菜单2</li>
7                     <li>菜单3</li>
8                     <li>菜单4</li>
9                 </ul>
10             </li>
11             <li class="level1">
12                 <a href="#no2">层次2</a>
13                 <ul>
14                     <li>菜单1</li>
15                     <li>菜单2</li>
16                     <li>菜单3</li>
17                     <li>菜单4</li>
18                 </ul>
19             </li>
20             <li class="level1">
21                 <a href="#no3">层次3</a>
22                 <ul>
23                     <li>菜单1</li>
24                     <li>菜单2</li>
25                     <li>菜单3</li>
26                     <li>菜单4</li>
27                 </ul>
28             </li>
29             <li class="level1">
30                 <a href="#no4">层次4</a>
31                 <ul>
32                     <li>菜单1</li>
33                     <li>菜单2</li>
34                     <li>菜单3</li>
35                     <li>菜单4</li>
36                 </ul>
37             </li>
38         </ul>

　　其中以上面的html代码段为示例，我们就用jquery去选择和改变它的样式，让他成为一个我们平时所熟悉的导航栏。下面是基于上面这个html代码介绍的jquery常用的过滤器

1 /**
2                  * 下面介绍的jquery中最基本的5种选择器
3                  */
4                 //1 ID选择器,返回的是单个元素
5                 var $menu = $("#menu");
6                 //2  类选择器，返回的是元素集合
7                 var $level = $(".level1");
8                 //3 标签选择器，返回的是元素集合
9                 var $li = $("li");
10                 //4 通配选择器，返回的是元素集合，下面实例的是返回menu下的所有的元素
11                 var $all = $("#menu *");
12                 //5 群组选择器，返回的是元素集合，下面实例中返回的是所有的ul和 class = level1的元素
13                 var $menuAndLevel1 = $("ul,.level1");
14                 /**
15                  * 其实我们已经可以用上面的选择器完成大部分的工作了。但是jquery选择器的魅力不仅仅于此。
16                  * 下面介绍的是jquery的层次选择器
17                  */
18
19                 //1 后代元素选择器,返回的是元素的集合。这里返回的包括了#menu下面所有的li元素
20                 var $childrenLi = $("#menu li");
21                 //2 直接后代元素选择器，返回的是元素的集合。这里返回的#menu下面第一层的li，例子中的是包含class="level1"的li元素
22                 var $childrenFirstLi = $("#menu>li");
23                 //3 临近元素选择器，返回集合元素。这里返回的ul集合，如果a的后面不是ul，则返回为空
24                 var $nextUl = $("a + ul");
25                 //4 后代同胞选择器，返回集合元素。这里返回的是第一个class="level1"之后的同胞li元素。这里的first代表的所选集合中的第一个元素，下面会讲到。
26                 var $nextSiblings = $("ul > li:first ~ li");
27                 //5 其中3中临近元素选择器中的方法还可用下面这种方法代替,next()中的参数是一种选择器，如果没有参数，则默认选择下一个元素，相当于next("*")
28                 //下面的3中方法所得到的结果是相同的
29                 var $nextUl2 = $("a").next("ul");
30                 var $nextUl3 = $("a").next();
31                 var $nextUl4 = $("a").next("*");
32                 //6 4中的方法也有可以代替的方法，nextAll()方法具体和next方法差不多。选择当前元素之后的所匹配的所以元素
33                 var $nextSiblings2 = $("ul > li:first").nextAll("li");
34                 var $nextSiblings3 = $("ul > li:first").nextAll();
35                 var $nextSiblings4 = $("ul > li:first").nextAll("*");
36                 //7 jquery中还有一种和nextAll类型，但是不完全相同的方法。siblings()，其中返回的是所匹配的所有元素，不管位置实在当前元素前面还是后面
37                 var $allSiblings = $("ul > li:first").siblings();//返回的结果和上面3个相同。如果选中的li元素是第二个，上面返回3，4的li，而这里返回1,3,4的li
38
39                 /**
40                  * jquery中的过滤选择器的规则和css中伪类选择器语法相同，就是通过:开头
41                  */
42
43                 //1 :first 选择器。返回的是单个元素。返回删选集合中的第一个li
44                 var $fisrtLi = $("ul li:first");
45                 //2 :last 选择器。返回的是单个元素。返回删选集合中的最后一个li
46                 var $lasttLi = $("ul li:last");
47                 //3 :not 选择器。返回的是元素集合。返回不包含class的li。not中参数和普通选择器一模一样，不用包含单双引号。
48                 var $liNotClass = $("li:not(.level1)");
49                 //4 :even 选择器。返回的是元素集合。返回选中集合中序列为偶数的集合。（从0开始，0算做偶数）
50                 var $evenLi = $("li:even");
51                 //5 :odd 选择器。返回的是元素集合。返回所选中集合中序列为奇数的集合。
52                 var $oddLi = $("li:odd");
53                 //6 :eq 选择器。返回的单个元素。 返回所选择集合中序列和和传进来相同的元素。从0开始算起.返回的是第二个li元素（层次1下的第一个li）
54                 var $indexLi = $("li:eq(1)");
55                 //7 :gt，:lt 选择器。gt(index)是返回所选中集合中索引大于index的集合。lt(index)是返回索引小于index的集合
56                 var $gtIndex = $("li:gt(0)");//返回第一个开始以后的li
57                 var $ltIndex = $("li:lt(10)");//返回第10个以前的li
58                 var $bIndex = $("li:lt(10):gt(2)");//返回的元素个数是7个。如果顺序呼唤，返回的元素个数是10个
59                 var $cIndex = $("li:gt(2):lt(10)");//返回的元素个数是10个。因为lt:(10)是对gt(2)以后的集合在过滤。gt(2)返回的个数大于10个
60                 //8 还有:header（标题元素选择器，如h1,h2）,:animated(选取正在执行动画的所有元素),:focus选择器（选取当前获得焦点的元素）。
61                 //都是返回元素集合。但是这里没用到。所以不详细介绍了。
62
63                 /**
64                  * jquery内容过滤选择器
65                  */
66
67                 //1 文本过滤选择器。返回的是元素集合。返回文本中包含“层次”的a元素
68                 var $textA = $("a:contains('层次')");
69                 //2 :empty 选择器。返回的是元素集合。返回不包含任何子元素或者文本的空元素。这里没有该元素
70                 //3 :has(selector) 含有选择器。返回元素集合。下面返回的是所有包含a元素的li元素
71                 var $hasALi = $("li:has(a)");
72                 //4 :parant 选择器。返回元素集合。这个是和empty选择器相对的选择器。下面返回包含子元素或文本元素的li
73                 var $notEmptyLi = $("li:parent");
74                 //5 :hidden 过滤器。返回元素集合。不可见元素包括任何的隐藏,不管是通过displty:none还是hidden=hidden或者type="hidden"。
75                 //6 :visible 过滤器。返回元素集合。返回所有可见的li元素。与:hidden过滤器正好相反。
76                 var $notHideLi = $("li:visible");
77
78                 /**
79                  * jquery属性过滤选择器。由于属性选择过滤器平时用的不太多，这里就简略介绍下。以下用class举例，可以包括所有的属性。
80                  * 属性选择器直接跟在需要过滤的元素后面，不包含空格。如果含有空格，则会对元素的所有子元素进行属性过滤。相当于“selector *[]”
81                  */
82                 var $li1 = $("li[class]");//选择属性中含所有class的li元素
83                 var $a1 = $("a[href=\\#no1]");//选择属性中含有href且href的值为#no1的元素。#在jquery中是特殊字符。需要转译
84                 var $a2 = $("a[href!=\\#no1]");//返回href不等于#no1的a元素。特别注意，如果a中不含有href，也会被返回
85                 var $li2 = $("li[class ^= level]")//返回以level开头的class的li
86                 var $li3 = $("li[class $= 1]");//返回1结尾的class的li
87                 var $li4 = $("li[class *= vel]");//返回class中包含vel的li
88                 var $li5 = $("li[class |= level1]");//返回class等于level1或者以level1为前缀，后面用连字符'-'的元素。类似level1-no1
89                 var $li6 = $("li[class ~= level1]");//返回class中用空格分隔的值中包含level1的li元素。类似level1或者level1 level2。这里返回值同$li5
90                 var $Li7 = $("li[class ^= lev][class *=vel][class $= 1]");//符合选择器。选出满足所有条件的元素。每选择一次，范围缩小。
91
92
93                 /**
94                  * jquery中的子元素过滤器。个人感觉这个过滤器十分的方便好用
95                  */
96
97                 //1 :nth-child 选择器。这个选择器很强大！可以使用index（序列，从1开始），even，odd，2n，2n-1，3n（n都是从1开始）等等。
98                 //其中所过滤元素的索引是在其父元素下面的索引，而不是所筛选出来的集合中的索引。这点很重要，也是和eq的区别之一。
99                 //eq的索引是筛选出来的集合的索引。nth-child的规则和css中的规则一模一样，详细可以参考css的规则
100                 var $everyFirstLi = $("li:nth-child(1)");//这里返回的li有5个。只要li元素在其父元素下是第一个元素，就会被筛选出来
101                 var $firstLi = $("li:first-child");//同上，也是返回5个li元素
102                 var $lastLi = $("li:last-child");//只要li元素是在其父元素的最后一个，就会被筛选出来
103                 var $everyLastLi = $("li:nth-last-child(2)");//只要li在其父元素的倒数第二个，就会被返回
104                 var $onlyLi = $("li:only-child");//返回父元素中仅有一个li的li。这个返回为空
105
106
107                 /**
108                  * 还有表单元素过滤，由于这里时间问题。就不写表单元素了。但是表单过滤器可以稍微介绍下。返回的都是元素集合
109                  * :enabled 选取所有可用元素   $(":enabled");
110                  * :disabled 选取所有不可用元素 $(":disabled");
111                  * :checked 选取单选框或复选框中勾选中的元素 $(":checked");
112                  * :selected 选取下拉框中选中的选项元素 $(":selected");
113                  * :input 选取所有的<input> <textarea> <select> <button> 元素。$(":input");
114                  * :text 选取所有单行文本框 $(":text");
115                  * :password 选取所有密码框 $(":password");
116                  * :radio 选取所有单选框 $(":radio");
117                  * :checkbox 选取所有多选框 $(":checkbox");
118                  * :submit 选取所有提交按钮 $(":submit");
119                  * :image 选取所有图像按钮 $(":image");
120                  * :reset 选取所有重置按钮 $(":reset");
121                  * :button 选取所有按钮 $(":button");
122                  * :file 选取文件上传域 $(":file");
123                  * :hidden 选取所有不可见元素 $(":hidden");
124                  *
125                  * 上面的元素是等同于$("*:enabled");当然*也可以换成其他的选择器或者选择器组合
126                  * 到这里jquery的选择器介绍的基本差不多了。有了这么多的选择器，选择自己想要的元素实在太轻而易举了
127                  */

　　基于上面的选择器种类，可以随便组合几种就可以写出一个普通的手风琴系列的导航菜单，我这里就随便写一个。通过两行代码就可以实现整个导航菜单，足以体现jquery中选择器的强大之处，当然读者可以使用比我下面这个简单的多的多的方法实现导航菜单。如果html中代码写的巧妙会更简便，这里只做示范用不讲究那么多了。

1             $(document).ready(function(){
2                 $("#menu li[class=level1]:not(:first) ul").hide();//把不是第一个的包含ul的li的ul给隐藏掉
3                 $("ul a[href ^= \\#no]").on("click",function(e){//给href中以#no开头的a绑定点击事件
4                     $(this).nextAll("ul").filter(":first").show(500);//点击a元素的所有后面的同胞Ul中的第一个ul。这个不能用find。find是对其子元素的筛选
5                                                                      //filter是对集合本身的筛选
6                     $(this).parent().siblings().find("ul:has(li):contains('菜单')").hide(500);//隐藏a元素的父元素li的所有同胞li(不区分元素)，用find
7                                                                                              //筛选出包含li元素并且ul中含有菜单文本的ul元素并隐藏
8                 });
9             });

最初的菜单

实现后的菜单，已经包含点击功能