【笔记】jQuery选择器
基础选择器
基本选择器
| id选择器 | $("#id") | 通过id匹配元素 |
| 类选择器 | $(".class") | 通过class匹配元素 |
| 元素选择器 | $("element") | 通过元素名匹配元素 |
| 全选择器 | $("*") | 匹配所有元素 |
层次选择器
| 后代选择器 | $("A B") | 匹配A元素内所有的B元素后代 |
| 子代选择器 | $("A>B") | 匹配A元素内的子代B元素 |
| 兄弟选择器 | $("A~B") | 匹配A元素后所有的同级B元素 |
| 相邻选择器 | $("A+B") | 匹配A元素后的下一个B元素 |
属性选择器
| $("[attribute]") | 匹配包含指定属性的元素 |
| $("[attr='value']") | 匹配指定属性是制定值得元素 |
| $("[attr!='value']") | 匹配不包含指定属性，或指定属性不是指定值的元素 |
| $("[attr*='value']") | 匹配指定属性包含指定值的元素 |
| $("[attr^='value']") | 匹配指定属性是以指定值开头的元素 |
| $("[attr$='value']") | 匹配指定属性是以指定值结尾的元素 |
| $("[1][2][N]") | 匹配符合所有条件的元素 |
伪类选择器
简单伪类选择器
| $(":first") | 匹配第一个元素 |
| $(":last") | 匹配最后一个元素 |
| $(":not(selector)") | 匹配除了某个选择器之外的所有元素 |
| $(":eq(index)") | 匹配指定索引值的元素 |
| $(":gt(index)") | 匹配所有大于索引值的元素 |
| $(":lt(index)") | 匹配所有小于索引值的元素 |
| $(":odd") | 匹配索引为奇数的元素 |
| $(":even") | 匹配索引为偶数的元素 |
| $(":header") | 匹配h1~h6的标题元素 |
| $(":animated") | 匹配所有正在执行动画效果的元素 |
子元素伪类选择器
| $(":first-child") | 匹配父元素的第一个子元素 |
| $(":last-child") | 匹配父元素的最后一个子元素 |
| $(":only-child") | 匹配父元素中唯一的元素 |
| $(":nth-child(n)") | 匹配父元素下第n个或奇数或偶数元素 |
可见性伪类选择器
| $(":visible") | 匹配所有可见元素 |
| $(":hidden") | 批判所有不可见元素 |
内容伪类选择器
| $(":contains(text)") | 匹配所有包含指定文本的元素 |
| $(":has(selector)") | 匹配包含选择器匹配元素的元素 |
| $(":parent") | 匹配所有包含子元素或文本的元素 |
| $(":empty") | 匹配所有不包含子元素或文本的元素 |
表单伪类选择器
| $(":input") | 匹配所有input元素 |
| $(":button") | 匹配所有普通按钮 |
| $(":submit") | 匹配所有提交按钮 |
| $(":reset") | 匹配所有重置按钮 |
| $(":password") | 匹配所有密码框 |
| $(":text") | 匹配所有文本框 |
| $(":radio") | 匹配所有单选按钮 |
| $(":checkbox") | 匹配所有复选框 |
| $(":image") | 匹配所有图像域 |
| $(":file") | 匹配所有文件域 |
表单属性伪类选择器
| $(":enabled") | 匹配所有可用的表单元素 |
| $(":disabled") | 匹配所有不可用的表单元素 |
| $(":checked") | 匹配所有选中的表单元素 |
| $(":selected") | 匹配所有选中的option元素 |
| $(":focus") | 匹配获得焦点的元素 |
代码演示
基础选择器
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <script src="https://yj920.github.io/study/jQuery/jquery-3.3.1.min.js"></script> 7 <script> 8 $(function(){ 9 $("#a").css("border","1px solid red"); 10 $(".b").css("border","1px dotted blue"); 11 $("p").css("font-size","20px"); 12 $("*").css("color","green"); 13 }) 14 </script> 15 </head> 16 <body> 17 <div id="a"> 18 <p>选择器</p> 19 <p>选择器</p> 20 </div> 21 <div class="b"> 22 <span>选择器</span> 23 <span>选择器</span> 24 </div> 25 </body> 26 </html>
