jQuery中andSelf()方法用法實(shí)例
本文實(shí)例講述了jQuery中andSelf()方法用法。分享給大家供大家參考。具體分析如下：
此方法可以將先前所選的元素加入當(dāng)前元素集合中。
語(yǔ)法結(jié)構(gòu):
對(duì)于此方法可能理解起來(lái)有所困難，那么下面就詳細(xì)分析一下下面的一段實(shí)例，為了便于查看代碼，只截取了代碼中的核心內(nèi)容。
$(".second").nextAll().css("color","green");
<ul>
<li>html專區(qū)</li>
<li class="second">DIV+CSS專區(qū)</li>
<li>Javascript專區(qū)</li>
<li>Jquery專區(qū)</li>
</ul>
以上代碼運(yùn)行之后，第三個(gè)和第四個(gè)li中的文本顏色被設(shè)置為綠色。再看下面這個(gè)代碼:
$(".second").nextAll().andSelf().css("color","green");
<ul>
<li>html專區(qū)</li>
<li class="second">DIV+CSS專區(qū)</li>
<li>Javascript專區(qū)</li>
<li>Jquery專區(qū)</li>
</ul>
以上代碼運(yùn)行之后，第二個(gè)、第三個(gè)和第四個(gè)li中的文本顏色被設(shè)置為綠色。
兩個(gè)代碼運(yùn)行結(jié)果的差距就是因?yàn)閍ndSelf()方法的原因。
分析一下代碼的執(zhí)行過(guò)程:首先使用類選擇器會(huì)選中第二個(gè)li元素，然后再使用nextAll()方法會(huì)把第三個(gè)和第四個(gè)元素轉(zhuǎn)化為當(dāng)前所選。如果到這里開始調(diào)用css()方法，那么就是第一段代碼的運(yùn)行結(jié)果。如果調(diào)用andSelf()方法則會(huì)把先前所選的加入到當(dāng)前元素集合中，于是再調(diào)用css()方法，三個(gè)li元素中的字體顏色都會(huì)變成綠色。
實(shí)例代碼:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.dhdzp.com/" />
<title>腳本之家</title>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".second").nextAll().andSelf().css("color","green");
})
</script>
</head>
<body>
<div>
<ul>
<li>html專區(qū)</li>
<li class="second">DIV+CSS專區(qū)</li>
<li>Javascript專區(qū)</li>
<li>Jquery專區(qū)</li>
</ul>
</div>
</body>
</html>
希望本文所述對(duì)大家的jQuery程序設(shè)計(jì)有所幫助。
- jQuery中append、insertBefore、after與insertAfter的簡(jiǎn)單用法與注意事項(xiàng)
- jQuery中insertAfter()方法用法實(shí)例
- jQuery中prependTo()方法用法實(shí)例
- jQuery中appendTo()方法用法實(shí)例
- jQuery中append()方法用法實(shí)例
- jQuery中end()方法用法實(shí)例
- jQuery中contents()方法用法實(shí)例
- jQuery中add()方法用法實(shí)例
- jQuery中siblings()方法用法實(shí)例
- jQuery中insertBefore()方法用法實(shí)例
相關(guān)文章
jquery實(shí)現(xiàn)input框獲取焦點(diǎn)的方法
下面小編就為大家?guī)?lái)一篇jquery實(shí)現(xiàn)input框獲取焦點(diǎn)的方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-02-02
jquery獲取form表單input元素值的簡(jiǎn)單實(shí)例
下面小編就為大家?guī)?lái)一篇jquery獲取form表單input元素值的簡(jiǎn)單實(shí)例。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-05-05
從零開始學(xué)習(xí)jQuery (二) 萬(wàn)能的選擇器
本章講解jQuery最重要的選擇器部分的知識(shí). 有了jQuery的選擇器我們幾乎可以獲取頁(yè)面上任意的一個(gè)或一組對(duì)象, 可以明顯減輕開發(fā)人員的工作量.2010-10-10
對(duì)博客系統(tǒng)已經(jīng)做到了博客評(píng)論模塊部分了，對(duì)單篇博文進(jìn)行靜態(tài)化的同時(shí)對(duì)博文的評(píng)論部分采取AJAX的方式去讀取。2009-11-11
jQuery使用DataTable實(shí)現(xiàn)刪除數(shù)據(jù)后重新加載功能
利用jQuery Datatable和artTemplate組合來(lái)做的表格。但是當(dāng)刪除數(shù)據(jù)時(shí)，需要重新加載table里的數(shù)據(jù)。接下來(lái)通過(guò)本文給大家分享jQuery使用DataTable實(shí)現(xiàn)刪除數(shù)據(jù)后重新加載功能，需要的朋友參考下2017-02-02
Jquery+bootstrap實(shí)現(xiàn)表格行置頂置底上移下移操作詳解
這篇文章主要為大家詳細(xì)介紹了Jquery+bootstrap實(shí)現(xiàn)表格行置頂置底上移下移操作，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-02-02
JQuery常見節(jié)點(diǎn)操作實(shí)例分析
這篇文章主要介紹了JQuery常見節(jié)點(diǎn)操作,結(jié)合實(shí)例形式分析了jQuery針對(duì)元素節(jié)點(diǎn)的添加、刪除常見操作函數(shù)使用技巧與相關(guān)注意事項(xiàng),需要的朋友可以參考下2019-05-05
jQuery選擇器使得獲得頁(yè)面元素變得更加容易、更加靈活，從而大大減輕了開發(fā)人員的壓力。如同蓋樓一樣，沒有磚瓦，就蓋不起樓房。得不到元素談何其他各種操作呢？可見,jQuery選擇器的重要性。當(dāng)然想一下子掌握所有選擇器也是很困難的，這個(gè)得靠實(shí)踐和積累2014-03-03
JQuery上傳插件Uploadify使用詳解及錯(cuò)誤處理
關(guān)于JQuery上傳插件Uploadify使用詳解網(wǎng)上一大把，基本上內(nèi)容都一樣。我根據(jù)網(wǎng)上的步驟配置完成后，會(huì)報(bào)一些錯(cuò)誤，而我根據(jù)這些錯(cuò)誤去網(wǎng)上找解決方案，卻沒有相關(guān)資料，所以為了不讓更多的朋友走彎路，我把我遇到的一些問題進(jìn)行匯總，也方便我自己以后查閱。2010-04-04
使用Jquery來(lái)實(shí)現(xiàn)可以輸入值的下拉選單 雛型
最近案子中，需要使用下拉選單，但問題是，里面選項(xiàng)都會(huì)有各 其他：，然後 可以 讓 user 在輸入2011-12-12