jQuery学习笔记使用选择器三
Posted 潇湘剑雨
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery学习笔记使用选择器三相关的知识，希望对你有一定的参考价值。
显隐伪类选择器 :hidden :visible能够根据元素的可见或隐藏进行快速过滤
| 显隐伪类选择器 | 说明 |
| :hidden | 匹配所有不可见元素，或者type伪hidden的元素 |
| :visible | 匹配所有的可见元素 |
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 $("p:odd").hide(); 9 $("p:odd").css("color","red"); 10 $("p:even").css("color","blue"); 11 $("p:odd").show(); 12 }) 13 </script> 14 </head> 15 <body> 16 <p>己所不欲，勿施于人</p> 17 <p>天行健，君子以自强不息</p> 18 <p>勿以恶小而为之，勿以善小而不为</p> 19 <p>君子成人之美，不成人之恶</p> 20 </body> 21 </html>
子元素伪类选择器是通过当前匹配元素选择该元素包含的特定子元素。注意，后面将介绍到:eq(index)选择器，该选择器只能够匹配一个元素，而:nth-child能够为每一个父元素匹配子元素。而:nth-child是从1开始的，而:eq()是从0算起的
| 子元素伪类选择器 | 说明 |
| :nth-child | 匹配其父元素下的第N个子或奇偶元素 |
| :first-child | 匹配第一个子元素。:first选择器只匹配一个元素，而:first-child选择器将为每个父元素匹配一个子元素 |
| :last-child | 匹配最后一个子元素。:last选择器只匹配一个元素，而:last-child选择器将为每个父元素匹配一个子元素 |
| :only-child | 如果某个元素是父元素中唯一的子元素，那将会匹配；如果父元素中含有其他元素，那将不会被匹配 |
:nth-child(even)匹配偶数位元素；:nth-child(odd)匹配奇数位元素；:nth-child(3n)匹配第3个及其后面间隔3的每个元素；:nth-child(2)匹配第2个元素；:nth-child(3n+1)匹配第1个及其后面间隔3的每个元素；:nth-child(3n+2)匹配第2个及其后面间隔3的每个元素
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 $("p:first-child").css("color","red"); 9 $("p:last-child").css("color","blue"); 10 $("p:nth-child(1)").css("background","#ff6"); 11 $("p:nth-child(2n)").css("background","#6ff"); 12 }) 13 </script> 14 </head> 15 <body> 16 <p>己所不欲，勿施于人</p> 17 <p>天行健，君子以自强不息</p> 18 <p>勿以恶小而为之，勿以善小而不为</p> 19 <p>君子成人之美，不成人之恶</p> 20 </body> 21 </html>
| 表单对象选择器 | 说明 |
| :input | 匹配所有input、textarea、select和button元素 |
| :text | 匹配所有的单行文本框 |
| :password | 匹配所有密码框 |
| :radio | 匹配所有单选按钮 |
| :checkbox | 匹配所有复选框 |
| :submit | 匹配所有提交按钮 |
| :image | 匹配所有图像域 |
| :reset | 匹配所有重置按钮 |
| :button | 匹配所有按钮 |
| :file | 匹配所有文件域 |
| :hidden | 匹配所有不可见元素，或者type为hidden的元素 |
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 $("#test :text").val("文本框"); 9 $("#test :password").val("密码域"); 10 $("#test :checkbox").css("border","solid 5px red"); 11 $("#test :radio").css("border","solid 5px blue"); 12 $("#test :image").css("border","solid 5px green"); 13 $("#test :file").css("border","solid 1px pink"); 14 $("#test :hidden").val("隐藏域"); 15 $("#test :button").val("普通按钮"); 16 $("#test :submit").val("提交按钮"); 17 $("#test :reset").val("重置按钮"); 18 }) 19 </script> 20 </head> 21 <body> 22 <form id="test" action="" method="get"> 23 <input name="" type="text" value=""/> 24 <br/> 25 <input name="" type="password" value=""/> 26 <br/> 27 <input name="" type="checkbox" value="复选框"/> 28 <br/> 29 <input name="" type="radio" value="单选按钮"/> 30 <br/> 31 <input name="" type="image" value="" src="1.jpg" width="200" height="200"/> 32 <br/> 33 <input name="" type="file" value=""/> 34 <br/> 35 <input name="" type="hidden" value=""/> 36 <br/> 37 <input name="" type="button" value=""/> 38 <br/> 39 <input name="" type="submit" value=""/> 40 <br/> 41 <input name="" type="reset" value=""/> 42 <br/> 43 </form> 44 </body> 45 </html>
| 表单属性选择器 | 说明 |
| :enabled | 匹配所有可用元素 |
| :disabled | 匹配所有不可用元素 |
| :checked | 匹配所有选中的被选中元素（复选框、单选按钮等，不包括select中的option） |
| :selected | 匹配所有选中的option元素 |
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 $("#test :disabled").val("不可用"); 9 $("#test :enabled").val("可用"); 10 $("#test :checked").removeAttr("checked"); 11 $("#test :selected").removeAttr("selectrd"); 12 }) 13 </script> 14 </head> 15 <body> 16 <form id="test" action="" method="get"> 17 <input name="" type="text" disabled value="文本域"/> 18 <br/> 19 <input name="" type="text" disabled value="文本域"/> 20 <br/> 21 <input name="" type="text" value="文本域"/> 22 <br/> 23 <input name="" type="checkbox" checked value="复选框"/> 24 复选框<br/> 25 <input name="" type="radio" value="单选按钮"/> 26 单选按钮<br/> 27 <select name=""> 28 <option value="1">1</option> 29 <option value="2">2</option> 30 <option value="1" selected>3</option> 31 </select> 32 </form> 33 </body> 34 </html>
属性选择器就是根据元素的属性及其作为过滤条件，来匹配对应的DOM元素
| 属性选择器 | 说明 |
| [attribute] |
匹配包含给定属性的元素，例：$("div[id]")表示查找所有含有id属性的div元素 |
| [attribute=value] | 匹配属性等于特定值的元素，属性值的引号在大多数情况下是可选的，如果属性值中包含诸"]"时，需要加引号用以避免冲突，例：$("input[name=‘text‘]")表示查找所有name属性值是text的input元素 |
| [attribute!=value] | 匹配所有不含有指定的属性，或者属性不等于特定值的元素，该选择器等价于:not([attr=value]) 例：$("input[name!=‘text‘]")表示查找所有name属性值不是text的input元素 |
| [attribute^=value] | 匹配给定的属性是以某些值开始的元素，例：$("input[name^=‘text‘]")表示所有name属性值以text开始的input元素 |
| [attribute$=value] | 匹配给定的属性是以某些值结尾的元素，例：$("input[name$=‘text‘]")表示所有name属性值以text结束的input元素 |
| [attribute*=value] | 匹配给定的属性是以包含某些值的元素，例：$("input[name*=‘text‘]")表示所有name属性值包含text字符串的input元素 |
| [selector1][selector2][selectorN] | 复合属性选择器，需要同时满足多个条件时使用，例：$("input[name*=‘text‘][id]")表示所有name属性值包含text字符串，且包含了id属性的input元素 |
jQuery选择器最常用的： #id
.class
tag
tag.class
#id tag
tag#id
#id:visible
#id .class
.class .class
多用ID选择器；少直接使用Class选择器；多用父子关系，少用嵌套关系
以上是关于jQuery学习笔记使用选择器三的主要内容，如果未能解决你的问题，请参考以下文章