jQuery选择器使用总结
2018-05-13 本文已影响0人
Bigbang_boy
选择器
谈到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>
简单的选择器到此结束了
