parent ~ child: 在给定的父元素下匹配所有的子元素
示例:
<span style="font-weight: normal;"><form>
<label>Name:</label>
<input name="name" />
<fieldset>
<label>Newsletter:</label>
<input name="newsletter" />
</fieldset>
</form>
<input name="none" /></span>
匹配表单中所有的子级input元素
jQuery代码:
<span style="font-size: 14px; font-weight: normal;">$("form > input")</span>
结果:
[ <input name="name" /> ]
prev ~ siblings : 匹配prev元素之后的所有siblings元素
示例:
<form>
<label>Name:</label>
<input name="name" />
<fieldset>
<label>Newsletter:</label>
<input name="newsletter" />
</fieldset>
</form>
<input name="none" />
找到所有与表单同辈的input元素
jQuery代码:
<span style="font-size:14px;">$("form ~ input</span>
结果:
[ <input name="none" /> ]
prev + next : 匹配所有紧接在prev元素后的next元素
示例:
<form>
<label>Name:</label>
<input name="name" />
<fieldset>
<label>Newsletter:</label>
<input name="newsletter" />
</fieldset>
</form>
<input name="none" />
匹配所有跟在label后边的inputt元素
jQuery代码:
$("label + input")
结果:
[ <input name="name" />, <input name="newsletter" /> ]
:first 获取第一个元素
示例:
<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>
获取匹配的第一个元素
jQuery代码:
$('li:first');
结果:
<span style="font-size:14px;">[ <li>list item 1</li> ]</span>
:last 获取最后个元素
示例:
<span style="font-size:14px;"><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></span>
获取匹配的最后个元素
jQuery代码:
$('li:last')
结果:
[ <li>list item 5</li> ]
:not (selector) 去除所有与给定选择器匹配的元素
示例:
<input name="apple" />
<input name="flower" checked="checked" />
查找所有未选中的input元素
jQuery代码:
<span style="font-size:14px;">$("input:not(:checked)")</span>
结果:
<span style="font-size:14px;">[ <input name="apple" /> ]</span>
:even 匹配所有索引值为偶数的元素,从0开始计数
示例:
<table>
<tr><td>Header 1</td></tr>
<tr><td>Value 1</td></tr>
<tr><td>Value 2</td></tr>
</table>
查找表格的1、3、5...行(即索引值0、2、4...)
jQuery代码:
$("tr:even")
结果:
<span style="font-size:14px;">[ <tr><td>Header 1</td></tr>, <tr><td>Value 2</td></tr> ]</span>
:odd 匹配所有索引值为奇数的元素,从0开始计数
示例:
<table>
<tr><td>Header 1</td></tr>
<tr><td>Value 1</td></tr>
<tr><td>Value 2</td></tr>
</table>
查找表格的2、4、6...行(即索引值1
、3、5...)
jQuery代码:
$("tr:odd")
结果:
[ <tr><td>Value 1</td></tr> ]
:eq(index) 匹配一个给定索引值的元素
示例:
<table>
<tr><td>Header 1</td></tr>
<tr><td>Value 1</td></tr>
<tr><td>Value 2</td></tr>
</table>
查找第二行
jQuery代码:
<span style="font-size:14px;">$("tr:eq(2)")</span>
结果:
[ <tr><td>Value 2</td></tr> ]
:gt(index) 匹配所有大于给定索引值的元素
示例:
<table>
<tr><td>Header 1</td></tr>
<tr><td>Value 1</td></tr>
<tr><td>Value 2</td></tr>
</table>
查找第二第三行,即索引值是1和2,也就是比0大
jQuery代码:
<span style="font-size:14px;">$("tr:gt(0)")</span>
结果:
<span style="font-size:14px;">[ <tr><td>Value 1</td></tr>, <tr><td>Value 2</td></tr> ]</span>
:lt(index) 匹配所有小于给定索引值的元素
示例:
<table>
<tr><td>Header 1</td></tr>
<tr><td>Value 1</td></tr>
<tr><td>Value 2</td></tr>
</table>
查找第一二行,即索引值是0和1,也就是小于2
jQuery代码:
$("tr:lt(2)")
结果:
[ <tr><td>Header 1</td></tr>, <tr><td>Value 1</td></tr> ]
:focus 匹配当前获取焦点的元素
如同其他伪类选择器(那些以":"开始),建议:focus前面用标记名称或其他选择;否则,通用选择("*")是不言而喻的。换句话说,$(':focus')等同为$('*:focus')。如果你正在寻找当前的焦点元素,$( document.activeElement )将检索,而不必搜索整个DOM树。
示例:
添加一个"focused"的类名给那些有focus方法的元素
css 代码:
.focused {
background: #abcdef;
}
html 代码:
<div id="content">
<input tabIndex="1">
<input tabIndex="2">
<select tabIndex="3">
<option>select menu</option>
</select>
<div tabIndex="4">
a div
</div>
</div>
jQuery 代码:
$( "#content" ).delegate( "*", "focus blur", function( event ) {
var elem = $( this );
setTimeout(function() {
elem.toggleClass( "focused", elem.is( ":focus" ) );
}, 0);
});
:has(selector) 匹配含有选择器所匹配的元素的元素
示例:
给所有包含 p 元素的 div 元素添加一个 text 类
HTML 代码:
<div><p>Hello</p></div>
<div>Hello again!</div>
jQuery 代码:
$("div:has(p)").addClass("test");
结果:
[ <div class="test"><p>Hello</p></div> ]