jquery选择器详细说明

时间 2019-12-11

原文原文链接

　　jquery中选择器感受是用的特别多而且特别方便的一个方法，今天就在这里详细的记载下大多数经常使用的选择器，一块儿学习探讨。css

　首先介绍的是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经常使用的过滤器html

  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中代码写的巧妙会更简便，这里只作示范用不讲究那么多了。 jquery

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             });

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