jQuery中nextAll()方法用法實例
更新時間：2015年01月07日 10:52:38 投稿：shichen2014
這篇文章主要介紹了jQuery中nextAll()方法用法,實例分析了nextAll()方法的功能、定義及查找匹配元素之后所有的同輩元素使用技巧,需要的朋友可以參考下
本文實例講述了jQuery中nextAll()方法用法。分享給大家供大家參考。具體分析如下：
此方法查找匹配元素之后所有的同輩元素。也可以使用可選的表達式對同輩元素集合進行篩選。
語法結構:
復制代碼 代碼如下:
$(selector).nextAll(expr)
參數列表:
實例代碼:
實例一:
復制代碼 代碼如下:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="http://www.fzitv.net/" />
<title>腳本之家</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").nextAll().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元素之后的所有同輩元素中的字體顏色設置藍色。
實例二:
復制代碼 代碼如下:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="http://www.fzitv.net/" />
<title>腳本之家</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").nextAll("div").css("color","blue")
})
</script>
</head>
<body>
<div class="father">
<p>我是p元素</p>
<span>我是span元素</span>
<div>我是div元素</div>
<p>我是p元素</p>
<div>我是div元素</div>
</div>
</body>
</html>
將p元素之后的所有同輩div元素中的字體顏色設置藍色。
希望本文所述對大家的jQuery程序設計有所幫助。
相關文章
BootStrap日期控件在模態(tài)框中選擇時間下拉菜單無效的原因及解決辦法(火狐下不能點擊)
今天同事讓我?guī)退黄鸾鉀Q一個問題，關于兼容的bug問題，在火狐中使用模態(tài)框加載日期控件時選擇時間下拉菜單沒有效果（不能點擊），而在谷歌中卻是好的，下面小編附上原因分析及解決辦法，有需要的朋友可以參考下2016-08-08
jquery.guide.js新版上線操作向導鏤空提示jQuery插件(推薦)
這篇文章主要介紹了jquery.guide.js新版上線操作向導鏤空提示jQuery插件(推薦),需要的朋友可以參考下2017-05-05
jQuery EasyUI API 中文文檔 - ComboBox組合框
jQuery EasyUI API 中文文檔 - ComboBox組合框,使用jQuery EasyUI的朋友可以參考下。2011-10-10
這篇文章主要介紹了原生jQuery實現只顯示年份下拉框，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-12-12
jQuery中的insertBefore(),insertAfter(),after(),before()區(qū)別介紹
這篇文章主要介紹了jQuery中的insertBefore(),insertAfter(),after(),before()區(qū)別介紹的相關資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-09-09
這篇文章主要介紹了jQuery中toggleClass()方法用法,實例分析了toggleClass()方法的功能、定義及對添加或移除匹配元素的一個或多個類進行切換的使用技巧,需要的朋友可以參考下2015-01-01
本文給大家匯總介紹了jQuery的四種選擇器的使用方法以及示例，非常的簡單實用，希望對大家學習jquery能夠有所幫助。2016-06-06
圖片延遲加載并等比縮放，一個簡單的JQuery插件。 需要的朋友可以參考下。2009-11-11
在jQuery ajax中按鈕button和submit的區(qū)別分析
昨天在使用jQuery ajax的post方法進行頁面?zhèn)髦?，無刷新獲取數據展示，弄了半天就是沒有效果，看了半天也沒有語法錯誤，最后才終于明白問題出在哪里2012-10-10
這篇文章主要介紹了Jquery屬性的獲取/設置及樣式添加/刪除操作技巧,結合實例形式分析了jquery針對屬性與樣式的相關獲取、設置、添加、刪除等相關操作技巧與注意事項,需要的朋友可以參考下2019-12-12