选择器
参数
element
一个用于搜索的元素。指向DOM节点的标签名。
<div>div1</div>
<div>div2</div>
<span>span</span>
$('div');
[<div>div1</div>, <div>div2</div>]
class
一个用于搜索的类。一个元素可以有多个类,只要有一个符合就包含。
<div class="c1">div1</div>
<div class="c2">div2</div>
<span class="c1">span</span>
$('.c1');
[<div class="c1">div1</div>, <span class="c1">span</span>]
,
匹配任意一个类的元素
$('div,span');
[<div class="c1">div1</div>, <div class="c2">div2</div>, <span class="c1">span</span>]
在给定的祖先元素下匹配所有的后代元素
<div class="c1">
<div>
<a>aaasb</a>
<span>aaaas</span>
</div>
</div>
<div class="c2">div2</div>
<span class="c1">span</span>
$('div a');
[<a>aaasb</a>, <a>aaaas</a>, <a>111s</a>, <a>hahaha</a>]
在父元素下查找子元素(之查找子元素)
$('div > a');
[<a>aaasb</a>, <a>aaaas</a>, <a>hahaha</a>]
?一个有效选择器并且紧挨着的第一个选择器
prev + next
匹配prev元素之后的第一个siblings元素
pre ~ siblings
获取第一个元素
:first
$('a:first');
[<a>aaasb</a>]
匹配所有索引值为偶数的元素,从0开始计数
:even
$("tr:even");
[<tr><td>Header 1</td></tr>, <tr><td>Value 2</td></tr>, <tr><td>Value 4</td></tr>]
匹配所有索引值为奇数的元素,从0开始计数
:odd
匹配一个给的索引值的元素
:eq(index)
匹配所有大于给定索引值的元素
:gt(index)
元素选择器
jQuery 元素选择器基于元素名选取元素。
在页面中选取所有 <p> 元素:
#id 选择器
jQuery #id 选择器通过 HTML 元素的 id 属性选取指定的元素。
页面中元素的 id 应该是唯一的,所以您要在页面中选取唯一的元素需要通过 #id 选择器。
通过 id 选取元素语法如下:
.class 选择器
jQuery 类选择器可以通过指定的 class 查找元素。
语法如下:
$("*") | 选取所有元素 | |
$(this) | 选取当前 HTML 元素 | |
$("p.intro") | 选取 class 为 intro 的 <p> 元素 | |
$("p:first") | 选取第一个 <p> 元素 | |
$("ul li:first") | 选取第一个 <ul> 元素的第一个 <li> 元素 | |
$("ul li:first-child") | 选取每个 <ul> 元素的第一个 <li> 元素 | |
$("[href]") | 选取带有 href 属性的元素 | |
$("a[target='_blank']") | 选取所有 target 属性值等于 "_blank" 的 <a> 元素 | |
$("a[target!='_blank']") | 选取所有 target 属性值不等于 "_blank" 的 <a> 元素 | |
$(":button") | 选取所有 type="button" 的 <input> 元素 和 <button> 元素 | |
$("tr:even") | 选取偶数位置的 <tr> 元素 | |
$("tr:odd") | 选取奇数位置的 <tr> 元素 |