选择器
一、基本信息
描述：jquery选择器使用的时候不必考虑浏览器兼容性，都兼容
获取不存在元素：不会报错
二、基本选择器
1、id选择器
写法：$("#id名称")
特殊字符：使用任何的元字符（如 !"#$%&'()*+,./:;<=>?@[\]^`{|}~）作为名称的文本部分， 它必须被两个反斜杠转义：\\
$("#name\\[aaa\\]")
<span id="name[aaa]"></span>
2、class选择器
写法：$(".class名称") 或者 $("标签.class名称")
$(".aa")
3、标签选择器
写法：$("标签名")
$("p")
4、通用选择器
写法：$("*")
描述：获取所有的元素
$("*")
5、选择多个元素
写法：$("元素,元素")
分割：用逗号分隔
$("div,span")
三、层次选择器
1、后代元素
写法：$("a b")
描述：获取元素a里的所有元素b
$("form input") //找到form中所有的 input 元素（包括子代，孙代等元素）
2、子元素
写法：$("a > b")
描述：只包括子代元素，不包括孙代。
$("form > input")
3、紧随元素
写法：$("a + b")
描述：获取紧跟在a后边的同辈b元素，如果ab之间还有其他元素则无法获取
元素个数：1个
等价方法：.next()
<p>aa</p> <span>bb</span> <div>cc</div> <script> $(function () { alert($("p+div").html()); //undefined }) </script> <p>aa</p> <div>bb</div> <div>cc</div> <script> $(function () { alert($("p+div").html()); //bb }) </script>
4、之后同辈元素
写法：$("a ~ b")
描述：获取元素a之后的所有同辈b元素
等价方法：.nextAll()
$("form ~ input")
<form> </form> <input name="a" /> 获取到的 <input name="b" /> 获取到的
四、过滤选择器
基本过滤
1、获取第一个元素
写法：$("元素:first")
描述：获取某元素的第一个
元素个数：1个
$("li:first") //获取所有li里的第一个li
<ul> <li>list item 1</li> 获取到的 <li>list item 2</li> <li>list item 3</li> <li>list item 4</li> <li>list item 5</li> </ul>
2、获取最后一个元素
写法：$("元素:last")
描述：获取某元素的最后一个
元素个数：1个
$("li:last") //获取所有li里的最后一个li
<ul> <li>list item 1</li> <li>list item 2</li> <li>list item 3</li> <li>list item 4</li> <li>list item 5</li> <!-- 获取到的 --> </ul>
3、去除匹配元素
写法：$("元素a :not(条件)")
描述：选择不符合条件的元素a
$("input:not(:checked)") //查找所有未选中的 input 元素
<input name="apple" /> 获取到的
<input name="flower" checked="checked" />
4、索引值为偶数的元素
写法：$("元素 :even")
描述：选择索引值为偶数的元素，0也算
计数：从0开始
$("tr:even") //查找表格的1、3、5...行（即索引值0、2、4...）
<table> <tr>a</tr> 获取到的 <tr>b</tr> <tr>c</tr> 获取到的 </table>
5、索引值为奇数的元素
写法：$("元素 :odd")
描述：选择索引值为奇数的元素
计数：从0开始
$("tr:odd") //查找表格的2、4、6行（即索引值1、3、5...）
<table> <tr>a</tr> <tr>b</tr> 获取到的 <tr>c</tr> </table>
6、获取给定索引值的元素
写法：$("元素 :eq(索引值)")
描述：选择指定索引值的元素
计数：从0开始
元素个数：1个
$("tr:eq(1)") //查找第二行
<table> <tr>a</tr> <tr>b</tr> 获取到的 <tr>c</tr> </table>
7、获取索引值大于给定索引值的元素
写法：$("元素 :gt(索引值)")
描述：选择大于给定索引值的元素
计数：从0开始
$("tr:gt(0)") //查找第一行以后的,不包括第一行
<table> <tr>a</tr> <tr>b</tr> 获取到的 <tr>c</tr> 获取到的 </table>
8、获取索引值小于给定索引值的元素
写法：$("元素 :lt(索引值)")
描述：选择小于给定索引值的元素
计数：从0开始
$("tr:lt(2)") //获取第三行之前的元素
<table> <tr>a</tr> <!-- 获取到的 --> <tr>b</tr> <!-- 获取到的 --> <tr>c</tr> </table>
9、获取标题元素
写法：$("元素 :header") 或者 $(":header")
描述：获取h1, h2, h3之类的标题元素
$(":header").css("background", "#000"); //给页面内所有标题加上背景色
<h1>Header</h1><!-- 获取到的 --> <p>Contents</p> <h2>Header</h2> <!-- 获取到的 --> <p>Contents</p>
10、获取正在执行动画的元素
写法：$("元素 :animated") 或者 $(":animated")
描述：获取当前正在执行动画的所有元素
$("div:not(:animated)").animate({ left: "+=20" }, 1000); //对没有执行动画的div执行动画
11、获取当前获取焦点的元素
写法：$("元素 :focus") 或者 $(":focus")
$(":focus").css("background","red"); //获取焦点的元素的背景色变为红色
内容过滤
12、获取包含指定文本的元素
写法：$("元素 :contains("文本内容")")
$("div:contains('aa')") //查找内容里有 "aa" 的 div ：
<div>aa b</div> <!-- 获取到的 --> <div>b</div> <div>b aa b</div> <!-- 获取到的 -->
13、获取空元素
写法：$("元素 :empty")
描述：获取不含子元素或不含文本的空元素
$("td:empty") //获取不包含内容的td
<table> <tr> <td>Value 1</td> <td></td> <!-- 获取到的 --> </tr> </table>
14、获取含有某标签的元素
写法：$("元素a :has(元素b)")
描述：获取含有元素b的元素a
分隔：多个条件用“,”分隔
$("div:has(p,span)").css("border","solid red"); //给所有包含p，span元素的 div 元素添加一个边框
<div> <p></p> <span></span> </div> <!-- 获取到的 --> <div></div>
15、获取含有子元素或者文本的元素
写法：$("元素:parent")
$("td:parent") //查找所有含有子元素或者文本的 td 元素
<table> <tr> <td>Value 1</td><!-- 获取到的 --> <td></td> </tr> </table>
可见性过滤
16、获取不可见元素
写法：$("元素:hidden") 或者 $(":hidden")
不可见元素标准：
- css的 display:none
- <input type="hidden">
- width:0px 和 height：0px
- 父元素是隐藏的子元素也是隐藏的（父元素width:0px 和 height：0px的情况下子元素不隐藏）
可见元素(在页面上占据了一定的空间)：
visibility: hidden;opacity: 0;
$(":hidden")
<input type="hidden" /><!-- 匹配的 --> <div style="display:none;"></div><!-- 匹配的 --> <div style="visibility:hidden;"></div> <div style="width:0px;height:0px;"></div><!-- 匹配的 --> <div style="display:none;"> <!-- 匹配的 --> <span> </span><!-- 匹配的 --> </div>
17、获取可见元素
写法：$("元素:visible") 或者 $(":visible")
$("tr:visible")
<table> <tr style="display:none"></tr> <tr></tr><!-- 匹配的 --> </table>
属性过滤
18、获取包含给定属性的元素
写法：$("元素[属性名]")
$("div[id]") //查找所有含有 id 属性的 div 元素
<div> <p></p> </div> <div id="test2"></div> <!-- 匹配的 -->
19、获取包含指定数值的属性的元素
写法：$("元素[属性名=属性值]")
引号：属性值的引号可选，最好写上，为了避免冲突
$("input[name='aa']") //查找所有name属性的值为aa的input元素
<input name="aa" /><!-- 匹配的 --> <input name="accept" />
20、获取不包含指定数值的属性的元素
写法：$("元素[属性名！=属性值]")
等价于: .not(?=?)
$("input[name!='aa']") //查找所有 name 属性不是 aa 的 input 元素
<input name="aa" /> <input name="accept" /><!-- 匹配的 -->
21、获取属性以给定值开始的元素
写法：$("元素[属性名^=属性值]")
描述：包含属性值以给定值为前缀的元素
$("input[name^='news']") //查找所有 name 以 'news' 开始的 input 元素
<input name="newsletter" /> <!-- 匹配的 --> <input name="milkman" />
22、获取属性以给定值结尾的元素
写法：$("元素[属性名$=属性值]")
$("input[name$='letter']") //查找所有 name 以 'letter' 结尾的 input 元素
<input name="newsletter" /> <!-- 匹配的 --> <input name="milkman" />
23、获取属性值含有给定值的元素
写法：$("元素[属性名*=属性值]")
$("input[name*='man']") //查找所有 name 包含 'man' 的 input 元素
<input name="man-news" /> <!-- 匹配的 --> <input name="newmilk" />
24、获取属性值等于或为前缀有给定值的元素
写法：$("元素[属性名|=属性值]")
描述：获取属性值等于给定值的元素，或者属性值以给定值为前缀的元素（前缀后跟一个“-”连字符）
$("div[title|='en']")
<div title="en"></div><!-- 匹配的 --> <div title="en-aa"></div><!-- 匹配的 -->
25、获取属性用空格分隔的之中包含给定值的元素
写法：$("元素[属性名~=属性值]")
$("div[title~='en']")
<div title="en aa"></div><!-- 匹配的 -->
26、复合属性选择器，同时满足多个条件
写法：$("元素[条件1][条件2][条件3]")
$("input[id][name$='man']") //找到所有含有 id 属性，并且它的 name 属性是以 man 结尾的
<input id="letterman" name="new-letterman" /> <!-- 匹配的 --> <input name="newmilk" />
子元素过滤
27、匹配其父元素下的第N个子元素、奇偶元素、指定倍数元素
写法：
（1）等于给定索引值的元素
语法：$("元素:nth-child(索引值)")
计数：索引值的计数从1开始（:eq()从0开始）
元素个数：多个
$("p:nth-child(3)").css("background-color","yellow"); //p的父元素是body，body下的第三个子元素变色，不指定标签类型
<h1>body 中的标题</h1> <p>body 中第一个段落。</p> <p>body 中第二个段落</p><!-- 匹配的 -->
（2）索引值是偶数的元素
语法：$("元素:nth-child(even)")
元素个数：多个
$("ul li:nth-child(even)") //匹配li父元素下的偶数元素，即使不是li也可以
<ul> <li>John</li> <li>Karl</li> <!-- 匹配的 --> <li>Brandon</li> <li>Karl</li><!-- 匹配的 --> </ul>
（3）索引值是奇数的元素
语法：$("元素:nth-child(odd)")
元素个数：多个
$("ul li:nth-child(odd)")//匹配li父元素下的奇数元素，即使不是li也可以
<ul> <li>John</li><!-- 匹配的 --> <li>Karl</li> <li>Brandon</li><!-- 匹配的 --> <li>Karl</li> </ul>
（4）索引值是给定值的倍数
语法：$("元素:nth-child(数字n)")
计数：n的计数从1开始
元素个数：多个
$("ul li:nth-child(3n)")//匹配li父元素下的3的倍数的元素，即使不是li也可以
<ul> <li>John</li> <li>Karl</li> <li>Brandon</li><!-- 匹配的 --> <li>Karl</li> <li>John</li> <li>Brandon</li><!-- 匹配的 --> </ul>
（5）索引值是指定值的基础上再加给定倍数的元素
语法：$("元素:nth-child(数字n+数字)")
计数：n的计数从1开始
元素个数：多个
$("ul li:nth-child(3n+1)")//匹配li父元素下的3n+1的元素，即使不是li也可以
<ul> <li>John</li> <li>Karl</li> <li>Brandon</li> <li>Karl</li><!-- 匹配的 --> <li>John</li> <li>Karl</li> <li>Brandon</li><!-- 匹配的 --> </ul>
28、获取所给选择器的第一个子元素
语法：$("元素:first-child")
元素个数：多个
描述：获取元素的父元素下的第一个子元素
$("ul li:first-child") //每一个ul的第一个li都可以匹配
<ul> <li>John</li> <!-- 匹配的 --> <li>Karl</li> <li>Brandon</li> </ul> <ul> <li>John</li> <!-- 匹配的 --> <li>Karl</li> <li>Brandon</li> </ul>
29、获取所给选择器的最后一个子元素
语法：$("元素:last-child")
元素个数：多个
描述：获取元素的父元素下的最后一个子元素
$("ul li:last-child")
<ul> <li>John</li> <li>Karl</li> <li>Brandon</li><!-- 匹配的 --> </ul>
30、获取唯一子元素
语法：$("元素:only-child")
描述：找到某元素，如果其父元素下只有这一个子元素，则获取这个元素
$("ul li:only-child")
<ul> <li>Brandon</li><!-- 匹配的 --> </ul>
表单属性过滤
31、获取可用元素
语法：$("元素:enabled")
描述：获取可用的表单元素，即html里没有disabled="disabled"的元素
$("input:enabled")
<input /> <!-- 匹配的 --> <input disabled="disabled" />
32、获取不可用元素
语法：$("元素:disabled")
描述：获取不可用的表单元素，即标有disabled="disabled"的元素
$("input:disabled")
<input /> <input disabled="disabled" /><!-- 匹配的 -->
33、获取被选中的元素
语法：$("元素:checked")
范围：单选框、多选框
描述：被选中或标有checked="checked"的元素
$("input:checked")
<input type="checkbox" checked="checked" /><!-- 匹配的 --> <input type="radio" checked="checked" /><!-- 匹配的 -->
34、获取下拉列表被选中的元素
语法：$("元素:selceted")
范围：下拉列表
描述：被选中或标有selected="selected"的元素
$("input:selected")
<select> <option></option> <option selected="selected"></option><!-- 匹配的 --> </select>
表单选择器
35、选取某些表单元素
语法：$(":input")
范围：选取所有<input>、<textarea>、<select>、<button>元素
36、获取单行文本框
语法：$(":text")
范围： type="text" 的 <input> 元素（<input type="text" />）
37、获取密码框
语法：$(":password")
范围： type="password" 的 <input> 元素（<input type="password" />）
38、获取单选框
语法：$(":radio")
范围： type="radio" 的 <input> 元素（<input type="radio" />）
39、获取多选框
语法：$(":checkbox")
范围： type="checkbox" 的 <input> 元素（<input type="checkbox"/>）
40、获取提交按钮
语法：$(":submit")
范围：type="submit" 的 <input> 和 <button> 元素（ <input type="submit"/>、<button type="submit"></button>）
41、获取图像按钮
语法：$(":image")
范围： type="image" 的 <input> 元素（<input type="image" src="" />）
描述：按钮的图案是图片
42、获取重置按钮
语法：$(":reset")
范围： type="reset" 的 <input> 和 <button> 元素（<input type="reset"/>、<button type="reset"></button>）
43、获取按钮
语法：$(":button")
范围： type="button" 的 <button> 元素和 <input> 元素（<input type="button"/>、<button type="button"></button>）
44、获取上传域
语法：$(":file")
范围： type="file" 的 <input> 元素（<input type="file">）
描述：点击可以选择本地文件上传
其他
选择指定语言的所有元素
:lang( )表示
匹配有一个语言值等于所提供的语言代码，或以提供的语言代码开始，后面马上跟一个“ - ”的元素。
例子：
$("div:lang(en)")
<div lang="en"> </div> 包括这里面所有的元素 <div lang="en-us"></div> 包括这里面所有的元素
选择该文档的根元素
:root表示
选取的元素即为<html>
$(":root").css("background-color","yellow");
匹配锚点元素
:target表示
例子：
$( "p:target" )
<p><a href="#news1"></a></p> <p id="news1"></P> 匹配的元素
匹配当前标签父元素下的第一个当前标签
:first-of-type表示
$(".abc:first-of-type")
<div id="n1"> <div id="n2" class="abc"> 匹配的 <label id="n3"></label> <span id="n4"></span> <span id="n5" class="abc"></span> 因为不是当前父元素下的第一个span标签，所以不匹配 <span id="n6"></span> </div> <div id="n7"> <span id="n8" class="abc"></span> 匹配的 <span id="n9"></span> </div> </div>
匹配当前标签父元素下的最后一个当前标签
:last-of-type表示
与上面的:first-of-type类似
匹配父元素的倒数第n个子元素
:nth-last-child()表示
从最后一个元素开始计数
计数从1开始
$("ul li:nth-last-child(2)");
<ul> <li>1</li> <li>2</li> <li>3</li> 匹配的 <li>4</li> </ul>
匹配奇数
$("p:nth-last-child(odd)");
匹配偶数
$("p:nth-last-child(even)");
公式 (an + b)，n 是计数器（从 0 开始），b 是偏移值
3n+2表示从倒数第二个元素开始，匹配每个3的倍数的元素（包括倒数第2个元素）
$("p:nth-last-child(3n+2)");
匹配父级元素的第n个子元素，从最后一个元素开始计数
:nth-last-of-type表示
$("ul li:nth-last-of-type(2)");
<ul> <li>1</li> <li>2</li> <li>3</li> 匹配的 <li>4</li> </ul>
选择下拉列表的选项
#id名 option
$("#aaa option:eq(1)")
浙公网安备 33010602011771号