摘要：前面也花了不少時(shí)間，專門介紹了基礎(chǔ)這一塊，從最基礎(chǔ)的講起，再到以及特效。對(duì)象，文檔對(duì)象模型，每一份都可以表示成一棵樹。注意選擇器返回的是對(duì)象。名稱用法描述相當(dāng)于，子類選擇器相當(dāng)于后代選擇器查找兄弟節(jié)點(diǎn)，不包括自己本身。

Sorry：由于春節(jié)前工作的調(diào)動(dòng)，加上這段時(shí)間公司任務(wù)比較多一直加班，所以文章停更了很久，期間也有不少朋友私信、評(píng)論我，希望我寫的快一點(diǎn)，在這里跟大家道個(gè)歉，后面更新速度可能會(huì)放緩，但是不會(huì)影響文章的質(zhì)量，謝謝大家的支持。

前面也花了不少時(shí)間，專門介紹了js基礎(chǔ)這一塊，從最基礎(chǔ)的js講起，再到DOM、BOM以及特效。雖然花費(fèi)了不少時(shí)間，不過在寫這些文章的時(shí)候，自己也收獲了很多東西。所以我還是會(huì)一如既往的寫下去。希望收藏文章的小伙伴們，不僅僅只是收藏，更重要的是多閱讀、多理解。

jQuery是一個(gè)javascript庫，jQuery憑借著簡潔的語法和跨平臺(tái)的兼容性，極大的簡化了js操作DOM、處理事件、執(zhí)行動(dòng)畫等操作。jQuery強(qiáng)調(diào)的理念是："write less, do more"(寫的少，做的多)。

jQuery就是一個(gè)js庫，使用jQuery的話，會(huì)比使用JavaScript更簡單。官網(wǎng)地址
js庫：把一些常用到的方法寫到一個(gè)多帶帶的js文件，使用的時(shí)候直接去引用這js文件就可以了。(animate.js、common.js)。

我們知道了，jQuery其實(shí)就是一個(gè)js文件，里面封裝了一大堆的方法方便我們的開發(fā)，因此我們學(xué)習(xí)jQuery，其實(shí)就是學(xué)習(xí)jQuery這個(gè)js文件中封裝的一大堆方法。

官網(wǎng)下載地址：點(diǎn)擊下載。jQuery的版本有很多，分為：1.x、2.x、3.x。

版本分類：

1.x和2.x版本jquery都不再更新版本了，現(xiàn)在只更新3.x版本。

壓縮版與未壓縮版：

jQuery不需要安裝，直接在頁面中引用即可。

使用jQuery的三個(gè)步驟：

引入jQuery文件

入口函數(shù)

功能實(shí)現(xiàn)

關(guān)于jQuery的入口函數(shù)：

第一種寫法：

$(document).ready(function(){
    // 執(zhí)行代碼
});

第二種寫法：

$(function(){
    // 執(zhí)行代碼
});

首先我們得明確一點(diǎn)，在 jQuery 庫中， ‘$’ 就是 jQuery 的一個(gè)簡寫形式。

jQuery入口函數(shù)與js入口函數(shù)對(duì)比：

示例代碼： [ 01-初識(shí)jQuery.html ]

$(document).ready(function() {
    alert("123");
});

// 簡寫入口函數(shù)
$(function() {
    alert("呵呵");
});

第一次學(xué)習(xí)jQuery，經(jīng)常分辨不清哪些是jQuery對(duì)象，哪些是DOM對(duì)象，通過本節(jié)我們來了解一下它們之間的關(guān)系。

1、DOM對(duì)象

DOM(Document Object Model，文檔對(duì)象模型)，每一份DOM都可以表示成一棵樹。

var domObj = document.getElementById("id");    // 獲得DOM對(duì)象
var objHTML = domObj.innerHTML;                // 使用Javascript中的屬性-innerHTML

在 js 中，通過 getElementByTagName 或者 getElementById 來獲取元素節(jié)點(diǎn)。像這樣得到的 DOM 元素就是 DOM 對(duì)象。而且 DOM 對(duì)象可以使用 js 中的方法，如： innerHTML。

2、jQuery對(duì)象

jQuery對(duì)象，是通過jQuery包裝DOM對(duì)象后產(chǎn)生的對(duì)象，jQuery對(duì)象是jQuery獨(dú)有的，它可以使用jQuery里面的方法。

例如：

// 獲取id為test的元素內(nèi)的html代碼
$("#test").html();  // .html()是jQ里面的方法

上面的代碼等同于：

document.getElementById("test").innerHTML;

在jQ中，無法使用任何DOM對(duì)象的方法，例如：$("id").innerHTML，這是錯(cuò)誤的寫法。同樣，在js中也無法使用jQ對(duì)象里面的方法，例如：document.getElementById("id").html()，這樣也是錯(cuò)誤的。

為了大家在兩者對(duì)象轉(zhuǎn)換的時(shí)候不混淆，在定義jQ對(duì)象的時(shí)候，前面加上‘$’符。

var $variable; // jQuery 對(duì)象

var variable;  // DOM 對(duì)象

1、jQ對(duì)象轉(zhuǎn)成DOM對(duì)象：

jQ對(duì)象中是不能使用DOM對(duì)象里的方法的，但是如果jQ里的一些方法忘記的時(shí)候，只記得DOM中的方法的時(shí)候，怎么辦呢？這時(shí)候就可以將jQ對(duì)象轉(zhuǎn)換成DOM對(duì)象。

方法一(常用)：[index]

var $box = $("#box");       // jQ獲取到的對(duì)象
var box = $box[0];          // 轉(zhuǎn)成DOM對(duì)象
box.innerHTML = "哈哈哈";   // 使用DOM對(duì)象的方法

方法二：get(index)

var $box = $("#box");       // jQ獲取到的對(duì)象
var box = $box.get(0);      // 轉(zhuǎn)成DOM對(duì)象
box.innerHTML = "哈哈哈";   // 使用DOM對(duì)象的方法

2、DOM對(duì)象轉(zhuǎn)成jQ對(duì)象：

DOM對(duì)象轉(zhuǎn)成jQ對(duì)象的十分簡單，只需要用$()把DOM對(duì)象包裹起來就是一個(gè)jQ對(duì)象了。轉(zhuǎn)換之后就可以任意使用jQ的方法了。

var box = document.getElementById("#box");  // 獲取的DOM對(duì)象
var $box = $(box);      // 轉(zhuǎn)成jQ對(duì)象

示例代碼：隔行變色 [ 02-jq對(duì)象與DOM對(duì)象轉(zhuǎn)換-隔行變色.html ]

    
1
    
2
    
3
    
4
    
5
    
6

效果圖：

jQuery選擇器是jQuery為我們提供的一組方法，讓我們更加方便的獲取到頁面中的元素。

注意： jQuery選擇器返回的是jQuery對(duì)象。

我們都知道css選擇器，這里的基本選擇器跟css的是一模一樣的。

.css("name","value")是jQ的一個(gè)方法，可以為jQ對(duì)象設(shè)置樣式。name是樣式的名字，value是樣式的值

例如設(shè)置一個(gè)背景色：

$(function(){
    $("#box").css("backgroundColor","cyan");
})

示例代碼：基本選擇器的應(yīng)用 [ 03-jq選擇器-基本選擇器.html ]

    

        我是第ID為one的盒子
    
    

        我是Class為two的盒子
    
    
我是Class為Three的盒子
    
我是標(biāo)簽p
    我是標(biāo)簽span
    我是標(biāo)簽i

效果圖：

涉及到的方法：

示例代碼：

    
我是box1的子代
    
我是box1的子代
    

        
我是box1的后代
        
我是box1的后代
    


    
我是box2的子代
    
我是box2的子代
    

        
我是box2的后代
        
我是box2的后代
    

效果圖：

過濾選擇器主要是通過特定的過濾規(guī)則來篩選出所需的DOM元素，過濾規(guī)則與css中的偽類選擇器語法相同。即選擇器都以一個(gè)冒號(hào)‘:’開頭。按照不同的過濾規(guī)則，過濾選擇器可以分為：基本過濾、內(nèi)容過濾、可見性過濾、屬性過濾、子元素過濾和表單對(duì)象屬性過濾選擇器。

1、基本過濾選擇器：

示例代碼：隔行變色 [ 05-jq選擇器-過濾選擇器.html ]

    
這是第1個(gè)li
    
這是第2個(gè)li
    
這是第3個(gè)li
    
這是第4個(gè)li
    
這是第5個(gè)li
    
這是第6個(gè)li
    
這是第7個(gè)li
    
這是第8個(gè)li
    
這是第9個(gè)li
    
這是第10個(gè)li

效果圖：

2、內(nèi)容過濾選擇器：

3、可見性過濾選擇器：

4、屬性過濾選擇器：

屬性過濾選擇器是通過元素的屬性來獲取相應(yīng)的元素。

5、子元素過濾選擇器：

nth-child()選擇器是很常用的子元素過濾選擇器：

:nth-child(even)能選取每個(gè)父元素下的索引值是偶數(shù)的元素；

:nth-child(odd)能選取每個(gè)父元素下的索引值是奇數(shù)的元素；

:nth-child(2)能選取每個(gè)父元素下的索引值是2的元素；

:nth-child(3n)能選取每個(gè)父元素下的索引值是3的倍數(shù)的元素；(n從1開始)

:nth-child(3n+1)能選取每個(gè)父元素下的索引值是3n+1的倍數(shù)的元素；(n從1開始)

5、表單對(duì)象屬性過濾選擇器

為了能夠更加方便的操作表單，jQuery還為我們添加了表單選擇器。

想要得到獲取的個(gè)數(shù)直接使用：.length方法：

$("#form :input").length;  // 獲得頁面中表單元素的個(gè)數(shù)

篩選選擇器的功能與過濾選擇器有點(diǎn)類似，但是用法不一樣，篩選選擇器主要是方法。

1、簡單版手風(fēng)琴 [ 06-jq選擇器案例-簡單版手風(fēng)琴.html ]

    

        標(biāo)題1
        
我是彈出來的div1
    
    

        標(biāo)題2
        
我是彈出來的div2
    
    

        標(biāo)題3
        
我是彈出來的div3
    
    

        標(biāo)題4
        
我是彈出來的div4
    

涉及到的方法：

注意： this指的是當(dāng)前的DOM對(duì)象，$(this)，將this轉(zhuǎn)化為jQ對(duì)象

效果圖：

2、下拉菜單欄案例 [ 07-jq選擇器案例-下拉菜單欄.html ]

    

        

            一級(jí)菜單1
            

                
二級(jí)菜單11
                
二級(jí)菜單12
                
二級(jí)菜單13
            
        
        

            一級(jí)菜單2
            

                
二級(jí)菜單21
                
二級(jí)菜單22
                
二級(jí)菜單23
            
        
        

            一級(jí)菜單3
            

                
二級(jí)菜單31
                
二級(jí)菜單32
                
二級(jí)菜單33
            
        
    

涉及到的方法：

效果圖：

3、高亮顯示圖片 [ 08-jq選擇器案例-高亮顯示.html ]

在案例之前，跟大家說一個(gè)東西，在jQ中，不需要for循環(huán)遍歷，因?yàn)?b>jQ自己會(huì)進(jìn)行遍歷，這在jQ里面就叫隱式迭代。

涉及到的方法：

效果圖：

4、淘寶廣告案例 [ 09-jq選擇器案例-淘寶廣告案例.html ]

    

        
女靴
        
雪地靴
        
冬裙
        
呢大衣
        
毛衣
        
棉服
        
女褲
        
羽絨服
        
牛仔褲
    

    

        

        

        

        

        

        

        

        

        

        

        

        

        

        

        

        

        

        

    


    

        
女包
        
男靴
        
登山鞋
        
皮帶
        
圍巾
        
皮衣
        
男毛衣
        
男棉服
        
男包
    

涉及到的方法：

效果圖：

5、index()方法詳解： [ 10-jq選擇器案例-index方法解讀.html ]

獲取的是當(dāng)前元素在他兄弟元素里面的下標(biāo)。

我是wrap1

    
這是內(nèi)容
    
這是內(nèi)容
    
這是內(nèi)容
    
這是內(nèi)容
    
這是內(nèi)容

我是wrap2

    
這是內(nèi)容
    
這是內(nèi)容
    
這是內(nèi)容
    
這是內(nèi)容
    
這是內(nèi)容

我們可以看到，在wrap1里面的時(shí)候，li點(diǎn)擊的時(shí)候，獲取的是它在兄弟元素里面的下標(biāo)。在wrap2里面的時(shí)候，我們點(diǎn)擊的是a標(biāo)簽，此時(shí)a標(biāo)簽是沒有兄弟元素的，所以，不管點(diǎn)擊哪一個(gè)都是返回‘0’。

效果圖：

查找節(jié)點(diǎn)非常容易，只要結(jié)合前面選擇器來完成。

1、查找元素節(jié)點(diǎn) [ 11-jqDOM操作-查找元素節(jié)點(diǎn).html ]

    
北京
    
上海
    
廣州
    
天津
    
重慶

2、查找屬性節(jié)點(diǎn) [ 12-jqDOM操作-查找屬性節(jié)點(diǎn).html ]

使用jQ選擇器，查找到需要的元素后，可以使用attr()方法來獲取它的各種屬性的值。attr()的參數(shù)可以是一個(gè)，也可以是兩個(gè)，參數(shù)是一個(gè)的時(shí)候，則是要查詢的屬性的名字。

這是一句意味深長的話

我們可以輕松的找到文檔中某個(gè)特定的元素節(jié)點(diǎn)，并且可以通過attr()方法來獲取元素各種各樣的屬性的值。但是真正的DOM操作并非這么簡單。在DOM操作中，常常需要?jiǎng)討B(tài)創(chuàng)建HTML內(nèi)容，使文檔在瀏覽器里的呈現(xiàn)效果發(fā)生變化，并且達(dá)到人機(jī)交互的目的。 [ 13-jqDOM操作-創(chuàng)建節(jié)點(diǎn).html ]

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

創(chuàng)建元素節(jié)點(diǎn)很簡單，直接使用  $(html)，html就是需要添加的元素。$(html)方法會(huì)根據(jù)傳入的HTML標(biāo)記字符串，創(chuàng)建一個(gè)DOM對(duì)象，并將這個(gè)DOM對(duì)象包裝成一個(gè)jQuery對(duì)象后返回。

$(function() {
    // 創(chuàng)建一個(gè)li元素
    var $li = $("
");
    // 將創(chuàng)建的li添加到ul中
    $("ul").append($li);    // append 添加節(jié)點(diǎn) 下一節(jié)講
});

因?yàn)閯?chuàng)建的只是一個(gè)元素節(jié)點(diǎn)，所以里面沒有內(nèi)容只會(huì)看到li的一個(gè)標(biāo)題點(diǎn)：

2、創(chuàng)建文本節(jié)點(diǎn)

var $li_1 = $("
北京
");  // 創(chuàng)建一個(gè)li元素，包括元素節(jié)點(diǎn) 文本節(jié)點(diǎn)
                                // "北京"就是文本節(jié)點(diǎn)
var $li_2 = $("
上海
");
$("ul").append($li_1);
$("ul").append($li_2); 

創(chuàng)建文本節(jié)點(diǎn)就是在創(chuàng)建元素節(jié)點(diǎn)時(shí)，直接把文本內(nèi)容寫出來：

3、創(chuàng)建屬性節(jié)點(diǎn)

var $li_3 = $("
深圳
");  // 創(chuàng)建一個(gè)li元素，包括元素、文本、屬性節(jié)點(diǎn)
                                             // title="城市" 就是屬性節(jié)點(diǎn)
$("ul").append($li_3);

創(chuàng)建屬性節(jié)點(diǎn)的時(shí)候，與創(chuàng)建文本節(jié)點(diǎn)類似，直接將屬性寫在標(biāo)簽里：

上面我們知道了如何動(dòng)態(tài)創(chuàng)建一個(gè)元素，但是沒有實(shí)際用處，所以還需要將新創(chuàng)建的元素添加到文檔中。

添加節(jié)點(diǎn)的方法：

示例代碼： [ 14-jqDOM操作-添加節(jié)點(diǎn).html ]

    
我是本來就有的

這是ul外面的p標(biāo)簽


   

效果圖：

如果文檔中某一個(gè)元素多余的時(shí)候，那么就應(yīng)該將其刪除。jQuery提供了三種刪除節(jié)點(diǎn)的方法：remove()，detach()，empty()。

1、remove()方法

從DOM中刪除所有匹配的元素，當(dāng)某個(gè)節(jié)點(diǎn)用remove()方法刪除之后，該節(jié)點(diǎn)包含的所有后代節(jié)點(diǎn)將同時(shí)被刪除，并且返回值就是該刪除的節(jié)點(diǎn)。

示例代碼： [ 15-jqDOM操作-remove刪除節(jié)點(diǎn).html ]

    
北京
    
上海
        

            
閔行區(qū)
            
浦東區(qū)
            
徐匯區(qū)
            
虹口區(qū)
        
    
    
深圳
    
天津
    
重慶

點(diǎn)擊remove上海
點(diǎn)擊添加上海

效果圖：

另外remove()方法也可以通過傳遞參數(shù)來選擇性的刪除元素：

$("ul li").remove("li[title != 上海]"); // 將li中屬性title不等于‘上?！膌i移除掉

2、detach()方法

detach()方法和remove()一樣，也是從DOM中，去掉所有匹配的元素。但是這個(gè)方法不會(huì)把匹配的元素從jQuery對(duì)象中刪除，就是說所有綁定的事件、附加的數(shù)據(jù)都會(huì)保留下來。

示例代碼： [ 16-jqDOM操作-detach刪除節(jié)點(diǎn).html ]

    

        
北京
        
上海
        
深圳
        
天津
        
重慶
    
    點(diǎn)擊detach上海
    點(diǎn)擊appendTo上海

效果圖：

我們可以看到，“上?！币婚_始是可以被點(diǎn)擊的，detach刪除以后，再添加到ul中的時(shí)候，它的點(diǎn)擊事件還在，還可以點(diǎn)擊。但是如果使用的是remove刪除的話，點(diǎn)擊事件就會(huì)被移除。

3、empty()方法

empty方法不是刪除節(jié)點(diǎn)，準(zhǔn)確的說，它是清空節(jié)點(diǎn)，它能清除匹配元素中的所有后代節(jié)點(diǎn)和內(nèi)容。

示例代碼： [ 17-jqDOM操作-empty清空節(jié)點(diǎn).html ]

    
北京
    
上海
        

            
閔行區(qū)
            
浦東區(qū)
            
徐匯區(qū)
            
虹口區(qū)
        
    
    
深圳
    
天津
    
重慶

點(diǎn)擊empty上海

效果圖：

empty是清空匹配項(xiàng)的內(nèi)容，不管里面是文本還是有其它標(biāo)簽，都會(huì)被清空，但是匹配項(xiàng)的標(biāo)簽還會(huì)保留，不會(huì)被清空

克隆節(jié)點(diǎn)也是常用的DOM操作之一，它是通過clone()方法實(shí)現(xiàn)的，同樣的，它也有深拷貝和淺拷貝。深拷貝和淺拷貝的區(qū)別就是，深拷貝會(huì)復(fù)制綁定的事件，而淺拷貝不會(huì)。實(shí)現(xiàn)原理很簡單，只要clone(true)，加上true，就是深拷貝，默認(rèn)不傳或者傳false就是淺拷貝。

示例代碼： [ 18-jqDOM操作-克隆節(jié)點(diǎn).html ]

淺拷貝

    
北京
    
上海
    
深圳
    
天津
    
重慶

深拷貝

    
北京
    
上海
    
深圳
    
天津
    
重慶

效果圖：

我們可以看出，淺拷貝的時(shí)候，點(diǎn)擊“北京”克隆了一個(gè)“北京”的標(biāo)簽，并且添加到了ul中，但是新創(chuàng)建出來的沒有點(diǎn)擊事件。深拷貝的時(shí)候，新創(chuàng)建出來的還可以再次被點(diǎn)擊，說明綁定事件，也拷貝了。

如果要替換某個(gè)節(jié)點(diǎn)，jQuery提供了兩個(gè)方法，即replaceWith()和replaceAll()。
replaceWith()方法是將所有匹配的元素替換成指定的HTML或DOM，replaceAll()方法的作用與replaceWith()方法的作用一模一樣，只是顛倒了參數(shù)。

示例代碼： [ 19-jqDOM操作-替換節(jié)點(diǎn).html ]

    
北京
    
北京
    
上海
    
上海


點(diǎn)擊替換北京
點(diǎn)擊替換上海

效果圖：

替換前如果已經(jīng)為元素綁定事件，替換后原先綁定的事件將會(huì)與被替換的元素一起消失。

如果想要將某個(gè)節(jié)點(diǎn)，用其他標(biāo)記包裹起來，jQuery提供了相應(yīng)的方法，即wrap()。它還有兩個(gè)其他的方法：wrapAll()、wrapInner()。

示例代碼： [ 20-jqDOM操作-包裹節(jié)點(diǎn).html ]

這里是上海
這里是上海
這里是上海
這里是上海
這里是上海
這里是上海

效果圖：

本章第一節(jié)的時(shí)候，我們知道了如何查找節(jié)點(diǎn)，在jQuery中，還提供了一些查找節(jié)點(diǎn)的方法，我們通過這一小節(jié)的學(xué)習(xí)，來認(rèn)識(shí)它們。

1、children()方法：

該方法用于獲得匹配元素的子元素的集合。

    
ul里面的子元素li里面的子元素
    
ul里面的子元素li里面的子元素
    
ul里面的子元素li里面的子元素
    
ul里面的子元素li里面的子元素

注意： children()方法只能考慮子元素，后代元素不考慮。

2、next()方法 和 nextAll()方法：

next()方法用于獲得匹配元素后面緊鄰的同級(jí)元素。nextAll()方法用于獲得匹配元素后面所有的同級(jí)元素。

這是一段意味深長的話

    
ul里面的子元素
    
ul里面的子元素
    
ul里面的子元素
    
ul里面的子元素

哈哈哈

3、prev()方法 和 prevAll()方法：

prev()方法用于獲得匹配元素前面緊鄰的同級(jí)元素。prevAll()方法用于獲得匹配元素前面所有的同級(jí)元素。

這是一段意味深長的話

    
ul的子元素
    
ul的子元素
    
ul的子元素

哈哈哈

    

4、siblings()方法：

該方法用于匹配元素前后所有的兄弟元素。

這是一段意味深長的話

    
ul的子元素
    
ul的子元素
    
ul的子元素

呵呵呵
我會(huì)讓你見識(shí)一下什么叫殘忍

5、closest()方法：

該方法用于獲取最近的匹配元素。首先檢查當(dāng)前元素是否匹配，匹配的話直接返回，如果不匹配則向上查找父元素，逐級(jí)向上，直到找到匹配的元素，如果什么也沒找到，返回一個(gè)空的jQ對(duì)象。

6、parent() 和 parents()方法：

parent()方法是獲得匹配元素的父級(jí)元素。parents()方法獲取的是匹配元素的祖先元素。

我們可以對(duì)比下closest()方法和parent()、parents()方法的區(qū)別，根據(jù)實(shí)際需求靈活使用。

1、選好友案例：

    大喬0
    小喬1
    甄姬2
    虞姬3
    妲己4
    女媧5
    羋月6
    露娜7


>>
<<
>
<

效果圖：

2、微博發(fā)布案例

    微博發(fā)布
    
    發(fā)布
    

效果圖：

在jQuery中，用attr()方法來獲取和設(shè)置元素屬性，removeAttr()方法來刪除元素屬性。

1、獲取屬性和設(shè)置屬性

attr()，可