简单选择器:
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>
来源:oschina
链接:https://my.oschina.net/u/4312653/blog/3577185