jQuery 選擇器用法實(shí)例分析【prev + next】

更新時(shí)間：2020年05月22日 12:00:52 作者：人生如初見_張默

這篇文章主要介紹了jQuery 選擇器用法,結(jié)合實(shí)例形式分析了jQuery選擇器prev 與 next基本功能、用法及相關(guān)注意事項(xiàng),需要的朋友可以參考下

jQuery 選擇器 (prev + next)

定義和用法

jQuery的prev + next選擇器用于匹配緊接在prev元素后面的同輩next元素，將其封裝為jQuery對(duì)象并返回。

注意：選擇器next的查找范圍必須是與"prev元素"相鄰的下一個(gè)元素，并且必須是"prev元素"的同輩元素。

語法

// 這里的prev表示具體的選擇器

// 這里的next表示具體的選擇器

jQuery( "prev + next" )

參數(shù)

參數(shù)	描述
prev	一個(gè)有效的選擇器。
next	一個(gè)有效的選擇器。

返回值

返回封裝了與"prev元素"緊鄰的下一個(gè)同輩元素中、符合選擇器next的DOM元素的jQuery對(duì)象。

雖然與一個(gè)"prev元素"緊鄰的下一個(gè)同輩元素最多只有一個(gè)，但是"prev元素"可以有多個(gè)，因此匹配到的DOM元素也可以有多個(gè)，并且都被封裝在返回的jQuery對(duì)象中。

如果找不到任何相應(yīng)的匹配，則返回一個(gè)空的jQuery對(duì)象

實(shí)例

以下面這段代碼為例：

/* HTML代碼 */
<div id="n1">
 <p id="n2" class="test">
  <span id="n3" class="a">Welcome</span>
  <span id="n4">Hello</span>
 </p>
 <p id="n5" class="detail">
  <span id="n6" class="b codeplayer">To
   <span id="n7" class="a">w3cschool.cn</span>
   <span id="n8"></span>
   <span id="n9"></span>
  </span>
 </p>
</div>

/* jQuery代碼 */
<script>
// 擴(kuò)展jQuery對(duì)象，添加showTagInfo()方法
// 用于將jQuery對(duì)象所有匹配元素的標(biāo)識(shí)信息追加到body元素內(nèi)
// 每個(gè)元素的標(biāo)識(shí)信息形如："tagName"或"tagName#id"
jQuery.fn.showTagInfo = function(){
var tags = this.map( function(){
return this.tagName + ( this.id ? "#" + this.id : "" ); 
} ).get();
$("body").append( tags.join("<br>") + "<br><br>" );
};
 
// 選擇了id為n5的一個(gè)元素
$("p + p").showTagInfo();
 
// 選擇了id分別為n4、n8、n9的三個(gè)元素
// n4是n3的next，n8是n7的next，n9是n8的next
$("span + span").showTagInfo();
 
// 選擇了id分別為n4、n8的兩個(gè)元素
// n8沒有包含類名a，因此無法匹配其next——n9
$("span.a + span").showTagInfo();
 
// 返回一個(gè)空的jQuery對(duì)象
// HTML中雖然有span標(biāo)簽，但不是p標(biāo)簽的同輩元素，而是其子代或后代
$("p + span").showTagInfo();
</script>

感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運(yùn)行工具：http://tools.jb51.net/code/HtmlJsRun測(cè)試上述代碼運(yùn)行效果。

更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《jQuery頁面元素操作技巧匯總》、《jQuery常見事件用法與技巧總結(jié)》、《jQuery常用插件及用法總結(jié)》、《jQuery擴(kuò)展技巧總結(jié)》及《jquery選擇器用法總結(jié)》

希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。

您可能感興趣的文章: