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 });
最初的菜单 
实现后的菜单，已经包含点击功能