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：
<ul>
<li>1111</li>
<li>2222</li>
<li>3333</li>
</ul>
<ul>
<li>4444</li>
<li>5555</li>
<li>6666</li>
</ul>
<ul>
<li>0000</li>
</ul>JQuery代码：
$("ul li:nth-child(2)")
$("ul li:first-child")
$("ul li:last-child")
$("ul li:only-child")结果：
[<li>2222</li>,<li>5555</li>]
[<li>1111</li>,<li>4444</li>]
[<li>3333</li>,<li>6666</li>]
[ <li>0000</li>]
PS：如有错误，欢迎批评指出。待完善中。。。。
扫一扫
416
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
