前言：

上次說(shuō)到了JavaScript稳诚，對(duì)其有一定了解，本文就來(lái)說(shuō)說(shuō)jQuery。jQuery就是一個(gè)由JavaScript編寫(xiě)的輕量庫(kù)唬格，簡(jiǎn)單的說(shuō)就是封裝了一些JavaScript的操作，所以使用jQuery比使用原生的JavaScript可以達(dá)到用更少的代碼做更多的事的效果颜说。

歡迎大家關(guān)注我的公眾號(hào) javawebkf购岗，目前正在慢慢地將簡(jiǎn)書(shū)文章搬到公眾號(hào)，以后簡(jiǎn)書(shū)和公眾號(hào)文章將同步更新门粪，且簡(jiǎn)書(shū)上的付費(fèi)文章在公眾號(hào)上將免費(fèi)喊积。

一、初識(shí)jQuery：

1玄妈、使用方法：
去官網(wǎng)http://jquery.com/download/下載jQuery的包乾吻，然后放到項(xiàng)目中存放js代碼的目錄下髓梅，最后在需要用jQuery的HTML中用<script type="text/javascript" src="js目錄/jquery.js"/>引入即可。

2绎签、jQuery對(duì)象與DOM對(duì)象：
jQuery對(duì)象與DOM對(duì)象是不一樣的枯饿，看下面例子：
需求：我們要獲取頁(yè)面上這個(gè)id為test的p元素，然后給這個(gè)文本節(jié)點(diǎn)增加一段文字：“hello world”诡必，并且讓文字顏色變成紅色奢方。

<p id="test"></p>
<!-- 用原生JavaScript的做法-->
var p = document.getElementById('test');
p.innerHTML = 'hello world';
p.style.color = 'red';
<!-- 通過(guò)jQuery操作-->
var $p = $('#test');
$p.html('hello world').css('color','red');

用JavaScript操作是過(guò)取到DOM對(duì)象，再進(jìn)行操作爸舒，而jQuery獲取到的$p是jQuery對(duì)象蟋字。
jQuery對(duì)象與DOM對(duì)象的轉(zhuǎn)換：

<div>元素一</div>
<div>元素二</div>
<div>元素三</div>
var $div = $('div') //jQuery對(duì)象
var div = $div[0] //轉(zhuǎn)化成DOM對(duì)象
var div = $div.get(0) //通過(guò)get方法，轉(zhuǎn)化成DOM對(duì)象
var div = document.getElementsByTagName('div'); //dom對(duì)象
var $div = $(div); //jQuery對(duì)象
var $first = $div.first(); //找到第一個(gè)div元素

二扭勉、jQuery選擇器：

1鹊奖、id選擇器 $( "#id" )：
所謂id選擇器，就是相當(dāng)于JavaScript的getElementById()方法涂炎。語(yǔ)法：$( "#id" )忠聚，也就是說(shuō)#號(hào)后面跟上要操作的標(biāo)簽的id的值即可。

2璧尸、類(lèi)選擇器 $( ".class" )：
就是通過(guò)標(biāo)簽的class屬性來(lái)選擇標(biāo)簽的選擇器咒林。語(yǔ)法：$( ".class" ),也就是 . 后面跟上標(biāo)簽的class的值即可。

3爷光、元素選擇器 $( "element" )：
也就是直接通過(guò)標(biāo)簽名選擇標(biāo)簽垫竞，比如$("p").css("border", "3px solid blue");就是通過(guò)jQuery的元素選擇器選擇到所有的p標(biāo)簽，然后改變其樣式蛀序。

4欢瞪、全選擇器 $( "*" )：
顧名思義，全選擇器就是選擇所有的標(biāo)簽徐裸。

5遣鼓、層級(jí)選擇器：
一個(gè)頁(yè)面就是由各種標(biāo)簽構(gòu)成的，各個(gè)標(biāo)簽之間存在著不同的關(guān)系重贺，父子關(guān)系骑祟、兄弟關(guān)系等，層級(jí)選擇器就可以處理這種關(guān)系气笙。用法如下表：

6阀捅、基本篩選選擇器：
篩選選擇器的用法與CSS中的偽元素相似，選擇器用冒號(hào)“：”開(kāi)頭狰贯，通過(guò)一個(gè)列表也搓，看看基本篩選器的描述：

image.png

7、內(nèi)容篩選選擇器：
基本篩選選擇器針對(duì)的都是元素DOM節(jié)點(diǎn)涵紊，如果我們要通過(guò)內(nèi)容來(lái)過(guò)濾，jQuery也提供了一組內(nèi)容篩選選擇器幔摸。其描述如下：

image.png

8摸柄、可見(jiàn)性篩選選擇器：
元素有顯示狀態(tài)與隱藏狀態(tài)，jQuery根據(jù)元素的狀態(tài)擴(kuò)展了可見(jiàn)性篩選選擇器:visible與:hidden

9既忆、屬性篩選選擇器：
屬性選擇器讓你可以基于屬性來(lái)定位一個(gè)元素驱负。可以只指定該元素的某個(gè)屬性患雇，這樣所有使用該屬性而不管它的值跃脊，這個(gè)元素都將被定位，也可以更加明確并定位在這些屬性上使用特定值的元素苛吱，這就是屬性選擇器展示它們的威力的地方酪术。

image.png

10、子元素篩選選擇器：
這個(gè)不是很常用翠储，用法如下：

image.png

11绘雁、表單元素選擇器：
顧名思義，表單元素選擇器就是方便操作表單的選擇器援所。

image.png

12庐舟、表單對(duì)象屬性篩選選擇器：
除了表單元素選擇器外，表單對(duì)象屬性篩選選擇器也是專(zhuān)門(mén)針對(duì)表單元素的選擇器住拭，可以附加在其他選擇器的后面挪略，主要功能是對(duì)所選擇的表單元素進(jìn)行篩選。

image.png

13滔岳、特殊選擇器this:
this杠娱，表示當(dāng)前的上下文對(duì)象是一個(gè)html對(duì)象，可以調(diào)用html對(duì)象所擁有的屬性和方法澈蟆。
$(this),代表的上下文對(duì)象是一個(gè)jquery的上下文對(duì)象墨辛，可以調(diào)用jQuery的方法和屬性值。直接看案例代碼：

$('p').click(function(){
    //把p元素轉(zhuǎn)化成jQuery的對(duì)象
    var $this= $(this) 
    $this.css('color','red')
})

三趴俘、jQuery的屬性與樣式：

1睹簇、.attr()與.removeAttr()：
操作特性的DOM方法主要有3個(gè)奏赘，getAttribute方法、setAttribute方法和removeAttribute方法太惠，就算如此在實(shí)際操作中還是會(huì)存在很多問(wèn)題磨淌，這里先不說(shuō)。而在jQuery中用一個(gè)attr()與removeAttr()就可以全部搞定了凿渊，包括兼容問(wèn)題梁只。直接看案例來(lái)體會(huì)其用法：

<form>
        <input type="text" value="設(shè)置value" />
        <input type="text" value="獲取value"/>
        <input type="text" value="回調(diào)拼接value" />
        <input type="text" value="刪除value" />
    </form>
<script type="text/javascript">
        $("input:first").attr('value','測(cè)試')// 把“設(shè)置value”改成“測(cè)試”
        $("input:eq(1)").attr('value')// 獲取第二個(gè)input的value屬性的值
        //把新的值與現(xiàn)有的值聯(lián)系在一起：
        $("input:eq(2)").attr('value',function(i, val){// 拼接第三個(gè)input的value屬性的值
            return '通過(guò)function設(shè)置' + val
        })
        $("input:eq(3)").removeAttr('value')// 刪除第四個(gè)input的value屬性的值
    </script>

運(yùn)行結(jié)果如下圖：

image.png

2、.html()埃脏、.text()和.val()：
讀取搪锣、修改元素的html結(jié)構(gòu)或者元素的文本內(nèi)容又或者操作表單字段value值是常見(jiàn)的DOM操作，jQuery針對(duì)這樣的處理提供了3個(gè)便捷的方法.html()彩掐、.text()和.val()构舟。

.html()的用法：操作元素的html結(jié)構(gòu)
語(yǔ)法：$("element").html()、$("element").html(htmlString)堵幽、
$("element").html(function(index,html){...})
案例：

<div class="demo">
   <p> <a href="#">baidu</a></p>
</div>
<script type="text/javascript">
   //第一種用法(如果有多個(gè)p標(biāo)簽狗超，那么只能獲取第一個(gè)p標(biāo)簽的內(nèi)容)
   alert($(".demo p").html());//會(huì)彈出 “ <a href="#">baidu</a> ”

   //第二種用法(如果有多個(gè)p標(biāo)簽，那么每一個(gè)p標(biāo)簽都會(huì)加上 .html方法里面的內(nèi)容)
  ($(".demo p").html('<a href="#">taobao</a>'));
  // 結(jié)果會(huì)把html方法里面的a標(biāo)簽添加到p標(biāo)簽里面朴下，p標(biāo)簽里面就有兩個(gè)a標(biāo)簽了

  //第三種用法
  $(".demo p").html(function(index,oldHtml){
       return "我是第" + (index+1) + "個(gè)p標(biāo)簽：" + oldHtml;
  })
  //結(jié)果就是(假設(shè)已經(jīng)執(zhí)行了第二種用法中的演示代碼)：
  /*
   <p>我是第1個(gè)p標(biāo)簽<a href="#">baidu</a></p>
   <p>我是第2個(gè)p標(biāo)簽<a href="#">taobao</a></p>
  */
</script>

.text()的用法：操作元素的純文本內(nèi)容
語(yǔ)法：$("element").text()努咐、$("element").text(textString)、
$("element").text(function(index,text){...})
案例：

<div class="demo">
   <p> <a href="#">baidu</a></p>
</div>
<script type="text/javascript">
   //第一種用法(如果有多個(gè)p標(biāo)簽殴胧，那么其他p標(biāo)簽里的文本內(nèi)容也能獲取到)
   alert($(".demo p").text());//會(huì)彈出 “baidu ”渗稍，所以該方法只能獲取純文本內(nèi)容

   //第二種用法(如果有多個(gè)p標(biāo)簽，那么每一個(gè)p標(biāo)簽都會(huì)被替換成純文本內(nèi)容)
  ($(".demo p").text('<a href="#">taobao</a>'));
  // 結(jié)果會(huì)把class為demo的div下面的所有p標(biāo)簽替換成text方法里面的純文本內(nèi)容

  //第三種用法
  $(".demo p").text(function(index,oldText){
       return "我是第" + (index+1) + "個(gè)p標(biāo)簽里面的文本：" + oldText;
  })
  //結(jié)果就是：
  /*
    我是第1個(gè)p標(biāo)簽里面的文本：baidu
  */
</script>

.val()的用法：操作表單字段value值
語(yǔ)法：$("element").val()溃肪、$("element").val(value)免胃、$("element").val(function(index,value){...})
案例：

<div id="test">
  <input type="radio" name="color" id ="rd1" value="red" />紅色
  <input type="radio" name="color" id ="rd2" value="blue" />藍(lán)色
</div>
<script type="text/javascript">
  // 第一種用法(只會(huì)獲取到第一個(gè)input的值，跟有沒(méi)有選中沒(méi)關(guān)系)
  alert($("#test input:radio").val());// 彈出“紅色”
  //第二種用法(獲取用戶選中的值惫撰，而不是返回第一個(gè))
  alert($("input:radio[name=color]:checked").val());// 彈出用戶選中的顏色
  // 第三種用法
  $("input").val("blank");// 會(huì)把所有input的value值替換成blank
  //第四種用法(會(huì)依次獲取input的value值)
  $("input:radio[name=color]").val(function(index,oldVal){
    return "color-"+(index+1)+":"+oldVal;
  })
</script>

3羔沙、.addClass():
過(guò)動(dòng)態(tài)改變類(lèi)名（class），可以讓其修改元素呈現(xiàn)出不同的效果厨钻。直接看案例：

<style>
   .firstClass{
        background: #bbffaa;
    }
   .secondClass{
        background: red;
    }
</style>
<div class="left">
  <div class="aaron">
      <p>測(cè)試1</p>
  </div>
  <div class="aaron">
      <p>測(cè)試2</p>
  </div>
</div>
<script type="text/javascript">
  $('.left div').addClass('firstClass')
</script>

本來(lái)“測(cè)試1”和“測(cè)試2”都是沒(méi)有顏色的扼雏，下面的js代碼運(yùn)行后，就會(huì)給這兩個(gè)div添加“firstClass”夯膀，所以“測(cè)試1”和“測(cè)試2”背景就會(huì)變成紅色诗充。還有刪除class的removeClass()方法和切換class的toggleClass()方法，用法類(lèi)似诱建。

4蝴蜓、.css()：
在jQuery中我們要?jiǎng)討B(tài)的修改style屬性我們只要使用css()方法就可以實(shí)現(xiàn)了。看案例：

<div class="first">獲取顏色</div>
    <p></p>
<script type="text/javascript">
        $('p:eq(0)').text( $('.first').css("background-color","red") )
</script>

本來(lái)“獲取顏色”這四個(gè)字是沒(méi)有顏色的茎匠，運(yùn)行了js代碼后格仲，就會(huì)有紅色的背景顏色。添加樣式還有.addClass()方法诵冒，它的優(yōu)先級(jí)低于.css()方法凯肋。

5、元素的數(shù)據(jù)存儲(chǔ)：
jQuery提供的存儲(chǔ)接口:

jQuery.data( element, key, value )   //靜態(tài)接口,存數(shù)據(jù)
jQuery.data( element, key )  //靜態(tài)接口,取數(shù)據(jù)   
.data( key, value ) //實(shí)例接口,存數(shù)據(jù)
.data( key ) //實(shí)例接口,存數(shù)據(jù)

看到這些語(yǔ)法也是摸不著頭腦汽馋，直接看案例體會(huì)其用法：

  <h2>jQuery.data()靜態(tài)方法</h2>
    <div class="left">
        <div class="aaron">
            <p>點(diǎn)擊看結(jié)果</p>
            <p>jQuery.data</p>
        </div>
        <div><span></span></div>
    </div>
    <h2>.data()實(shí)例方法</h2>
    <div class="right">
        <div class="aaron">
            <p>點(diǎn)擊看結(jié)果</p>
            <p>.data</p>
        </div>
        <div><span></span></div>
    </div>
    <script type="text/javascript">
    $('.left').click(function() {
        var ele = $(this);
        //通過(guò)$.data方式設(shè)置數(shù)據(jù)
        $.data(ele, "a", "data test")
        $.data(ele, "b", {
            name : "簡(jiǎn)書(shū)"
        })
        //通過(guò)$.data方式取出數(shù)據(jù)
        var reset = $.data(ele, "a") + "</br>" + $.data(ele, "b").name
        ele.find('span').append(reset)
    })
    </script>
    <script type="text/javascript">
    $('.right').click(function() {
        var ele = $(this);
        //通過(guò).data方式設(shè)置數(shù)據(jù)
        ele.data("a", "data test")
        ele.data("b", {
            name: "簡(jiǎn)書(shū)"
        })
        //通過(guò).data方式取出數(shù)據(jù)
        var reset = ele.data("a") + "</br>" + ele.data("b").name
        ele.find('span').append(reset)
    })
    </script>

沒(méi)點(diǎn)擊“點(diǎn)擊看結(jié)果”的時(shí)候是這樣的：

image.png

點(diǎn)擊了“點(diǎn)擊看結(jié)果”后是這樣的：

image.png

也就是說(shuō)侮东，data可以用來(lái)暫時(shí)存儲(chǔ)數(shù)據(jù)，然后還可以取出來(lái)豹芯。

四悄雅、DOM操作：

1、jQuery創(chuàng)建節(jié)點(diǎn)：

var div = $("<div>我是文本節(jié)點(diǎn)</div>")
$body.append(div)

這段代碼就會(huì)在html的body中添加一個(gè)div節(jié)點(diǎn)告组，并且內(nèi)容是“我是文本節(jié)點(diǎn)”煤伟。

2、內(nèi)部插入的append()和appendTo：
這兩個(gè)方法都是向頁(yè)面追加內(nèi)容木缝，不同的是append()前面是被插入的對(duì)象，后面是要在對(duì)象內(nèi)插入的元素內(nèi)容围辙，而appendTo()前面是要插入的元素內(nèi)容我碟，而后面是被插入的對(duì)象。具體用法如下：

<div class="content"></div>
<script type="text/javascript">
        //.append(), 內(nèi)容在方法的后面姚建，
        //參數(shù)是將要插入的內(nèi)容矫俺。
        $(".content").append('<div class="append">通過(guò)append方法添加的元素</div>')
        //.appendTo()剛好相反，內(nèi)容在方法前面掸冤，
        //無(wú)論是一個(gè)選擇器表達(dá)式 或創(chuàng)建作為標(biāo)記上的標(biāo)記
        //它都將被插入到目標(biāo)容器的末尾厘托。
        $('<div class="appendTo">通過(guò)appendTo方法添加的元素</div>').appendTo($(".content"))
</script>

3、外部插入的after()和before()：
上面的append和appendTo是插入到匹配元素的內(nèi)部稿湿，而這兩個(gè)是插入到匹配元素的外部铅匹。看下面代碼：

<div class="aaron">
     <p class="test1">測(cè)試before</p>
</div>
<div class="aaron">
     <p class="test2">測(cè)試after</p>
</div>
<script type="text/javascript">
        //在匹配test1元素集合中的每個(gè)元素前面插入p元素
        $(".test1").before('<p style="color:red">before,在匹配元素之前增加</p>', 
                           '<p style="color:red">多參數(shù)</p>')
        //在匹配test1元素集合中的每個(gè)元素后面插入p元素
        $(".test2").after('<p style="color:blue">after,在匹配元素之后增加</p>',
                          '<p style="color:blue">多參數(shù)</p>')
</script>

看運(yùn)行結(jié)果：

image.png

通過(guò)上面的代碼和運(yùn)行結(jié)果就很容易理解什么是外部插入了饺藤。類(lèi)似的還有prepend()包斑、prependTo()、insertBefore()涕俗、insertAfter()方法罗丰。

4、empty()和remove()：
通過(guò)下面的代碼理解empty()用法：

<div class="hello">
  <p>百度</p>
</div>
//通過(guò)empty處理
$('.hello').empty()
//結(jié)果：<p>百度</p>被移除
<div class="hello"></div>

可以發(fā)現(xiàn)empty會(huì)清空選中的元素的內(nèi)部結(jié)構(gòu)再姑。
通過(guò)下面的代碼理解remove()用法：

<div class="hello">
  <p>百度</p>
</div>
//通過(guò)remove處理
$('.hello').remove()

結(jié)果是整個(gè)div都被移除了萌抵，且如果這個(gè)div綁定有事件，使用remove方法會(huì)自動(dòng)銷(xiāo)毀這個(gè)事件。remove還可以根據(jù)條件移除绍填，如下：

div class="test2">
   <p>p元素3</p>
   <p>p元素4</p>
</div>
//找到所有p元素中霎桅，包含了3的元素
$("p").remove(":contains('3')")

這樣就只會(huì)移除“p元素3”，“p元素4”不會(huì)被移除沐兰。detach()也是移除元素哆档，但是這個(gè)刪除只是頁(yè)面中不可見(jiàn)，這個(gè)節(jié)點(diǎn)還是保存在內(nèi)存中住闯。

5瓜浸、克隆節(jié)點(diǎn)clone()：
克隆可以理解為復(fù)制，用法如下：

//clone處理一
$("div").clone()   //只克隆了div結(jié)構(gòu)比原，事件丟失
//clone處理二
$("div").clone(true) //div結(jié)構(gòu)插佛、div綁定的事件與數(shù)據(jù)都克隆

6、替換節(jié)點(diǎn)之replaceWith()和replaceAll():
這兩個(gè)方法作用類(lèi)似量窘，主要是語(yǔ)法不一樣雇寇。看下面的例子：

<div>
    <p>第一段</p>
    <p>第二段</p>
    <p>第三段</p>
</div>
<script>
    //replaceWith操作：
    $("p:eq(1)").replaceWith('<a style="color:red">替換第二段的內(nèi)容</a>')
    //replaceAll操作：
    $('<a style="color:red">替換第二段的內(nèi)容</a>').replaceAll('p:eq(1)')
</script>

結(jié)果就是“第二段”被替換成了“替換第二段的內(nèi)容”蚌铜，并且文字為紅色锨侯。

7、wrap()冬殃、unwrap()囚痴、wrapAll()和wrapInner()方法：
如果要將元素用其他元素包裹起來(lái)，也就是給它增加一個(gè)父元素审葬，針對(duì)這樣的處理深滚，JQuery提供了一個(gè)wrap方法』辆酰看案例：

<p>哈哈</p>
<script>
  // 給p增加一個(gè)div
  $('p').wrap('<div></div>')
  //或者這樣寫(xiě)
  $('p').wrap(function() {
    return '<div></div>';   //與第一種類(lèi)似痴荐，只是寫(xiě)法不一樣
  })
</script>

結(jié)果就是給p增加了一個(gè)div包裹，如下：

<div>
    <p>哈哈</p>
</div>

unwrap()方法就是刪除一個(gè)元素的父元素官册，作用與wrap()剛好相反生兆。wrap()方法只能包裹一個(gè)元素，比如說(shuō)如果有多個(gè)p元素攀隔，需要用div來(lái)包裹皂贩，那么就得用wrapAll()方法±バ冢看下面代碼：

<p>哈哈</p>
<p>嘻嘻</p>
<script>
  //給所有p元素增加一個(gè)div包裹
  //方式一
  $('p').wrapAll('<div></div>')
  //方式二
  $('p').wrapAll(function() {
    return '<div><div/>'; 
  })
</script>

不過(guò)這兩種方式處理的結(jié)果有差別明刷，結(jié)果如下：

<!-- 方式一處理結(jié)果-->
<div>
    <p>哈哈</p>
    <p>嘻嘻</p>
</div>
<!-- 方式二處理結(jié)果-->
<div>
    <p>哈哈</p>
</div>
<div>
    <p>嘻嘻</p>
</div>

wrapInner()方法的作用說(shuō)起來(lái)就感覺(jué)很繞，直接看代碼感受一下：

<div>哈哈</div>
<div>嘻嘻</div>
<script>
  //給所有元素增加一個(gè)p包裹
  //方式一：
  $('div').wrapInner('<p></p>')
  //方式二：
  $('div').wrapInner(function() {
     return '<p></p>'; 
  })
</script>

兩種方法處理結(jié)果相同满粗，結(jié)果就是：

<div>
    <p>哈哈</p>
</div>
<div>
    <p>嘻嘻</p>
</div>

五辈末、jQuery的遍歷：

jQuery的遍歷有很多種方式，下面來(lái)看一下都如何使用。
1挤聘、children()和find()方法：
快速查找合集里面的第一級(jí)子元素轰枝，此時(shí)可以用children()方法。比如：

<div class="div">
    <ul class="son">
        <li class="grandson">1</li>
    </ul>
</div>
<script>
  //找到所有class=div的元素
  //找到其對(duì)應(yīng)的子元素ul组去，然后篩選出最后一個(gè)鞍陨，給邊寬加上顏色
  $('.div').children(':last').css('border', '3px solid blue')
</script>

注意， $('.div').children()只能找到ul从隆，因?yàn)閐iv與ul是父子關(guān)系诚撵，li與div是祖輩關(guān)系，因此無(wú)法找到键闺。如果想連li也找到寿烟，那就得用find()方法:

$("div").find("li")

2、parent()和parents()方法：
parent方法辛燥，和children方法相反筛武，就是查找上一級(jí)元素，這里就不再舉例說(shuō)明挎塌。parents方法和parent方法的不同之處在于parent只查找父級(jí)一級(jí)的元素徘六，而parents則會(huì)一直往上查找。

3榴都、closest()方法：
以選定的元素為中心硕噩，往內(nèi)查找可以通過(guò)find、children方法缭贡。如果往上查找，也就是查找當(dāng)前元素的父輩祖輩元素辉懒，jQuery提供了closest()方法阳惹，這個(gè)方法類(lèi)似parents但是又有一些細(xì)微的區(qū)別，屬于使用頻率很高的方法眶俩。區(qū)別有以下3點(diǎn)：

• 起始位置不同：.closest開(kāi)始于當(dāng)前元素 .parents開(kāi)始于父元素
• 遍歷的目標(biāo)不同：.closest要找到指定的目標(biāo)莹汤，.parents遍歷到文檔根元素，closest向上查找颠印，直到找到一個(gè)匹配的就停止查找纲岭，parents一直查找到根元素，并將匹配的元素加入集合
• 結(jié)果不同：.closest返回的是包含零個(gè)或一個(gè)元素的jquery對(duì)象线罕，parents返回的是包含零個(gè)或一個(gè)或多個(gè)元素的jquery對(duì)象

4止潮、next()、prev()和siblings()方法：
用于快速查找指定元素集合中每一個(gè)元素緊鄰的后面同輩元素的元素集合钞楼。

 <div class="div">
    <ul class="level-1">
         <li class="item-1">哈哈</li>
         <li class="item-2">嘿嘿</li>
         <li class="item-3">嘻嘻</li>
    </ul>
</div>
<div class="div">
    <ul class="level-1">
         <li class="item-1">哈哈</li>
         <li class="item-2">嘿嘿</li>
         <li class="item-3">嘻嘻</li>
    </ul>
</div>
<script>
   $('.item-1').next().css('border', '1px solid red');
</script>

運(yùn)行js后喇闸，那么這兩個(gè)class="item-2"的元素就會(huì)被選中，然后這兩個(gè)“嘿嘿”都會(huì)添上紅色邊框。prev方法和next()相反燃乍，next是找下一個(gè)唆樊，prev是找前一個(gè)。$('.item-1').next()是item-2刻蟹，$('.item-2').prev()就是item-1逗旁。siblings方法就不管前后，反正就是找同輩的元素舆瘪，$('.item-2').siblings()就是item-2的同輩元素片效，那么item-1和item-3都會(huì)被選到。

5介陶、add()方法：

<ul>
    <li>list item 1</li>
    <li>list item 3</li>
</ul>
<p>新的p元素</p>
<script>
    $('li').add('p');
</script>

p元素和ul元素本來(lái)是同一級(jí)別的堤舒，如果$('li').add('p')運(yùn)行后，那么就會(huì)把p與li歸結(jié)到一組哺呜。這就是add的作用舌缤。還有一種方式，就是動(dòng)態(tài)創(chuàng)建P標(biāo)簽加入到合集某残，然后插入到指定的位置国撵，但是這樣就改變?cè)氐谋旧淼呐帕辛耍Z(yǔ)法如下：

 $('li').add('<p>新的p元素</p>').appendTo(目標(biāo)位置)

6玻墅、each()方法：
each是一個(gè)for循環(huán)的包裝迭代器介牙，each通過(guò)回調(diào)的方式處理，并且會(huì)有2個(gè)固定的實(shí)參澳厢，索引與元素each回調(diào)方法中的this指向當(dāng)前迭代的dom元素环础。看案例：

<ul>
    <li>哈哈</li>
    <li>嘻嘻</li>
</ul>
<script>
   $("li").each(function(index, element) {
        //index 索引 0,1
        //element是對(duì)應(yīng)的li節(jié)點(diǎn) li,li
        //this 指向的是li
        $(this).css('color','red');
   })
</script>

這樣就會(huì)把“哈哈”和“嘻嘻”的顏色設(shè)置為紅色剩拢。

總結(jié)：

以上便是《jQuery入門(mén)》的全部?jī)?nèi)容线得，包含了jQuery選擇器、屬性與樣式和對(duì)DOM的操作等相關(guān)內(nèi)容徐伐。接下來(lái)在《jQuery進(jìn)階》中講學(xué)習(xí)jQuery事件和Ajax贯钩，敬請(qǐng)關(guān)注！