JQuery选择器总结

作者：袖梨 2026-09-03

JQuery选择器：

一、Basic（基础选择器）

"*"所有元素
"#id"有指定ID的元素
".class"有指定class的元素、".class.class"有指定的2个class的元素
"element"选取指定的element(元素)
"selector1, selector2, selector3"复合选择器

例如：

HTML：

<div id="one" class="menu">123</div>

<div id="two" class="menu">456</div>

<p class="title1 title2">0</p>

JQuery代码：

$("*")

$("#one")

$(".menu")

$(".title1.title2")

$("div")

$("#one,.title1.title2")

结果：

[<div id="one" class="menu">123</div>,<div id="two" class="menu">456</div>,<p class="title1 title2">0</p>]

[<div id="one" class="menu">123</div>]

[<div id="one" class="menu">123</div>,<div id="two" class="menu">456</div>]

[<p class="title1 title2">0</p>]

[<div id="one" class="menu">123</div>,<div id="two" class="menu">456</div>]

[<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：

<table>

<tr><td>Value 1</td></tr>

<tr><td>Value 2</td></tr>

<tr><td>Value 3</td></tr>

<tr><td>Value 4</td></tr>

<input name="apple"/>

<input name="orange" checked="checked" />

</table>

JQuery代码：

$("tr:first")

$("tr:last")

$("tr:even")

$("tr:odd")

$("tr:eq(3)")

$("tr:gt(0)")

$("tr:lt(2)")

$("input:not(:checked)")

结果：

[<tr><td>Value 1</td></tr>]

[<tr><td>Value 4</td></tr>]

[<tr><td>Value 1</td></tr>,<tr><td>Value 3</td></tr>]

[<tr><td>Value 2</td></tr>,<tr><td>Value 4</td></tr>]

[<tr><td>Value 3</td></tr>]

[<tr><td>Value 2</td></tr>,<tr><td>Value 3</td></tr>,<tr><td>Value 4</td></tr>]

[<tr><td>Value 1</td></tr>,<tr><td>Value 2</td></tr>]

[<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：

<input id="lily" name="abcd"/>

<input name="12345"/>

<input id="jose"/>

JQuery代码：

$("input[name]")

$("input[name='abcd']")

$("input[name!='abcd']")

$("input[name^='ab']")

$("input[name$='345']")

$("input[name*='os']")

$("input[id][name]")

结果：

[<input id="lily" name="abcd"/>,<input name="12345"/>]

[<input id="lily" name="abcd"/>]

[<input name="12345"/>]

[<input id="lily" name="abcd"/>]

[<input name="12345"/>]

[<input id="jose"/>]

[<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：

<input type="hidden" name="12345"/>

<input disabled="disabled" name="12345"/>

<input type="checkbox" checked="checked" name="12345"/>

<select>

<option value="1">1111</option>

<option value="2" selected="selected">2222</option>

</select>

JQuery代码：

$("input:hidden")

$("input:visible")

$("input:enabled")

$("input:disabled")

$("input[type='checkbox']:checked")

$("select option:selected")

结果：

[<input type="hidden" name="12345"/>]

[<input disabled="disabled" name="12345"/>,<input type="checkbox" checked="checked" name="12345"/>]

[<input type="hidden" name="12345"/>,<input type="checkbox" checked="checked" name="12345"/>]

[<input disabled="disabled" name="12345"/>]

[<input type="checkbox" checked="checked" name="12345"/>]

[<option value="2" selected="selected">2222</option>]

六

"ancestor descendant"在给定的祖先元素下匹配所有的后代元素
"parent>child"在给定的父元素下匹配所有的子元素
"prev+next"匹配所有紧接在 prev 元素后的 next 元素
"prev~siblings"匹配 prev 元素之后的所有 siblings(兄弟姐妹一家亲) 元素

例如：

HTML：

<form>

<label>Name:</label>

<input name="first" />

<div>

<label>Age:</label>

<input name="age" />

</div>

</form>

<input name="outter" />

JQuery代码：

$("form input")

$("form>input")

$("label+input")

$("form~input")

结果：

[<input name="first" />,<input name="age" />]

[<input name="first" />]

[<input name="first" />,<input name="age" />]

[<input name="outter" />]

七、

":header"匹配如 h1, h2, h3之类的标题元素
":animated"匹配所有正在执行动画效果的元素
":focus"匹配当前获取焦点的元素
":contains(text)"匹配包含给定文本的元素
":empty"匹配所有不包含子元素或者文本的空元素
"has(selector)"匹配含有选择器所匹配的元素的元素
":parent(selector)"匹配含有子元素或者文本的元素，注意不要和parent()方法混淆

例如：

HTML：

<div>

<h1>Header 1 Zhao</h1>

<p>Contents 1 Qian</p>

</div>

<h2></h2>

<p></p>

JQuery代码：

$(":header")

$("h1:contains('Zhao')")

$("p:empty")

$("div:has(h1)")

$("h1:parent")

结果：

[<h1>Header 1 Zhao</h1>,<h2></h2>]

[<h1>Header 1 Zhao</h1>]

[<p></p>]

[<div><h1>Header 1 Zhao</h1><p>Contents 1 Qian</p></div>]

[<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：