JQuery选择器：
一、Basic（基础选择器）
-
"*"所有元素
-
"#id"有指定ID的元素
-
".class"有指定class的元素、".class.class"有指定的2个class的元素
-
"element"选取指定的element(元素)
-
"selector1, selector2, selector3"复合选择器
例如：
HTML：
1 |
<div
id="one"
class="menu">123</div>
|
2 |
<div
id="two"
class="menu">456</div>
|
3 |
<p
class="title1 title2">0</p>
|
JQuery代码：
1 |
$("*")
|
2 |
$("#one")
|
3 |
$(".menu")
|
4 |
$(".title1.title2")
|
5 |
$("div")
|
6 |
$("#one,.title1.title2")
|
结果：
1 |
[<div id="one"
class="menu">123</div>,<div id="two"
class="menu">456</div>,<p class="title1 title2">0</p>]
|
2 |
[<div id="one"
class="menu">123</div>]
|
3 |
[<div id="one"
class="menu">123</div>,<div id="two"
class="menu">456</div>]
|
4 |
[<p class="title1 title2">0</p>]
|
5 |
[<div id="one"
class="menu">123</div>,<div id="two"
class="menu">456</div>]
|
6 |
[<div id="one"
class="menu">123</div>,<p class="title1 title2">0</p>]
|
二、
-
":first"获取第一个元素
-
":last"获取最后一个元素
-
":even"获取奇数行的元素
-
":odd"获取偶数行的元素
-
":eq(index)"获取给定索引值的元素
-
":gt(no)"获取大于给定索引值(从0开始)的元素
-
":lt"获取所有小于给定索引值(从0开始)的元素
-
":not(selector)"获取去除所有与给定选择器匹配的元素
例如：
HTML：
1 |
<table>
|
2 |
<tr><td>Value 1</td></tr>
|
3 |
<tr><td>Value 2</td></tr>
|
4 |
<tr><td>Value 3</td></tr>
|
5 |
<tr><td>Value 4</td></tr>
|
6 |
<input
name="apple"/>
|
7 |
<input
name="orange"
checked="checked"
/>
|
8 |
</table>
|
JQuery代码：
1 |
$("tr:first")
|
2 |
$("tr:last")
|
3 |
$("tr:even")
|
4 |
$("tr:odd")
|
5 |
$("tr:eq(3)")
|
6 |
$("tr:gt(0)")
|
7 |
$("tr:lt(2)")
|
8 |
$("input:not(:checked)")
|
结果：
1 |
[<tr><td>Value 1</td></tr>] |
2 |
[<tr><td>Value 4</td></tr>] |
3 |
[<tr><td>Value 1</td></tr>,<tr><td>Value 3</td></tr>] |
4 |
[<tr><td>Value 2</td></tr>,<tr><td>Value 4</td></tr>] |
5 |
[<tr><td>Value 3</td></tr>] |
6 |
[<tr><td>Value 2</td></tr>,<tr><td>Value 3</td></tr>,<tr><td>Value 4</td></tr>] |
7 |
[<tr><td>Value 1</td></tr>,<tr><td>Value 2</td></tr>] |
8 |
[<input name="apple"/>]
|
三、
-
"[attribute]"获取包含给定属性的元素
-
"[attribute = value]"获取给定的属性是某个特定值的元素
-
"[attribute != value]"获取所有不含有指定的属性，或者属性不等于特定值的元素
-
"[attribute ^= value]"获取给定的属性是以某些值开始的元素
-
"[attribute $= value]"获取给定的属性是以某些值结尾的元素
-
"[attribute *= value]"获取给定的属性是以包含某些值的元素
-
"[selector1][selector2][selector3]"复合属性选择器
-
"[attribute |= value]"获取指定的属性等于"value"值的元素，或者给定值value后面紧跟着"-"的元素（例子待增加）
-
"[attribute ~= value]"获取指定的属性等于"value"值的元素，且是被空格划分开的（例子待增加）
例如：
HTML：
1 |
<input
id="lily"
name="abcd"/>
|
2 |
<input
name="12345"/>
|
3 |
<input
id="jose"/>
|
JQuery代码：
1 |
$("input[name]")
|
2 |
$("input[name=‘abcd‘]")
|
3 |
$("input[name!=‘abcd‘]")
|
4 |
$("input[name^=‘ab‘]")
|
5 |
$("input[name$=‘345‘]")
|
6 |
$("input[name*=‘os‘]")
|
7 |
$("input[id][name]")
|
结果：
1 |
[<input id="lily"
name="abcd"/>,<input name="12345"/>]
|
2 |
[<input id="lily"
name="abcd"/>]
|
3 |
[<input name="12345"/>]
|
4 |
[<input id="lily"
name="abcd"/>]
|
5 |
[<input name="12345"/>]
|
6 |
[<input id="jose"/>]
|
7 |
[<input id="lily"
name="abcd"/>]
|
四、
-
":input"获取所有 input, textarea, select 和 button 元素
-
":text"获取所有的单行文本框
-
":password"获取所有密码框
-
":radio"获取所有单选按钮
-
":checkbox"获取所有复选框
-
":submit"获取所有提交按钮
-
":reset"获取所有重置按钮
-
":image"获取所有图像域
-
":button"获取所有按钮
-
":file"获取所有文件域
五、
-
":hidden"获取所有隐藏元素
-
":visible"匹配所有的可见元素
-
":enabled"获取所有可用元素
-
":disabled"获取所有不可用元素
-
":checked"获取所有选中的被选中元素(复选框、单选框等，不包括select中的option)
-
":selected"获取所有选中的option元素
例如：
HTML：
1 |
<input
type="hidden"
name="12345"/>
|
2 |
<input
disabled="disabled"
name="12345"/>
|
3 |
<input
type="checkbox"
checked="checked"
name="12345"/>
|
4 |
<select>
|
5 |
<option
value="1">1111</option>
|
6 |
<option
value="2"
selected="selected">2222</option>
|
7 |
</select>
|
JQuery代码：
1 |
$("input:hidden")
|
2 |
$("input:visible")
|
3 |
$("input:enabled")
|
4 |
$("input:disabled")
|
5 |
$("input[type=‘checkbox‘]:checked")
|
6 |
$("select option:selected")
|
结果：
1 |
[<input type="hidden"
name="12345"/>]
|
2 |
[<input disabled="disabled"
name="12345"/>,<input type="checkbox"
checked="checked"
name="12345"/>]
|
3 |
[<input type="hidden"
name="12345"/>,<input type="checkbox"
checked="checked"
name="12345"/>]
|
4 |
[<input disabled="disabled"
name="12345"/>]
|
5 |
[<input type="checkbox"
checked="checked"
name="12345"/>]
|
6 |
[<option value="2"
selected="selected">2222</option>]
|
六
-
"ancestor descendant"在给定的祖先元素下匹配所有的后代元素
-
"parent > child"在给定的父元素下匹配所有的子元素
-
"prev + next"匹配所有紧接在 prev 元素后的 next 元素
-
"prev ~ siblings"匹配 prev 元素之后的所有 siblings(兄弟姐妹一家亲) 元素
例如：
HTML：
1 |
<form>
|
2 |
<label>Name:</label>
|
3 |
<input
name="first"
/>
|
4 |
<div>
|
5 |
<label>Age:</label>
|
6 |
<input
name="age"
/>
|
7 |
</div>
|
8 |
</form>
|
9 |
<input
name="outter"
/>
|
JQuery代码：
1 |
$("form input")
|
2 |
$("form > input")
|
3 |
$("label + input")
|
4 |
$("form ~ input")
|
结果：
1 |
[<input name="first"
/>,<input name="age"
/>]
|
2 |
[<input name="first"
/>]
|
3 |
[ <input name="first"
/>,<input name="age"
/>]
|
4 |
[<input name="outter"
/>]
|
七、
-
":header"匹配如 h1, h2, h3之类的标题元素
-
":animated"匹配所有正在执行动画效果的元素
-
":focus"匹配当前获取焦点的元素
-
":contains(text)"匹配包含给定文本的元素
-
":empty"匹配所有不包含子元素或者文本的空元素
-
"has(selector)"匹配含有选择器所匹配的元素的元素
-
":parent(selector)"匹配含有子元素或者文本的元素，注意不要和parent()方法混淆
例如：
HTML：
1 |
<div>
|
2 |
<h1>Header 1 Zhao</h1>
|
3 |
<p>Contents 1 Qian</p>
|
4 |
</div>
|
5 |
<h2></h2>
|
6 |
<p></p>
|
JQuery代码：
1 |
$(":header")
|
2 |
$("h1:contains(‘Zhao‘)")
|
3 |
$("p:empty")
|
4 |
$("div:has(h1)")
|
5 |
$("h1:parent")
|
结果：
1 |
[<h1>Header 1 Zhao</h1>,<h2></h2>] |
2 |
[<h1>Header 1 Zhao</h1>] |
3 |
[<p></p>] |
4 |
[<div><h1>Header 1 Zhao</h1><p>Contents 1 Qian</p></div>] |
5 |
[<h1>Header 1 Zhao</h1>] |
八
-
":nth-child(no)"匹配其父元素下的第n个子或奇偶元素
备注：":eq(index)" 只匹配一个元素，而":nth-child"将为每一个父元素匹配子元素。":nth-child()"从1开始，而":eq(index)"是从0算起的！可以使用":nth-child(even)"、":nth-child(odd)"、":nth-child(3n)"、":nth-child(2)"、":nth-child(3n+1)"、":nth-child(3n+2)"
-
":first-child"匹配第一个子元素
-
":last:child"匹配最后一个子元素
-
":only-child"如果某个元素是父元素中唯一的子元素，那将会被匹配；如果不是，则不会被匹配
例如：
HTML：
01 |
<ul>
|
02 |
<li>1111</li>
|
03 |
<li>2222</li>
|
04 |
<li>3333</li>
|
05 |
</ul>
|
06 |
<ul>
|
07 |
<li>4444</li>
|
08 |
<li>5555</li>
|
09 |
<li>6666</li>
|
10 |
</ul>
|
11 |
<ul>
|
12 |
<li>0000</li>
|
13 |
</ul>
|
JQuery代码：
1 |
$("ul li:nth-child(2)")
|
2 |
$("ul li:first-child")
|
3 |
$("ul li:last-child")
|
4 |
$("ul li:only-child")
|
结果：
1 |
[<li>2222</li>,<li>5555</li>] |
2 |
[<li>1111</li>,<li>4444</li>] |
3 |
[<li>3333</li>,<li>6666</li>] |
4 |
[ <li>0000</li>] |