本文例項講述了jQuery 選擇器用法。分享給大家供大家參考，具體如下：

jQuery 選擇器 (prev + next)

定義和用法

jQuery的prev + next選擇器用於匹配緊接在prev元素後面的同輩next元素，將其封裝為jQuery物件並返回。

注意： 選擇器next的查詢範圍必須是與"prev元素"相鄰的下一個元素，並且必須是"prev元素"的同輩元素。

語法

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

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

jQuery( "prev + next" )

引數

引數	描述
prev	一個有效的選擇器。
next	一個有效的選擇器。

返回值

返回封裝了與"prev元素"緊鄰的下一個同輩元素中、符合選擇器next的DOM元素的jQuery物件。

雖然與一個"prev元素"緊鄰的下一個同輩元素最多隻有一個，但是"prev元素"可以有多個，因此匹配到的DOM元素也可以有多個，並且都被封裝在返回的jQuery物件中。

如果找不到任何相應的匹配，則返回一個空的jQuery物件

例項

以下面這段程式碼為例：

/* 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>
// 擴充套件jQuery物件，新增showTagInfo()方法
// 用於將jQuery物件所有匹配元素的標識資訊追加到body元素內
// 每個元素的標識資訊形如："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的一個元素
$("p + p").showTagInfo();
 
// 選擇了id分別為n4、n8、n9的三個元素
// n4是n3的next，n8是n7的next，n9是n8的next
$("span + span").showTagInfo();
 
// 選擇了id分別為n4、n8的兩個元素
// n8沒有包含類名a，因此無法匹配其next——n9
$("span.a + span").showTagInfo();
 
// 返回一個空的jQuery物件
// HTML中雖然有span標籤，但不是p標籤的同輩元素，而是其子代或後代
$("p + span").showTagInfo();
</script>

感興趣的朋友可以使用線上HTML/CSS/JavaScript程式碼執行工具：http://tools.jb51.net/code/HtmlJsRun測試上述程式碼執行效果。

更多關於jQuery相關內容感興趣的讀者可檢視本站專題：《jQuery頁面元素操作技巧彙總》、《jQuery常見事件用法與技巧總結》、《jQuery常用外掛及用法總結》、《jQuery擴充套件技巧總結》及《jquery選擇器用法總結》

希望本文所述對大家jQuery程式設計有所幫助。