jQuery中andSelf()方法用法實(shí)例

更新時(shí)間：2015年01月08日 12:01:31 投稿：shichen2014

這篇文章主要介紹了jQuery中andSelf()方法用法,實(shí)例分析了andSelf()方法將先前所選的元素加入當(dāng)前元素集合中的使用技巧,需要的朋友可以參考下

本文實(shí)例講述了jQuery中andSelf()方法用法。分享給大家供大家參考。具體分析如下：

此方法可以將先前所選的元素加入當(dāng)前元素集合中。

語(yǔ)法結(jié)構(gòu):

復(fù)制代碼代碼如下:

.andSelf()

對(duì)于此方法可能理解起來(lái)有所困難，那么下面就詳細(xì)分析一下下面的一段實(shí)例，為了便于查看代碼，只截取了代碼中的核心內(nèi)容。

復(fù)制代碼代碼如下:

$(".second").nextAll().css("color","green"); 

<ul> 

  <li>html專(zhuān)區(qū)</li> 

  <li class="second">DIV+CSS專(zhuān)區(qū)</li> 

  <li>Javascript專(zhuān)區(qū)</li> 

  <li>Jquery專(zhuān)區(qū)</li> 

</ul>

以上代碼運(yùn)行之后，第三個(gè)和第四個(gè)li中的文本顏色被設(shè)置為綠色。再看下面這個(gè)代碼:

復(fù)制代碼代碼如下:

$(".second").nextAll().andSelf().css("color","green");

<ul>

  <li>html專(zhuān)區(qū)</li>

  <li class="second">DIV+CSS專(zhuān)區(qū)</li>

  <li>Javascript專(zhuān)區(qū)</li>

  <li>Jquery專(zhuān)區(qū)</li>

</ul>

以上代碼運(yùn)行之后，第二個(gè)、第三個(gè)和第四個(gè)li中的文本顏色被設(shè)置為綠色。
兩個(gè)代碼運(yùn)行結(jié)果的差距就是因?yàn)閍ndSelf()方法的原因。

分析一下代碼的執(zhí)行過(guò)程:首先使用類(lèi)選擇器會(huì)選中第二個(gè)li元素，然后再使用nextAll()方法會(huì)把第三個(gè)和第四個(gè)元素轉(zhuǎn)化為當(dāng)前所選。如果到這里開(kāi)始調(diào)用css()方法，那么就是第一段代碼的運(yùn)行結(jié)果。如果調(diào)用andSelf()方法則會(huì)把先前所選的加入到當(dāng)前元素集合中，于是再調(diào)用css()方法，三個(gè)li元素中的字體顏色都會(huì)變成綠色。

實(shí)例代碼:

復(fù)制代碼代碼如下:

<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<meta name="author" content="http://chabaoo.cn/" />

<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專(zhuān)區(qū)</li> 

    <li class="second">DIV+CSS專(zhuān)區(qū)</li> 

    <li>Javascript專(zhuān)區(qū)</li> 

    <li>Jquery專(zhuān)區(qū)</li> 

  </ul> 

</div> 

</body> 

</html>