JQuery 选择器
Posted 贵志
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JQuery 选择器相关的知识，希望对你有一定的参考价值。
简单选择器：
1、#id：匹配 id 属性为 id 的元素
2、.class：匹配 class 属性含有 class 单词的所有元素
3、[attr]：匹配拥有 attr 属性的所有元素
4、[attr = val]：匹配拥有 attr 属性且值为 val 的所有元素
5、[attr != val]：匹配没有 attr 属性或 attr 属性的值不为 val 的所有元素
6、[attr ^= val]：匹配 attr 属性值以 val 开头的元素
7、[attr $= val]：匹配 attr 属性值以 val 结尾的元素
8、[attr *= val]：匹配 attr 属性值含有 val 的元素
9、[attr ~= val]：当 attr 属性为一个由空格分隔的单词列表时，匹配其中包含单词 val 的元素
10、[attr |= val]：匹配 attr 属性值以 val 开头且其后没有其他字符或其他字符是以连字符开头的元素
11、:animated：匹配由 JQuery 产生动画且正在动画中的元素
12、:button：匹配 <button type = "button"> 和 <input type = "button"> 元素
13、:checkbox：匹配 <input type = "checkbox"> 元素
14、:checked：匹配选中的 input 元素
15、:contains(text)：匹配包含指定 text 文本的元素，圆括号确定了文本的范围，无需添加引号
16、:disabled：匹配禁用元素
17、:empty：匹配没有子节点、没有文本内容的元素
18、:enabled：匹配没有禁用的元素
19、:eq(n)：匹配基于文档顺序、序号从 0 开始的选中列表中的第 n 个元素
20、:gt(n)：匹配基于文档顺序、序号从 0 开始的选中列表中序号大于 n 的元素
21、:lt(n)：匹配基于文档顺序、序号从 0 开始的选中列表中序号小于 n 的元素
22、:even：匹配列表中偶数序号的元素，序号从 0 开始
23、:odd：匹配列表中奇数序号的元素，序号从 0 开始
24、:file：匹配 <input type = "file"> 元素
25、:first：匹配列表中第一个元素，和 :eq(0) 相同
26、:first-child：匹配的元素是其父节点的第一个子元素
27、:last：匹配列表中最后一个元素
28、:last-child：匹配的元素是其父节点的最后一个子元素
29、:has(sel)：匹配的元素拥有匹配内嵌选择器 sel 的子孙元素
30、:not(sel)：匹配的元素不匹配内嵌选择器 sel
31、:header：匹配所有标题元素 <h1>...<h6>
32、:hidden：匹配所有在屏幕上不可见的元素，大体可以认为这些元素的 offsetWidth 和 offsetHeight 为 0
33、:image：匹配 <input type = "image"> 元素，但不匹配 <img> 元素
34、:input：匹配用户输入元素：<input>、<textarea>、<select> 和 <button>
35、:nth(n)：与 ”:eq(n)“ 相同
36、:nth-child(n)：匹配的元素是其父节点的第 n 个子元素（n 可以是数值、单词 even、单词 odd 或计算公式），该过滤器的序号从 1 开始
37、:only-child：匹配那些是其父节点唯一子节点的元素
38、:parent：匹配是父节点的元素
39、:password：匹配 <input type = "password"> 元素，即用户输入密码区域
40、:radio：匹配 <input type = "radio"> 元素
41、:reset：匹配 <input type = "reset"> 和 <button type = "" reset> 元素
42、:selected：匹配选中的 <option> 元素，使用 ":checked" 来选择选中的复选框和单选框
43、:submit：匹配 <input type = "sumit"> 和 <button type = "sumit"> 元素
44、:text：匹配 <input type = "text"> 元素
45、:visible：匹配所有当前可见元素
注：通常 指定标签类型前缀可以让过滤器的运行更加高效，如 "input:radio" 比 ":radio" 更好，但 ID 过滤器是个例外，它不带标签前缀会更加高效
组合选择器：
1、A B：从匹配选择器 A 的元素的子孙元素中选择匹配选择器 B 的文档元素（组合符是空白符）
2、A > B：从匹配选择器 A 的元素的子元素中选择匹配选择器 B 的文档元素
3、A + B：从匹配选择器 A 的元素的下一个兄弟元素（忽略文本节点和注释）中选择匹配选择器 B 的文档元素
4、A ~ B：从匹配选择器 A 的元素后面的兄弟元素中选择匹配选择器 B 的文档元素
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Test</title> <!--导入 jquery 库--> <script src="http://libs.baidu.com//jquery/2.1.1//jquery.min.js"></script> <script> $(function(){ $("tr:even").css("background-color","yellow"); // 使下标为偶数的 tr，并让他的背景为黄色 $("tr:odd").css("background-color", "pink"); $("#tdOne").css("text-align", "center"); // 选取 id = "tdOne" 的元素 $(".tdClass").css("color", "green"); // 选取 class = "tdClass" 的元素 $("#trId:first-child").css("font-size", "1.5em"); // 选取 id = "#trId" 的第一个子元素 $(".trClass>td").css("font-family", "楷体"); // 选取 class = "trClass" 的所有 td 元素 $(":submit").css("color", "purple"); // 选取类型为 submit 的 input 和 button $(":button").css("color", "purple"); // 选取类型为 button 的 input 和 button }); </script> </head> <body> <h1>欢迎访问我的主页</h1> <form> <table border="1"> <tr> <th>网站名</th> <th>网址</th> </tr> <tr> <td id="tdOne">Google</td> <td>http://www.google.com</td> </tr> <tr> <td class="tdClass">Baidu</td> <td>http://www.baidu.com</td> </tr> <tr id="trId"> <td>淘宝</td> <td>http://www.taobao.com</td> </tr> <tr class="trClass"> <td>Facebook</td> <td>http://www.facebook.com</td> </tr> </table> <input type="submit" value="提交"> <button type="reset">重置</button> </form> </body> </html>
选择器组：
传递给 $() 函数（或在样式表中使用）的选择器就是选择器组，这是一个逗号分隔得列表，由一个或多个简单选择器或组合选择器构成
$("h1, h2, h3"); // 匹配 <h1>、<h2> 和 <h3> 元素
$("body>p, div.note>a"); // 匹配 <body> 的子元素 <p> 和 <div class="note"> 的子元素 <a>
以上是关于JQuery 选择器的主要内容，如果未能解决你的问题，请参考以下文章