jquery选择器详细说明

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

  1.  首先介绍的是css3的选择器,其中包括了标签选择器(div),ID选择器(#ID),类选择器(.class),群组选择器(div1,div2,div3),后代选择器(div1 div2),通配选择器(*),伪类选择器(div:first-child),子选择器(div >  li),临近选择器(div + div),属性选择器(div[id='ID']),后代同胞选择器(div ~ div)等等。
  2. 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             });

 

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

  

 

posted @ 2017-08-02 00:07  不是一般的菜  阅读(483)  评论(0编辑  收藏  举报