jQuery中next()方法用法實(shí)例
本文實(shí)例講述了jQuery中next()方法用法。分享給大家供大家參考。具體分析如下:
此方法獲得匹配元素集合中每個(gè)元素緊鄰的同輩元素。
也可以使用可選的表達(dá)式對(duì)同輩元素集合進(jìn)行篩選。
語法結(jié)構(gòu):
參數(shù)列表:
實(shí)例代碼:
實(shí)例一:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<meta name="author" content="http://www.dbjr.com.cn/" />
<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>
將每一個(gè)p元素緊鄰的元素中的字體顏色設(shè)置為藍(lán)色。
實(shí)例二:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<meta name="author" content="http://www.dbjr.com.cn/" />
<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)色。
希望本文所述對(duì)大家的jQuery程序設(shè)計(jì)有所幫助。
相關(guān)文章
jQuery實(shí)現(xiàn)立體式數(shù)字滾動(dòng)條增加效果
這篇文章主要介紹了jQuery立體式數(shù)字滾動(dòng)條增加的相關(guān)資料,代碼簡單易懂,非常不錯(cuò),需要的朋友可以參考下2016-12-12用jquery修復(fù)在iframe下的頁面錨點(diǎn)失效問題
iframe頁面沒有滾動(dòng)條,在父窗體中出現(xiàn)滾動(dòng)條,錨點(diǎn)標(biāo)記就會(huì)失效,用js判斷頁面是否被嵌套,用js計(jì)算iframe在父窗體位置2014-08-08jQuery+正則+文本框只能輸入數(shù)字的實(shí)現(xiàn)方法
下面小編就為大家?guī)硪黄猨Query+正則+文本框只能輸入數(shù)字的實(shí)現(xiàn)方法。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-10-10基于jquery編寫的橫向自適應(yīng)幻燈片切換特效的實(shí)例代碼
全屏自適應(yīng)jquery焦點(diǎn)圖切換特效,在IE6這個(gè)蛋疼的瀏覽器兼容性問題上得到了和諧,兼容IE6。適用瀏覽器:IE6、IE7、IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.相關(guān)代碼:2013-08-08JQuery animate動(dòng)畫應(yīng)用示例
這篇文章主要介紹了JQuery animate動(dòng)畫應(yīng)用,結(jié)合具體實(shí)例形式分析了jQuery使用animate動(dòng)畫實(shí)現(xiàn)選項(xiàng)卡及樣式動(dòng)態(tài)變化相關(guān)操作技巧,需要的朋友可以參考下2019-05-05jQuery實(shí)現(xiàn)表頭固定效果的實(shí)例代碼
jQuery實(shí)現(xiàn)表頭固定效果的實(shí)例代碼,需要的朋友可以參考一下2013-05-05jQuery查找和過濾_動(dòng)力節(jié)點(diǎn)節(jié)點(diǎn)Java學(xué)院整理
這篇文章主要為大家詳細(xì)介紹了jQuery查找和過濾的相關(guān)資料,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-07-07jQuery學(xué)習(xí)筆記(3)--用jquery(插件)實(shí)現(xiàn)多選項(xiàng)卡功能
多選項(xiàng)卡功能的網(wǎng)站有很多,本人在那么多的類似插件中,目前碰到這個(gè)比較好,花了點(diǎn)時(shí)間調(diào)試出來了與大家分享,感興趣的朋友可以參考下哈希望對(duì)你有所幫助2013-04-04