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