jQuery学习笔记使用选择器二
Posted 潇湘剑雨
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery学习笔记使用选择器二相关的知识，希望对你有一定的参考价值。
简单的伪类选择器也被称为定位过滤器，因为它们主要根据编号和排位筛选特定位置上的元素，或者过滤掉特定元素
| 简单的伪类选择器 | 说明 |
| :first | 匹配找到的第一个元素 |
| :last | 匹配找到的最后一个元素 |
| :not | 去除所有与给定选择器匹配的元素 |
| :even | 匹配所有索引值为偶数的元素，从0开始计数 |
| :odd | 匹配所有索引值为奇数的元素，从0开始计数 |
| :eq | 匹配一个给定索引值的元素，从0开始计数 |
| :gt | 匹配所有大于给定索引值的元素，从0开始计数 |
| :lt | 匹配所有小于给定索引值的元素，从0开始计数 |
| :header | 匹配如h1、h2、h3之类的标题元素 |
| :animated | 匹配所有正在执行动画效果的元素 |
特定位置选择器主要包括 :first :last :eq(index) 语法：jQuery("selector:first") jQuery("selector:last") jQuery("selector:eq(index)") 注意，特定位置选择器是针对伪类分隔符前面的选择器所匹配的结果基础上进行第2轮过滤的，如果没有指定匹配的范围，则将视为是整个文档范围
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <script src="jquery-1.11.3.js" type="text/javascript"></script> 6 <script type="text/javascript"> 7 $(function(){ 8 $("tr:first").css({"background":"blue","color":"white"}); 9 $("tr:eq(1)").css("background","#F1F5FB"); 10 $("tr:last").css("background","#ff9"); 11 }) 12 </script> 13 </head> 14 <body> 15 <table> 16 <tr> 17 <th>选择器</th> 18 <th>说明</th> 19 </tr> 20 <tr> 21 <td>:first</td> 22 <td>匹配找到的第一个元素</td> 23 </tr> 24 <tr> 25 <td>:last</td> 26 <td>匹配找到的最后一个元素</td> 27 </tr> 28 </table> 29 </body> 30 </html>
特定范围选择器主要包括：even :odd :ge(index) :lt(index)四种，语法：jQuery("selector:even") jQuery("selector:odd") jQuery("selector:gt(index)")
jQuery("selector:lt(index)")
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <script src="jquery-1.11.3.js" type="text/javascript"></script> 6 <script type="text/javascript"> 7 $(function(){ 8 //$("tr:even").css("background","#F1F5FB"); 9 //$("tr:odd").css("background","#ff9"); 10 $("tr:gt(2)").css("background","#F1F5FB"); 11 $("tr:lt(1)").css("background","#ff9"); 12 }) 13 </script> 14 </head> 15 <body> 16 <table> 17 <tr> 18 <th>选择器</th> 19 <th>说明</th> 20 </tr> 21 <tr> 22 <td>:even</td> 23 <td>匹配所有索引值为偶数的元素，从0开始计数</td> 24 </tr> 25 <tr> 26 <td>:odd</td> 27 <td>匹配所有索引值为奇数的元素，从0开始计数</td> 28 </tr> 29 <tr> 30 <td>:gt</td> 31 <td>匹配所有大于给定索引值的元素，从0开始计数</td> 32 </tr> 33 <tr> 34 <td>:lt</td> 35 <td>匹配所有小于给定索引值的元素，从0开始计数</td> 36 </tr> 37 </table> 38 </body> 39 </html>
排除选择器 :not能够在匹配元素集合中排除符合特定匹配规则的元素，语法：jQuery("selector:not(selector2)")
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <script src="jquery-1.11.3.js" type="text/javascript"></script> 6 <script type="text/javascript"> 7 $(function(){ 8 $("tr:not(tr:lt(2))").css({"background":"white","color":"blue"}); 9 }) 10 </script> 11 </head> 12 <body> 13 <table> 14 <tr> 15 <th>选择器</th> 16 <th>说明</th> 17 </tr> 18 <tr> 19 <td>:even</td> 20 <td>匹配所有索引值为偶数的元素，从0开始计数</td> 21 </tr> 22 <tr> 23 <td>:odd</td> 24 <td>匹配所有索引值为奇数的元素，从0开始计数</td> 25 </tr> 26 <tr> 27 <td>:gt</td> 28 <td>匹配所有大于给定索引值的元素，从0开始计数</td> 29 </tr> 30 <tr> 31 <td>:lt</td> 32 <td>匹配所有小于给定索引值的元素，从0开始计数</td> 33 </tr> 34 </table> 35 </body> 36 </html>
特殊选择器 :animated和:header是两个比较特殊的选择器，它们分别用来匹配动画元素和标题元素，语法：jQuery("selector:animated") jQuery("selector:header")
内容伪类选择器主要是根据元素包含内容作为筛选条件进行匹配
| 内容伪类选择器 | 说明 |
| :contains | 匹配包含给定文本的元素 |
| :empty | 匹配所有不包含子元素或者文本的空元素 |
| :has | 匹配含有选择器所匹配的元素的元素 |
| :parent | 匹配含有子元素或者文本的元素 |
匹配包含文本选择器 :contains(text)是一个比较实用的针对网页文本过滤的选择器，它能够根据指定的文本在所能匹配的元素集合中搜索包含特定关键字的元素，语法：
jQuery("selector:contains(text)") 注意，在contains()过滤函数中必须使用单引号包含文本关键字，否则jQuery将无法进行识别和解析
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <script src="jquery-1.11.3.js" type="text/javascript"></script> 6 <script type="text/javascript"> 7 $(function(){ 8 $("tr:contains(\'大于\')").css("background","blue"); 9 }) 10 </script> 11 </head> 12 <body> 13 <table> 14 <tr> 15 <th>选择器</th> 16 <th>说明</th> 17 </tr> 18 <tr> 19 <td>:even</td> 20 <td>匹配所有索引值为偶数的元素，从0开始计数</td> 21 </tr> 22 <tr> 23 <td>:odd</td> 24 <td>匹配所有索引值为奇数的元素，从0开始计数</td> 25 </tr> 26 <tr> 27 <td>:gt</td> 28 <td>匹配所有大于给定索引值的元素，从0开始计数</td> 29 </tr> 30 <tr> 31 <td>:lt</td> 32 <td>匹配所有小于给定索引值的元素，从0开始计数</td> 33 </tr> 34 </table> 35 </body> 36 </html>
匹配包含元素选择器 :has(selector)主要搜索匹配元素所包含的元素进行过滤，语法：jQuery("selector1:has(selector2)") 注意 :has(contains)选择器是对冒号前面的选择器所匹配的元素进行二次过滤
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <script src="jquery-1.11.3.js" type="text/javascript"></script> 6 <script type="text/javascript"> 7 $(function(){ 8 //$("a>img").css({"border":"solid 5px","background":"orange"}); 9 $("a:has(img)").css("background","red"); 10 }) 11 </script> 12 </head> 13 <body> 14 <a href="#"><img src="1.jpg" width="250" height="250"/></a> <a href="#"><img src="2.jpg" width="250" height="250"/></a> <a href="#"><img src="3.jpg" width="250" height="250"/></a> 15 </body> 16 </html>
包含判断选择器 :empty和:parent专门用来检测匹配元素是否包含内容，语法：jQuery("selector:empty") jQuery("selector:parent")
以上是关于jQuery学习笔记使用选择器二的主要内容，如果未能解决你的问题，请参考以下文章