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

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

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

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

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

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

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

版本分類：

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

壓縮版與未壓縮版：

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

使用jQuery的三個步驟：

引入jQuery文件

入口函數(shù)

功能實現(xiàn)

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

第一種寫法：

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

第二種寫法：

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

首先我們得明確一點，在 jQuery 庫中， ‘$’ 就是 jQuery 的一個簡寫形式。

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

示例代碼： [ 01-初識jQuery.html ]

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

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

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

1、DOM對象

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

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

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

2、jQuery對象

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

例如：

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

上面的代碼等同于：

document.getElementById("test").innerHTML;

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

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

var $variable; // jQuery 對象

var variable;  // DOM 對象

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

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

方法一(常用)：[index]

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

方法二：get(index)

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

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

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

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

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

    
1
    
2
    
3
    
4
    
5
    
6

效果圖：

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

注意： jQuery選擇器返回的是jQuery對象。

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

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

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

$(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中的偽類選擇器語法相同。即選擇器都以一個冒號‘:’開頭。按照不同的過濾規(guī)則，過濾選擇器可以分為：基本過濾、內(nèi)容過濾、可見性過濾、屬性過濾、子元素過濾和表單對象屬性過濾選擇器。

1、基本過濾選擇器：

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

    
這是第1個li
    
這是第2個li
    
這是第3個li
    
這是第4個li
    
這是第5個li
    
這是第6個li
    
這是第7個li
    
這是第8個li
    
這是第9個li
    
這是第10個li

效果圖：

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

3、可見性過濾選擇器：

4、屬性過濾選擇器：

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

5、子元素過濾選擇器：

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

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

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

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

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

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

5、表單對象屬性過濾選擇器

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

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

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

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

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對象，$(this)，將this轉(zhuǎn)化為jQ對象

效果圖：

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

    

        

            一級菜單1
            

                
二級菜單11
                
二級菜單12
                
二級菜單13
            
        
        

            一級菜單2
            

                
二級菜單21
                
二級菜單22
                
二級菜單23
            
        
        

            一級菜單3
            

                
二級菜單31
                
二級菜單32
                
二級菜單33
            
        
    

涉及到的方法：

效果圖：

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

在案例之前，跟大家說一個東西，在jQ中，不需要for循環(huán)遍歷，因為jQ自己會進(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里面的時候，li點擊的時候，獲取的是它在兄弟元素里面的下標(biāo)。在wrap2里面的時候，我們點擊的是a標(biāo)簽，此時a標(biāo)簽是沒有兄弟元素的，所以，不管點擊哪一個都是返回‘0’。

效果圖：

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

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

    
北京
    
上海
    
廣州
    
天津
    
重慶

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

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

這是一句意味深長的話

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    
我是本來就有的

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


   

效果圖：

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

1、remove()方法

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

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

    
北京
    
上海
        

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

點擊remove上海
點擊添加上海

效果圖：

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

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

2、detach()方法

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

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

    

        
北京
        
上海
        
深圳
        
天津
        
重慶
    
    點擊detach上海
    點擊appendTo上海

效果圖：

我們可以看到，“上海”一開始是可以被點擊的，detach刪除以后，再添加到ul中的時候，它的點擊事件還在，還可以點擊。但是如果使用的是remove刪除的話，點擊事件就會被移除。

3、empty()方法

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

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

    
北京
    
上海
        

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

點擊empty上海

效果圖：

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

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

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

淺拷貝

    
北京
    
上海
    
深圳
    
天津
    
重慶

深拷貝

    
北京
    
上海
    
深圳
    
天津
    
重慶

效果圖：

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

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

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

    
北京
    
北京
    
上海
    
上海


點擊替換北京
點擊替換上海

效果圖：

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

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

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

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

效果圖：

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

1、children()方法：

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

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

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

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

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

這是一段意味深長的話

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

哈哈哈

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

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

這是一段意味深長的話

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

哈哈哈

    

4、siblings()方法：

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

這是一段意味深長的話

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

呵呵呵
我會讓你見識一下什么叫殘忍

5、closest()方法：

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

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

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

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

1、選好友案例：

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


>>
<<
>
<

效果圖：

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

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

效果圖：

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

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

attr()，可