jQuery选择器使用总结

选择器

谈到jquery选择器，我们随口都可以说出属性选择器，类选择器，id选择器，伪类选择器等等。其实jquery的选择器远不止这些，其实也经常可以听到，jquery最强大的就是选择器。
确实是，jquery选择器为我们提供给了很多方便。

id,class,ele就不在叙述了

一次筛选多个选择器

$('div,p,span.sel,.example')
若同时需要对多种不同元素做相同操作，我们便可以一次性都筛选出来，中间只需逗号隔开

子代选择器 >

$('div>p')

通过大于> 由父级元素指到子级元素 不可跨级查询

兄弟元素 +

$('div+p')

查找在指定div下，平级或者平级元素的子级元素

~

$('div ~ p')

这些并不常用，这个是查找div之后的所有p标签。
当我们项目做大时，这些筛选范围太广，我们在实际开发中运用很少

伪类选择器

伪类选择器是很重要的选择器，除了我们之前提到的大家耳熟能详的那几类选择器之外，便是伪类了

：first 获取第一个元素
：last 获取最后一个元素
：not(selector) 去除所有与给定选择器匹配的元素
:even :odd 匹配所有索引值为偶数/奇数的元素，从 0 开始计数
:eq(index) 匹配一个给定索引值的元素 index从0开始
：lt() :gt() 匹配所有大于/小于给定索引值的元素
：header 匹配如 h1, h2, h3之类的标题元素
:animated 匹配所有正在执行动画效果的元素
:contains(text) 匹配包含给定文本的元素 中文也可以
:empty 匹配所有不包含子元素或者文本的空元素
:hidden 匹配所有不可见元素，或者type为hidden的元素
:visible 匹配所有的可见元素
:first-child 匹配所给选择器( :之前的选择器)的第一个子元素
:first-of-type jquery v1.9 新增选择器。官方文档中解释也相对模糊。ele:first-of-type 其实就是获取当前元素(ele)的父元素的第一个(ele)类型的孩子
:last-child / :last-of-type
:nth-child 通俗的讲，为其父元素匹配第几个子元素，nth-child(1)是从1开始计数，和:eq(0)不同的是，eq从索引0开始。当然，:nth-child()中可以传一些特殊的值，如even、odd，或者是变量，如3n+1,2n等
:nth-last-child 计数从最后一个元素开始到第一个

表单元素的伪类选择器

-:input 匹配所有 input, textarea, select 和 button 元素不只是input标签如<button>,<select>,<textarea>这种标签也是可以直接匹配出来的
-:text :password :reset :button :file 等等就是直接查找type类型为这些的选择器

属性选择器

[attribute] 属性选择器有几种不同的筛选方式

例如$('div[id]'),$('div[id="sadas"]'),$('div[id!="sadas"]')
$('div[id^="sadas"]'),$('div[id$="sadas"]'),$('div[id*="sadas"]')等等
以上包括查找包含某一属性，某艺术性为某一固定值的，或者取反，以…开头，结尾等等，与正则的常用标识一致

下面给出例子：

1.id选择


1.  <script type="text/javascript" src="jquery/jquery-3.1.1.js"></script>  
2.  <script type="text/javascript">  
3.  $(function(){  
4.  $("#li1").css("color","red");  
5.  })  
6.  </script>  
7.  </head>  
8.  <body>  
9.  <ul>  
10.  <li id="li1">列表1</li>  
11.  <li>列表2</li>  
12.  <li>列表3</li>  
13.  <li>列表4</li>  
14.  </ul>  
15.  </body>

2.标签选择器


1.  <script type="text/javascript" src="jquery/jquery-3.1.1.js"></script>  
2.  <script type="text/javascript">  
3.  $(function(){  
4.  $("li").css("color","red");  
5.  })  
6.  </script>  
7.  </head>  
8.  <body>  
9.  <ul>  
10.  <li id="li1">列表1</li>  
11.  <li>列表2</li>  
12.  <li>列表3</li>  
13.  <li>列表4</li>  
14.  </ul>  
15.  </body>

3.类选择器


1.  <script type="text/javascript" src="jquery/jquery-3.1.1.js"></script>  
2.  <script type="text/javascript">  
3.  $(function(){  
4.  $(".li2").css("color","red");  
5.  })  
6.  </script>  
7.  </head>  
8.  <body>  
9.  <ul>  
10.  <li id="li1">列表1</li>  
11.  <li class="li2">列表2</li>  
12.  <li>列表3</li>  
13.  <li>列表4</li>  
14.  </ul>  
15.  </body>

4.通配选择器


1.  <script type="text/javascript" src="jquery/jquery-3.1.1.js"></script>  
2.  <script type="text/javascript">  
3.  $(function(){  
4.  $("ul *").css("color","red");  
5.  })  
6.  </script>  
7.  </head>  
8.  <body>  
9.  <ul>  
10.  <li id="li1">列表1</li>  
11.  <li class="li2">列表2</li>  
12.  <li>列表3</li>  
13.  <li>列表4</li>  
14.  </ul>  
15.  </body>

5组合选择器


1.  <script type="text/javascript" src="jquery/jquery-3.1.1.js"></script>  
2.  <script type="text/javascript">  
3.  $(function(){  
4.  $("#li1,.li2").css("color","red");  
5.  })  
6.  </script>  
7.  </head>  
8.  <body>  
9.  <ul>  
10.  <li id="li1">列表1</li>  
11.  <li class="li2">列表2</li>  
12.  <li>列表3</li>  
13.  <li>列表4</li>  
14.  </ul>  
15.  </body>

简单的选择器到此结束了