JQuery选择器总结

JQuery选择器：

一、Basic（基础选择器）

1. "*"所有元素

2. "#id"有指定ID的元素

3. ".class"有指定class的元素、".class.class"有指定的2个class的元素

4. "element"选取指定的element(元素)

5. "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>]

 

二、

1. ":first"获取第一个元素

2. ":last"获取最后一个元素

3. ":even"获取奇数行的元素

4. ":odd"获取偶数行的元素

5. ":eq(index)"获取给定索引值的元素

6. ":gt(no)"获取大于给定索引值(从0开始)的元素

7. ":lt"获取所有小于给定索引值(从0开始)的元素

8. ":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"/>]

 

三、

1. "[attribute]"获取包含给定属性的元素

2. "[attribute = value]"获取给定的属性是某个特定值的元素

3. "[attribute != value]"获取所有不含有指定的属性，或者属性不等于特定值的元素

4. "[attribute ^= value]"获取给定的属性是以某些值开始的元素

5. "[attribute $= value]"获取给定的属性是以某些值结尾的元素

6. "[attribute *= value]"获取给定的属性是以包含某些值的元素

7. "[selector1][selector2][selector3]"复合属性选择器

8. "[attribute |= value]"获取指定的属性等于"value"值的元素，或者给定值value后面紧跟着"-"的元素（例子待增加）

9. "[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"/>]

 

四、

1. ":input"获取所有 input, textarea, select 和 button 元素

2. ":text"获取所有的单行文本框

3. ":password"获取所有密码框

4. ":radio"获取所有单选按钮

5. ":checkbox"获取所有复选框

6. ":submit"获取所有提交按钮

7. ":reset"获取所有重置按钮

8. ":image"获取所有图像域

9. ":button"获取所有按钮

10. ":file"获取所有文件域

     

 

 

五、

1. ":hidden"获取所有隐藏元素

2. ":visible"匹配所有的可见元素

3. ":enabled"获取所有可用元素

4. ":disabled"获取所有不可用元素

5. ":checked"获取所有选中的被选中元素(复选框、单选框等，不包括select中的option)

6. ":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>]

 

六

1. "ancestor descendant"在给定的祖先元素下匹配所有的后代元素

2. "parent > child"在给定的父元素下匹配所有的子元素

3. "prev + next"匹配所有紧接在 prev 元素后的 next 元素

4. "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" />]

 

七、

1. ":header"匹配如 h1, h2, h3之类的标题元素

2. ":animated"匹配所有正在执行动画效果的元素

3. ":focus"匹配当前获取焦点的元素

4. ":contains(text)"匹配包含给定文本的元素

5. ":empty"匹配所有不包含子元素或者文本的空元素

6. "has(selector)"匹配含有选择器所匹配的元素的元素

7. ":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>]

 

八

1. ":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)"

2. ":first-child"匹配第一个子元素

3. ":last:child"匹配最后一个子元素

4. ":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>]