JavaScripts+jquery

選擇器

 

參數

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> 元素:

$("p")

#id 選擇器

jQuery #id 選擇器經過 HTML 元素的 id 屬性選取指定的元素。

頁面中元素的 id 應該是惟一的，因此您要在頁面中選取惟一的元素須要經過 #id 選擇器。

經過 id 選取元素語法以下：

$("#test")

.class 選擇器

jQuery 類選擇器能夠經過指定的 class 查找元素。

語法以下：

$(".test")

$("*")	選取全部元素
$(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> 元素