jQuery中next()方法用法實例
更新時間：2015年01月07日 10:48:05 投稿：shichen2014
這篇文章主要介紹了jQuery中next()方法用法,實例分析了next()方法的功能、定義及獲得匹配元素集合中每個元素緊鄰的同輩元素使用技巧,需要的朋友可以參考下
本文實例講述了jQuery中next()方法用法。分享給大家供大家參考。具體分析如下：
此方法獲得匹配元素集合中每個元素緊鄰的同輩元素。
也可以使用可選的表達(dá)式對同輩元素集合進(jìn)行篩選。
語法結(jié)構(gòu):
復(fù)制代碼 代碼如下:
$(selector).next(expr)
參數(shù)列表:
實例代碼:
實例一:
復(fù)制代碼 代碼如下:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<meta name="author" content="http://www.fzitv.net/" />
<title>next()函數(shù)-腳本之家</title>
<style type="text/css">
.father
{
height:200px;
width:200px;
border:1px solid blue;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("p").next().css("color","blue")
})
</script>
</head>
<body>
<div class="father">
<p>我是p元素</p>
<span>我是span元素</span>
<p>我是p元素</p>
<div>我是div元素</div>
</div>
</body>
</html>
將每一個p元素緊鄰的元素中的字體顏色設(shè)置為藍(lán)色。
實例二:
復(fù)制代碼 代碼如下:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<meta name="author" content="http://www.fzitv.net/" />
<title>next()函數(shù)-腳本之家</title>
<style type="text/css">
.father
{
height:200px;
width:200px;
border:1px solid blue;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("p").next("span").css("color","blue")
})
</script>
</head>
<body>
<div class="father">
<p>我是p元素</p>
<span>我是span元素</span>
<p>我是p元素</p>
<div>我是div元素</div>
</div>
</body>
</html>
將與p元素緊鄰的span元素中的字體顏色設(shè)置為藍(lán)色。
希望本文所述對大家的jQuery程序設(shè)計有所幫助。
相關(guān)文章
jquery 簡短 右鍵菜單 兼容ie6 ie7 ie8 firefox chrome2010-01-01
這篇文章主要介紹了jQuery中:submit選擇器用法,實例分析了:submit選擇器的功能、定義及匹配提交按鈕的使用技巧,需要的朋友可以參考下2015-01-01
Jquery實現(xiàn)圖片預(yù)加載與延時加載的方法
這篇文章主要介紹了Jquery實現(xiàn)圖片預(yù)加載與延時加載的方法,分別介紹了原生javascript與jQuery插件實現(xiàn)圖片的預(yù)加載及延遲加載的方法,具有一定的參考借鑒價值,需要的朋友可以參考下2014-12-12
jQuery通過改變input的type屬性實現(xiàn)密碼顯示隱藏切換功能
大家在做登錄注冊功能的時候都會遇到用戶選擇自己輸入的密碼是否顯示需求，大家都是怎么實現(xiàn)的呢？今天小編給大家分享一種比較好用的方法jQuery通過改變input的type屬性實現(xiàn)密碼顯示隱藏切換功能，需要的朋友參考下2017-02-02
Jquery知識點一 Jquery的ready和Dom的onload的區(qū)別
onload是所有dom元素創(chuàng)建完畢，圖片、css等都加在完畢后才觸發(fā) ready則是dom元素創(chuàng)建完畢后就被觸發(fā)2011-01-01
JS遮罩層效果 兼容ie firefox jQuery遮罩層
史上最精簡，最強(qiáng)大的JS遮罩層效果，支持ie firefox jQuery遮罩層2010-07-07
jQuery實現(xiàn)的滑塊滑動導(dǎo)航效果示例
這篇文章主要介紹了jQuery實現(xiàn)的滑塊滑動導(dǎo)航效果,涉及jQuery事件響應(yīng)及頁面元素動態(tài)操作相關(guān)實現(xiàn)技巧,需要的朋友可以參考下2018-06-06
這篇文章主要為大家詳細(xì)介紹了jQuery利用鍵盤上下鍵移動表格內(nèi)容，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-02-02
jquerydom對象的事件隱藏顯示和對象數(shù)組示例
本文為大家介紹下jquery的dom對象的事件隱藏顯示和對象數(shù)組，感興趣的朋友可以參下2013-12-12
jQuery實現(xiàn)的鼠標(biāo)經(jīng)過時變寬的效果(附demo源碼)
這篇文章主要介紹了jQuery實現(xiàn)的鼠標(biāo)經(jīng)過時變寬的效果,實例演示了jQuery的Kwicks插件實現(xiàn)針對鼠標(biāo)事件的響應(yīng)與頁面元素樣式動態(tài)變換的相關(guān)技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2016-04-04