蜜桃av噜噜,91欧美激情一区二区三区,中文字幕无码亚洲字幕成a人

jquery 選擇器、 css3 選擇器各種各樣的選擇器，作為非常靈活的 jquery 選擇器到底如何使用呢？本文和大家分享的就是jquery 常用選擇器種類及其原理相關(guān)內(nèi)容，希望對(duì)大家學(xué)習(xí)jquery有所幫助。

一、對(duì)于jQuery 選擇器基本用法

在CSS3 選擇器標(biāo)淮草案定義的選擇器語法中， jQuery 支持相當(dāng)完整的一套子集，同時(shí)還添加了一些非標(biāo)準(zhǔn)但很有用的偽類。注意 : 本節(jié)講述的是 jQuery 選擇器。其中有不少選擇器 ( 但不是全部 ) 可以在 CSS 樣式表中使用。選擇器語法有三層結(jié)構(gòu)。你肯定已經(jīng)見過選擇器中最簡(jiǎn)單的形式?！?/span> #te st ”選取 id 屬性為” test ”的元素?！?/span> blockquote ”選取文檔中的所有 <blockquote> 元素，而” div.note ” 則選取所有 class 屬性為” note ”的 <blockquote> 元素。簡(jiǎn)單選擇器可以組合成“組合選擇器”，比如 “ div.note>p ”和“ blockquote i ”，只要用組合字符做分隔符就行。簡(jiǎn)單選擇器和組合選擇器還可以分組成逗號(hào)分隔的列表。這種選擇器組是傳遞給 $() 函數(shù)最常見的形式。在解釋組合選擇器和選擇器組之前，我們必須先了解簡(jiǎn)單選擇器的語法。

1 、簡(jiǎn)單選擇器使用

簡(jiǎn)單選擇器的開頭部分( 顯式或隱式地 ) 是標(biāo)簽類型聲明。例如，如果只對(duì) < Jquery學(xué)習(xí)之選擇器種類及其原理詳解

> 元素感興趣，簡(jiǎn)單選擇器可以用“ P ”開頭。如果選取的元素和標(biāo)簽名無關(guān)，則可以使用通配符“ * ”號(hào)來代替。如果選擇器沒有以標(biāo)簽名或通配符開頭，則隱式含有一個(gè)通配符。

標(biāo)簽名或通配符指定了備選文檔元素的一個(gè)初始集。在簡(jiǎn)單選擇器中，標(biāo)簽類型聲明之后的部分由零個(gè)或多個(gè)過濾器組成。過濾器從左到右應(yīng)用，和書寫順序一致，其中每一個(gè)都會(huì)縮小選中元素集。下表列舉了jQuery 支持的過濾器。

jQuery 選擇過濾器

過濾器含義

#id 匹配 id 屬性為 id 的元素。在有效的 }ITML 文檔中，永遠(yuǎn)不會(huì)出現(xiàn)多個(gè)元素?fù)碛邢嗤?/span> ID ，因此該過濾器通常作為獨(dú)立選擇器來使用

.class 匹配 class 屬性 ( 是一串被解析成用空格分隔的單詞列表 ) 含有 class 單詞的所有元素

[attr] 匹配擁有 attr 屬性 ( 和值無關(guān) ) 的所有元素

[attr=val] 匹配擁有 attr 屬性且值為 val 的所有元素

[attr!=val] 匹配沒有 attr 屬性、或 attr 屬性的值不為 val 的所有元素 ((jQuery 的擴(kuò)展 )

[attr^=val] 匹配 attr 屬性值以 val 開頭的元素

[attr$=val] 匹配 attr 屬性值以 val 結(jié)尾的元素

[attr*=val] 匹配 attr 屬性值含有 val 的元素

[attr~=val] 當(dāng)其 attr 屬性解釋為一個(gè)由空格分隔的單詞列表時(shí)，匹配其中包含單詞 val 的元素。因此選擇器“ div.note ”與“ div [class~=note] ”相同

[attr|=val] 匹配 attr 屬性值以 val 開頭且其后沒有其他字符，或其他字符是以連字符開頭的元素

:animated 匹配正在動(dòng)畫中的元素，該動(dòng)畫是由 jQuery 產(chǎn)生的

:button 匹配 <button type= ” button ” > 和 <input type= ” button ” > 元素 (jQuery 的擴(kuò)展 )

:checkbox 匹配 <input type= ” checkbox ” > 元素 ( jQuery 的擴(kuò)展 ) ，當(dāng)顯式帶有 input 標(biāo)簽前綴” input:checkbox ”時(shí)，該過濾器更高效

:checked 匹配選中的 input 元素

:contains(text) 匹配含有指定 text 文本的元素 (jQuery 的擴(kuò)展 ) 。該過濾器中的圓括號(hào)確定了文本的范圍—無須添加引號(hào)。被過濾的元素的文本是由 textContent 或 innerText 屬性來決定的—這是原始文檔文本，不帶標(biāo)簽和注釋

:disabled 匹配禁用的元素

:empty 匹配沒有子節(jié)點(diǎn)、沒有文本內(nèi)容的元素

:enabled 匹配沒有禁用的元素

:eq(n) 匹配基于文檔順序、序號(hào)從 0 開始的選中列表中的第 n 個(gè)元素 (jQuery 的擴(kuò)展 )

:even 匹配列表中偶數(shù)序號(hào)的元素。由于第一個(gè)元素的序號(hào)是 0 ，因此實(shí)際上選中的是第 1 個(gè)、第 3 個(gè)、第 5 個(gè)等元素 (jQuery 的擴(kuò)展 )

:file 匹配 <input type= ” file ” > 元素 (jQuery 的擴(kuò)展 )

:first 匹配列表中的第一個(gè)元素。和“ :eq(0) ”相同 (jQuery 的擴(kuò)展 )

:first-child 匹配的元素是其父節(jié)點(diǎn)的第一個(gè)子元素。注意 : 這與“ :first ”不同

:gt(n) 匹配基于文檔順序、序號(hào)從 0 開始的選中列表中序號(hào)大于 n 的元素 ( jQuery 的擴(kuò)展 )

:has(sel) 匹配的元素?fù)碛衅ヅ鋬?nèi)嵌選擇器 sel 的子孫元素

:header 匹配所有頭元素 :<h1>, <h2>, <h3>, <h4>, <h5> 或 <h6> (jQuery 的擴(kuò)展 )

:hidden 匹配所有在屏幕上不可見的元素 : 大體上可以認(rèn)為這些元素的 offsetWidth 和 offsetHeight 為 0

:image 匹配 <input type= ” image ” > 元素。注意該過濾器不會(huì)匹配 <img> 元素 ( jQuery 的擴(kuò)展 )

:input 匹配用戶輸入元素 :<input>, <textarea>, <select> 和 <button>( jQuery 的擴(kuò)展 )

:last 匹配選中列表中的最后一個(gè)元素 (( jQuery 的擴(kuò)展 )

:last-child 匹配的元素是其父節(jié)點(diǎn)的最后一個(gè)子元素。注意 : 這與“ :last ”不同

:lt(n) 匹配基于文檔順序、序號(hào)從 0 開始的選中列表中序號(hào)小于 n 的元素 ( jQuery 的擴(kuò)展 )

:not(sel) 匹配的元素不匹配內(nèi)嵌選擇器 sel

:nth(n) 與“ :eq(n) ”相同 (jQuery 的擴(kuò)展 )

:nth-child(n) 匹配的元素是其父節(jié)點(diǎn)的第 n 個(gè)子元素。?？梢允菙?shù)值、單詞 even, 單詞 odd 或計(jì)算公式。使用“ :nth-child(even) ”來選取那些在其父節(jié)點(diǎn)的子元素中排行第 2 或第 4 等序號(hào)的元素。使用“ :nth-child(odd) ”來選取那些在其父節(jié)點(diǎn)的子元素中排行第 1 、第 3 等序號(hào)的元素。

更常見的情況是，n 是 xn 或 x n+y 這種計(jì)算公式，其中 x 和 y 是整數(shù)， n 是字面量 n 。因此可以用 nth-child(3n+1) 來選取第 1 個(gè)、第 4 個(gè)、第 7 個(gè)等元素。

注意該過濾器的序號(hào)是從1 開始的，因此如果一個(gè)元素是其父節(jié)點(diǎn)的第一個(gè)子元素，會(huì)認(rèn)為它是奇數(shù)元素，匹配的是 3n+1 ，而不是 3n 。要和“ :even 以及“ Jquery學(xué)習(xí)之選擇器種類及其原理詳解

dd ”過濾器區(qū)分開來，后者匹配的序號(hào)是從 0 開始的。

dd 匹配列表中奇數(shù) ( 從 0 開始 ) 序號(hào)的元素。注意序號(hào)為 1 和 3 的元素分別是第 2 個(gè)和第 4 個(gè)匹配元素 ( jQuery 的擴(kuò)展 )

nly-child 匹配那些是其父節(jié)點(diǎn)唯一子節(jié)點(diǎn)的元素

:parent 匹配是父節(jié)點(diǎn)的元素，這與“ :empty ”相反 (jQuery 的擴(kuò)展 )

:password 匹配 <input type= ” password ” > 元素 (jQuery 的擴(kuò)展 )

:radio 匹配 <input type= ” radio ” > 元素 ( j Query 的擴(kuò)展 )

:reset 匹配 <input type= ” reset ” > 和 <button type= ” reset ” > 元素 (jQuery 的擴(kuò)展 )

:selected 匹配選中的 <option> 元素。使用“ :checked ”來選取選中的復(fù)選框和單選框 (jQuery 的擴(kuò)展 )

:submit 匹配 <input type= ” submit ” > 和 <button type= ” submit ” > 元素 (jQuery 的擴(kuò)展 )

:text 匹配 <input type= ” text ” > 元素 (jQuery 的擴(kuò)展 )

:visible 匹配所有當(dāng)前可見的元素 : 大體上可以認(rèn)為這些元素的 offsetWidth 和 offsetHeight 的值不為 0 ，這和“ :hidden ”相反

注意: 表中列舉的部分選擇器在圓括號(hào)中接受參數(shù)。例如，下面這個(gè)選擇器選取的元素在其父節(jié)點(diǎn)的子元素中排行第 1 或第 2 等，只要它們含有“ JavaScript ”單詞，就不包含元素。

p:nth-child(3n+1): text (JavaScript):not(:has(a))

通常來說，指定標(biāo)簽類型前綴，可以讓過濾器的運(yùn)行更高效。例如，不要簡(jiǎn)單使用” :radio ”來選取單選框按鈕，使用“ input:radio ”會(huì) 更好。 ID 過濾器是個(gè)例外，不添加標(biāo)簽前綴時(shí)它會(huì)更高效。例如，選擇器“ #address ”通常比更明確的“ form#address ”更高效。

2 、組合選擇器用法

使用特殊操作符或“組合符”可以將簡(jiǎn)單選擇器組合起來，表達(dá)文檔樹中元素之間的關(guān)系。下表列舉了 jQuery 支持的組合選擇器。這些組合選擇器與 CSS3 支持的組合選擇器是一樣的。

下面是組合選擇器的一些例子:

"blockquote i" // 匹配 <blockquote> 里的 <i> 元素

"ol > li" //<1i> 元素是 <of> 的直接子元素

"#output+*" //id="output" 元素后面的兄弟元素

"div.note > h1+p" // 緊跟 <h1> 的 < Jquery學(xué)習(xí)之選擇器種類及其原理詳解

> 元素，在 <div class="note"> 里面

注意組合選擇器并不限于組合兩個(gè)選擇器: 組合三個(gè)甚至更多選擇器也是允許的。組合選擇器從左到右處理。

3 、選擇器組合

傳遞給$() 函數(shù) ( 或在樣式表中使用 ) 的選擇器就是選擇器組，這是一個(gè)逗號(hào)分隔的列表，由一個(gè)或多個(gè)簡(jiǎn)單選擇器或組合選擇器構(gòu)成。選擇器組匹配的元素只要匹配該選擇器組中的任何一個(gè)選擇器就行。對(duì)我們來說，一個(gè)簡(jiǎn)單選擇器也可以認(rèn)為是一個(gè)選擇器組。下面是選擇器組的一些例子 :

"h1, h2,h3" // 匹配 <h1>, <h2> 和 <h3> 元素

"#p1, #p2, #p3" // 匹配 id 為 p1, p2 或 p3 的元素

"div.note, p.note" // 匹配 class="note" 的 <div> 和 < Jquery學(xué)習(xí)之選擇器種類及其原理詳解

> 元素

"body>p,div.note>p" //<body> 和 <div class="note"> 的 < Jquery學(xué)習(xí)之選擇器種類及其原理詳解

> 子元素

注意:CSS 和 jQuery 選擇器語法允許在簡(jiǎn)單選擇器的某些過濾器中使用圓括號(hào)，但并不允許使用圓括號(hào)來進(jìn)行更常見的分組。例如，不能把選擇器組或組合選擇器放在圓括號(hào)中并且當(dāng)成簡(jiǎn)單選擇器 :

(h1, h2, h3)+p // 非法

h1+p, h2+p, h3+p // 正確的寫法

二、怎樣選取

除了$() 函數(shù)支持的選擇器語法， jQuery 還定義了一些選取方法。本章中我們已看到過的大部分 jQuery 方法都是在選中元素上執(zhí)行某種操作。選取方法不一樣 : 它們會(huì)修改選中元素集，對(duì)其進(jìn)行提取、擴(kuò)充或僅作為新選取操作的起點(diǎn)。

本節(jié)描述這些選取方法。你會(huì)注意到這些選取方法中的多數(shù)提供的功能與選擇器語法的功能是一樣的。

提取選中元素最簡(jiǎn)單的方式是按位置提取。first() 返回的 jQuery 對(duì)象僅包含選中元素中的第一個(gè)， last() 返回的 jQuery 對(duì)象則只包含最后一個(gè)元素。更通用的是， eq() 方法返回物 Query 對(duì)象只包含指定序號(hào)的單個(gè)選中元素。 ( 在 jQuery 1.4 中，負(fù)序號(hào)也是允許的，會(huì)從選區(qū)的末尾開始計(jì)數(shù)。 ) 注意這些方法返回的 jQuery 對(duì)象只含有一個(gè)元素。這與常見的數(shù)組序號(hào)是不一樣的，數(shù)組序號(hào)返回的單一元素沒有經(jīng)過 jQuery 包裝 :

var paras=$("p");

paras.first() // 僅選取第一個(gè) <p> 元素

paras.last() // 僅選取最后一個(gè) < Jquery學(xué)習(xí)之選擇器種類及其原理詳解

paras.eq(1) // 選取第二個(gè) < Jquery學(xué)習(xí)之選擇器種類及其原理詳解

paras.eq(-2) // 選取倒數(shù)第二個(gè) < Jquery學(xué)習(xí)之選擇器種類及其原理詳解

paras[1] // 第二個(gè) < Jquery學(xué)習(xí)之選擇器種類及其原理詳解

> 元素自身

通過位置提取選區(qū)更通用的方法是slice()o jQuery 的 slice() 方法與 Array.slice() 方法類似 : 前者接受開始和結(jié)束序號(hào) ( 負(fù)序號(hào)會(huì)從結(jié)尾處計(jì)算 ) ，返回的 jQuery 對(duì)象包含從開始到結(jié)束序號(hào) ( 但不包含結(jié)束序號(hào) ) 處的元素集。如果省略結(jié)束序號(hào)，返回的對(duì)象會(huì)包含從開始序號(hào)起的所有元素 :

$("p").slice(2,5) // 選取第 3 個(gè)、第 4 個(gè)和第 5 個(gè) < Jquery學(xué)習(xí)之選擇器種類及其原理詳解

> 元素

$("div").slice(-3) // 選取最后 3 個(gè) <div> 元素

filter() 是通用的選區(qū)過濾方法，有 3 種調(diào)用方式 :

傳遞選擇器字符串給filter() ，它會(huì)返回一 }jQuery 對(duì)象，僅包含也匹配該選擇器的選中元素。

傳遞另一個(gè)jQuery 對(duì)象給 filter() ，它會(huì)返回一個(gè)新的 jQuery 對(duì)象，該對(duì)象包含這兩們 Query 對(duì)象的交集。也可以傳遞元素?cái)?shù)組甚至單一文檔元素給 filter() 。

傳遞判斷函數(shù)給filter() ，會(huì)為每一個(gè)匹配元素調(diào)用該函數(shù)， filter() 則返回一個(gè) jQuery 對(duì)象，僅包含判斷函數(shù)為 true( 或任意真值 ) 的元素。在調(diào)用判斷函數(shù)時(shí)， this 值為當(dāng)前元素，參數(shù)是元素序號(hào)。

$("div").filter(".note") // 與 $("div.note") 一樣

$("div").filter($(".note")) // 與 $("div.note") 一樣

$("div").filter(function(idx){return idx%2 == 0}) // 與 $("div:even") 一樣

not() 方法與 filter() 一樣，除了含義與 filter() 相反。如果傳遞選擇器字符串給 not() 它會(huì)返回一個(gè)新的 jQuery 對(duì)象，該對(duì)象只包含不匹配該選擇器的元素。如果傳遞 jQuery 對(duì)象、元素?cái)?shù)組或單一元素給 not() ，它會(huì)返回除了顯式排除的元素之外的所有選中元素。如果傳遞判斷函數(shù)給 not() ，該判斷函數(shù)的調(diào)用就與在 filter() 中一樣，只是返回的 jQuery 對(duì)象僅包含那些使得判斷函數(shù)返回 false 或其他假值的元素 :

$("div").not("#header, #footer"); // 除了兩個(gè)特殊元素之外的所有元素

在jQuery 1.4 中，提取選區(qū)的另一種方式是 has() 方法。如果傳入選擇器， has() 會(huì)返回一個(gè)新的 jQuery 對(duì)象，僅包含有子孫元素匹配該選擇器的選中元素。如果傳入文檔元素給 has() ，它會(huì)將選中元素集調(diào)整為那些是指定元素祖先節(jié)點(diǎn)的選中元素 :

$("p").has("a[href]") // 包含鏈接的段落

add() 方法會(huì)擴(kuò)充選區(qū)，而不是對(duì)其進(jìn)行過濾或提取?？梢詫鹘o $() 函數(shù)的任何參數(shù) ( 除了函數(shù) ) 照樣傳給 add() 方法。 add() 方法會(huì)返回原來的選中元素，加上傳給 $() 函數(shù)的那些參數(shù)所選中 ( 或創(chuàng)建 ) 的那些元素。 add() 會(huì)移除重復(fù)元素，并對(duì)該組合選區(qū)進(jìn)行排序，以便里面的元素按照文檔中的順序排列 :

// 選取所有 <div> 和所有 < Jquery學(xué)習(xí)之選擇器種類及其原理詳解

> 元素的等價(jià)方式

$("div, p") // 使用選擇器組

$("div").add(p) // 給 add() 傳入選擇器

$("div").add($("p")) // 給 add() 傳入 jQuery 對(duì)象

var paras = document.getElementsByTagName("p"); // 類數(shù)組對(duì)象

$("div").add(paras); // 給 add() 傳入元素?cái)?shù)組

1 、恢復(fù)到之前的選中元素集

為了實(shí)現(xiàn)方法的鏈?zhǔn)秸{(diào)用，很多jQuery 對(duì)象的方法最后都會(huì)返回調(diào)用對(duì)象。然而本節(jié)講述的方法都返回新的 jQuery 對(duì)象?？梢枣?zhǔn)秸{(diào)用下去，但必須清晰地意識(shí)到，在鏈?zhǔn)秸{(diào)用的后面所操作的元素集，可能已經(jīng)不是該鏈?zhǔn)秸{(diào)用開始時(shí)的元素集了。

實(shí)際情況還要復(fù)雜些。當(dāng)這里所描述的選取方法在創(chuàng)建或返回一個(gè)新的ejQuery 對(duì)象時(shí)，它們會(huì)給該對(duì)象添加一個(gè)到它派生自的舊 jQuery 對(duì)象的內(nèi)部引用。這會(huì)創(chuàng)建一個(gè) jQuery 對(duì)象的鏈?zhǔn)奖砘驐！?/span> end() 方法用來彈出棧，返回保存的 jQuery 對(duì)象。在鏈?zhǔn)秸{(diào)用中調(diào)用 end() 會(huì)將匹配元素集還原到之前的狀態(tài)?？紤]以下代碼 :

// 尋找所有 <div> 元素，然后在其中尋找 <P> 元素

// 高亮顯示 <P> 元素，然后給 <div> 元素添加一個(gè)邊框

// 首先，不使用鏈?zhǔn)秸{(diào)用

var divs = $("div");

var paras = div.find("p");

paras.addClass("highlight");

divs.css("border", "solid black 1px");

// 下面展現(xiàn)如何使用鏈?zhǔn)秸{(diào)用來實(shí)現(xiàn)

$("div").find("p").addClass("highlight").end().css("border", "solid black 1px");

// 還可以將操作調(diào)換順序來避免調(diào)用 end()

$("div").css("border", "solid block 1px").find("p").addClass("highlight");

如果想手動(dòng)定義選中元素集，同時(shí)保持與end() 方法的兼容，可以將新的元素集作為數(shù)組或類數(shù)組對(duì)象傳遞給 push5tack() 方法。指定的元素會(huì)成為新的選中元素，之前選中的元素集則會(huì)壓入棧中，之后可以用 end() 方法還原它們 :

var sel = $("div"); // 選取所有 <div> 元素

sel.pushStack(document.getElementsByTagName("p")); // 修改為所有 <P> 元素

sel.end(); // 還原為 <div> 元素

既然我們已經(jīng)講解了end() 方法及其使用的選區(qū)棧，就有最后一個(gè)方法需要講解。 andSelf() 返回一個(gè)新的 jQuery 對(duì)象，包含當(dāng)前的所有選中元素，加上之前的所有選中元素 ( 會(huì)去除重復(fù)的 ) 。 andSelf() 和 add() 方法一樣，或許“ addPrev ”是一個(gè)更具描述性的名字。作為例子，考慮上面代碼的下述變化 : 高亮顯示 <P> 元素及其父節(jié)點(diǎn)中的 <div> 元素，然后給這些 <div> 元素添加邊框 :

$("div").find("p").andSelf(). // 尋找 <div 》中的 <P> ，合并起來

addClass("highlight"). // 都高亮

end().end(). // 彈出棧兩次，返回 $("div")

css("border", "solid black 1px"); // 給 divs 添加邊框

2. 將選中元素集用做上下文

上面描述的filter(). add() 、和 not() 方法會(huì)在各自的選中元素集上執(zhí)行交集、并集和差集運(yùn)算。 jQuery 還定義一些其他選取方法可將當(dāng)前選中元素集作為上下文來使用。對(duì)選中的每一個(gè)元素，這些方法會(huì)使用該選中元素作為上下文或起始點(diǎn)來得到新的選中元素集，然后返回一個(gè)新的 jQuery 對(duì)象，包含所有新的選中元素的并集。與 add() 方法類似，會(huì)移除重復(fù)元素并進(jìn)行排序，以便元素會(huì)按照在文檔中出現(xiàn)的順序排列好。

該類別選取方法中最通用的是find() 。它會(huì)在每一個(gè)當(dāng)前選中元素的子孫元素中尋找與指定選擇器字符串匹配的元素，然后它返回一個(gè)新的 jQuery 對(duì)象來代表所匹配的子孫元素集。注意這些新選中的元素不會(huì)并入已存在的選中元素集中。同時(shí)注意 find() 和 filter() 不同， filter() 不會(huì)選中新元素，只是簡(jiǎn)單地將當(dāng)前選中的元素集進(jìn)行縮減 :

$("div").find("p") // 在中查找元素，與 $("div p") 相同

該類別中的其他方法返回新的jQuery 對(duì)象，代表當(dāng)前選中元素集中每一個(gè)元素的子元素、兄弟元素或父元素。大部分都接受可選的選擇器字符串作為參數(shù)。不傳入選擇器時(shí)，它們會(huì)返回所有子元素、兄弟元素或父元素。傳入選擇器時(shí)，它們會(huì)過濾元素集，僅返回匹配的。

children() 方法返回每一個(gè)選中元素的直接子元素，可以用可選的選擇器參數(shù)進(jìn)行過濾 :

// 尋找 id 為 "header" 和 "footer" 元素的子節(jié)點(diǎn)元素中的所有 <span> 元素

// 與 $("#header>span, #footer>span") 相同

$("#header, #footer").children("span")

contents() 方法與 children() 方法類似，不同的是它會(huì)返回每一個(gè)元素的所有子節(jié)點(diǎn)，包括文本節(jié)點(diǎn)。如果選中元素集中有 <iframe> 元素， contents() 還會(huì)返回該 <iframe> 內(nèi)容的文檔對(duì)象。注意 contents() 不接受可選的選擇器字符串參數(shù)—因?yàn)樗祷氐奈臋n節(jié)點(diǎn)不完全是元素，而選擇器字符串僅用來描述元素節(jié)點(diǎn)。

next() 和 prev() 方法返回每一個(gè)選中元素的下一個(gè)和上一個(gè)兄弟元素 ( 如果有的話 ) 。如果傳入了選擇器，會(huì)只選中匹配該選擇器的兄弟元素 :

$("h1").next("p") // 與 $("h1+p") 相同

$("h1").prev() //<h1> 元素前面的兄弟元素

nextAll() 和 prevAll() 返回每一個(gè)選中元素前面或后面的所有兄弟元素 ( 如果有的話 ) 。 siblings() 方法則返回每一個(gè)選中元素的所有兄弟元素 ( 選中元素本身不是自己的兄弟元素 ) 。如果給這些方法傳人選擇器，則只會(huì)返回匹配的兄弟元素 :

$("#footer").nextAll("p") // 緊跟 #footer 元素的所有 <P> 兄弟元素

$("#footer").prevAll() //#footer 元素前面的所有兄弟元素

從jQuery 1.4 開始， nextUntil() 和 prevUntil() 方法接受一個(gè)選擇器參數(shù)，會(huì)選取選中元素后面或前面的所有兄弟元素，直到找到某個(gè)匹配該選擇器的兄弟元素為止。如果省略該選擇器，這兩個(gè)方法的作用就和不帶選擇器的 nextAll() 和 prevAll() 一樣。

parent() 方法返回每一個(gè)選中元素的父節(jié)點(diǎn) :

$("li").parent() // 列表元素的父節(jié)點(diǎn)，比如 <u1> 和 <ol> 元素

parents() 方法返回每一個(gè)選中元素的祖先節(jié)點(diǎn) ( 向上直到元素 ) 。 parent() 和 parents() 都接受一個(gè)可選的選擇器字符串參數(shù) :

$("a[href]").parents("p") // 含有鏈接的 <P> 元素

parentsUntil() 返回每一個(gè)選中元素的祖先元素，直到出現(xiàn)匹配指定選擇器的第一個(gè)祖先元素。 closest() 方法必須傳人一個(gè)選擇器字符串，會(huì)返回每一個(gè)選中元素的祖先元素中匹配該選擇器的最近一個(gè)祖先元素 ( 如果有的話 ) 。對(duì)該方法而言，元素被認(rèn)為是自身的祖先元素。在 jQuery 1.4 中，還可以給 closest() 傳入一個(gè)祖先元素作為第二個(gè)參數(shù)，用來阻止 jQuery 往上查找時(shí)超越該指定元素 :

$("a[href]").closest("div") // 包含鏈接的最里層 <div>

$("a[href]").parentsUntil(":not(div)") // 所有包裹 <a> 的 <div> 元素

來源：極客頭條

99热99这里只有精品6国产,亚洲中文字幕在线天天更新,在线观看亚洲精品国产福利片 ,久久久久综合网

Jquery學(xué)習(xí)之選擇器種類及其原理詳解

熱門帖子

Swift 教程

最新帖子

Xcode 9.4下載