jQuery 選擇器用法實例分析【prev + next】
本文實例講述了jQuery 選擇器用法。分享給大家供大家參考,具體如下:
jQuery 選擇器 (prev + next)
定義和用法
jQuery的prev + next選擇器用于匹配緊接在prev元素后面的同輩next元素,將其封裝為jQuery對象并返回。
注意: 選擇器next的查找范圍必須是與"prev元素"相鄰的下一個元素,并且必須是"prev元素"的同輩元素。
語法
// 這里的prev表示具體的選擇器
// 這里的next表示具體的選擇器
jQuery( "prev + next" )
參數(shù)
| 參數(shù) | 描述 |
|---|---|
| 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元素內(nèi)
// 每個元素的標識信息形如:"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相關內(nèi)容感興趣的讀者可查看本站專題:《jQuery頁面元素操作技巧匯總》、《jQuery常見事件用法與技巧總結(jié)》、《jQuery常用插件及用法總結(jié)》、《jQuery擴展技巧總結(jié)》及《jquery選擇器用法總結(jié)》
希望本文所述對大家jQuery程序設計有所幫助。
相關文章
jquery.alert 彈出式復選框?qū)崿F(xiàn)代碼
jquery alert 彈出式 復選框,需要的朋友可以參考下,代碼有點亂。2009-06-06
picLazyLoad 實現(xiàn)圖片延時加載(包含背景圖片)
下面小編就為大家?guī)硪黄猵icLazyLoad 實現(xiàn)圖片延時加載(包含背景圖片)。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-07-07
jquery左右滾動焦點圖banner圖片鼠標經(jīng)過顯示上下頁按鈕
jquery左右滾動焦點圖banner圖片,鼠標經(jīng)過顯示上下頁,適合寬和高都比較大的頁面使用附演示,感興趣的朋友可以參考下2013-10-10
jQuery使用load()方法載入另外一個網(wǎng)頁文件內(nèi)的指定標簽內(nèi)容到div標簽的方法
這篇文章主要介紹了jQuery使用load()方法載入另外一個網(wǎng)頁文件內(nèi)的指定標簽內(nèi)容到div標簽的方法,涉及jQuery中l(wèi)oad方法的使用技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-03-03
為Jquery EasyUI 組件加上清除功能的方法(詳解)
下面小編就為大家?guī)硪黄獮镴query EasyUI 組件加上清除功能的方法(詳解)。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-04-04

