jQuery

1. 介紹

jQuery是一個快速窗宇、簡潔的JavaScript框架，是繼Prototype之后又一個優(yōu)秀的JavaScript代碼庫（或JavaScript框架）砾莱。jQuery設(shè)計的宗旨是“write Less敌蜂，Do More”，即倡導(dǎo)寫更少的代碼油坝，做更多的事情焕窝。它封裝JavaScript常用的功能代碼蹬挺，提供一種簡便的JavaScript設(shè)計模式，優(yōu)化HTML文檔操作袜啃、事件處理汗侵、動畫設(shè)計和Ajax交互。

jQuery它是javascript的一個輕量級框架，對javascript進(jìn)行封裝晰韵，它提供了很多方便的選擇器发乔。供你快速定位到需要操作的元素上面去。還提供了很多便捷的方法

jQuery最大的特點(diǎn)是：瀏覽器兼容雪猪，鏈?zhǔn)骄幊汤干校[式迭代，豐富的選擇器操作只恨。

1.1 jQuery環(huán)境

Jquery它是一個JavaScript類庫译仗，要想使用它，必須先引入官觅；jQuery庫的類型分為兩種纵菌，分別是生產(chǎn)版（最小化和壓縮版）和開發(fā)版（未壓縮版），它們的區(qū)別如表1-1所示休涤。

? 表1-1　幾種jQuery庫類型對比

1.2 jQuery簡單案例

    <script src="script/jquery-1.12.2.js"></script>
    <script>
        $(document).ready(function(){
            alert('簡單案例測試');
        });
    </script>

1. 引入jQuery的js文件
2. 文件初始化代碼$(function () {});與原生的window.onload()代碼類似功氨，不過還是有區(qū)別的序苏，對它們進(jìn)行了簡單對比。

1.3 jQuery代碼風(fēng)格

雖然jQuery做到了行為和內(nèi)容的分離，但jQuery代碼本身也應(yīng)該擁有良好的層次結(jié)構(gòu)及規(guī)范牛曹，這樣才能進(jìn)一步改善代碼的可讀性和可維護(hù)性

（1）對于同一個對象不超過3個操作的，可以直接寫成一行

（2）對于同一個對象的較多操作醇滥，建議每行寫一個操作

（3）對于多個對象的少量操作黎比，可以每個對象寫一行，如果涉及子元素鸳玩，可以考慮適當(dāng)?shù)乜s進(jìn)

（4）為代碼添加注釋

1.4 jQuery對象和DOM對象

jQuery對象就是通過jQuery包裝DOM對象后產(chǎn)生的對象阅虫。jQuery對象是jQuery獨(dú)有的。如果一個對象是jQuery對象不跟，那么就可以使用jQuery里的方法颓帝。例如：

$('#foo').html()  //獲取id為foo的元素內(nèi)的html代碼。html()是jQuery的方法

這段代碼等同于：

document.getElementById('foo').innerHtml()

在jQuery對象中無法使用DOM對象的任何方法。例如$("#id").innerHTML和$("#id").checked之類的寫法都是錯誤的购城，可以用$("#id").html()和$("#id").attr("checked")之類的jQuery方法來代替吕座。同樣，DOM對象也不能使用jQuery里的方法瘪板。例如document.getElementById("id").html()也會報錯吴趴，只能用document.getElementById("id").innerHTML語句。

jQuery對象和DOM對象是可以相互轉(zhuǎn)化的

• jQuery對象轉(zhuǎn)化為DOM對象

var $cr = $('#cr');  
// 第一種方法
var cr  = $cr[0];
// 第二種方法
var cr  = $cr.get(0);

• DOM對象轉(zhuǎn)化為jQuery對象

var cr = document.getElementById('cr');
// 轉(zhuǎn)化為jQuery對象
var $cr = $(cr);

2. 選擇器

jQuery中的選擇器完全繼承了CSS的風(fēng)格侮攀。利用jQuery選擇器锣枝，可以非常便捷和快速地找出特定的DOM元素，然后為它們添加相應(yīng)的行為兰英，而無需擔(dān)心瀏覽器是否支持這一選擇器撇叁。學(xué)會使用選擇器是學(xué)習(xí)jQuery的基礎(chǔ)，jQuery的行為規(guī)則都必須在獲取到元素后才能生效畦贸。

需要注意的是陨闹，$('#tt')獲取的永遠(yuǎn)是對象，即使網(wǎng)頁上沒有此元素家制。因此當(dāng)要用jQuery檢查某個元素在網(wǎng)頁上是否存在時正林，不能使用以下代碼:

if($('tt')){
    //do something
}

應(yīng)該根據(jù)元素的長度判斷

if($('tt').length>0){
    //do something
}

2.1 基本選擇器

基本選擇器是jQuery中最常用的選擇器，也是最簡單的選擇器颤殴，它通過元素id觅廓、class和標(biāo)簽名等來查找DOM元素。在網(wǎng)頁中涵但，每個id名稱只能使用一次杈绸，class允許重復(fù)使用“粒基本選擇器的介紹說明如表2-1所示瞳脓。

? 2-1 基本選擇器

2.2 層次選擇器

如果想通過DOM元素之間的層次關(guān)系來獲取特定元素，例如后代元素澈侠、子元素劫侧、相鄰元素和同輩元素等那么層次選擇器是一個非常好的選擇。層次選擇器的介紹說明如表2-2所示

可以使用next()方法來替代pre+next

可以使用nextAll()方法來代替$('prev?siblings')選擇器

在此我將后面要講解的siblings()方法拿出來與$("#prev?div")選擇器只能選擇“prev”元素后面的同輩<div>元素烧栋。而siblings()方法與前后位置無關(guān)，只要是同輩節(jié)點(diǎn)就都能匹配拳球。

2.3 過濾選擇器

過濾選擇器主要是通過特定的過濾規(guī)則來篩選出所需的DOM元素审姓，過濾規(guī)則與CSS中的偽類選擇器語法相同，即選擇器都以一個冒號(:)開頭祝峻。按照不同的過濾規(guī)則魔吐，過濾選擇器可以分為基本過濾酬姆、內(nèi)容過濾轴踱、可見性過濾、屬性過濾诱篷、子元素過濾和表單對象屬性過濾選擇器棕所。這里只對最為常用的過濾器進(jìn)行介紹

2.3.1 基本過濾選擇器

2.3.2 內(nèi)容過濾器

2.3.3 可見性過濾選擇器

可見性過濾選擇器是根據(jù)元素的可見和不可見狀態(tài)來選擇相應(yīng)的元素

2.3.4 屬性過濾選擇器

2.3.5 子元素選擇器

子元素過濾選擇器的過濾規(guī)則相對于其它的選擇器稍微有些復(fù)雜，不過沒關(guān)系躲撰，只要將元素的父元素和子元素區(qū)分清楚针贬，那么使用起來也非常簡單。另外還要注意它與普通的過濾選擇器的區(qū)別拢蛋。

:nth-child()選擇器是很常用的子元素過濾選擇器蔫劣，詳細(xì)功能如下。

（1）:nth-child(even)能選取每個父元素下的索引值是偶數(shù)的元素脉幢。

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

（3）:nth-child(2)能選取每個父元素下的索引值等于2的元素珊蟀。

（4）:nth-child(3n)能選取每個父元素下的索引值是3的倍數(shù)的元素腻窒，（n從1開始）瓦哎。

（5）:nth-child(3n+1)能選取每個父元素下的索引值是（3n+1）的元素。（n從1開始）

2.3.6 表單對象屬性過濾選擇器

此選擇器主要是對所選擇的表單元素進(jìn)行過濾，例如選擇被選中的下拉框剂买，多選框等元素。表單對象屬性

2.4 表單選擇器

為了使用戶能夠更加靈活地操作表單讨越，jQuery中專門加入了表單選擇器。利用這個選擇器，能極其方便地獲取到表單的某個或某類型的元素耸别。

2.5 jQuery的遍歷方法

另外的常用的遍歷方法如下表所示：

3. 樣式操作

3.1獲取和設(shè)置樣式

HTML代碼如下：

<p class='myClass' title="選擇你喜歡的水果">你最喜歡的水果是?</p>

在上面的代碼中垂券，class也是<p>元素的屬性卒暂，因此獲取class和設(shè)置class都可以使用attr()方法來完成近速。

例如使用attr()方法來獲取<p>元素的class，jQuery代碼如下：

var p_class = $("p").attr("class");

也可以使用attr()方法來設(shè)置<p>元素的class析砸，jQuery代碼如下：

$("p").attr("class","high");

運(yùn)行代碼后，上面的HTML代碼將變?yōu)槿缦陆Y(jié)構(gòu)：

<p class='high' title="選擇你喜歡的水果">你最喜歡的水果是?</p>

上面的代碼是將原來的class（myClass）替換為新的class（high）。如果此處需要的是“追加”效果胁塞，class屬性變?yōu)椤癿yClass high”，即myClass和high兩種樣式的疊加扰才，那么我們可以使用==addClass()==方法。

3.2 追加樣式

jQuery提供了專門的addClass()方法來追加樣式。為了使例子更容易理解午绳，首先在<style>標(biāo)簽里添加另一組樣式：

<style>
    .high {
        font-weight:700;
        color:red
    }
    .another {
        font-style:italic;
        color:'blue'
    }
</style>

然后在網(wǎng)頁中添加一個“追加class類”的按鈕蜡坊，按鈕的事件代碼如下：

$("p").addClass("another");

（1）如果給一個元素添加了多個class值，那么就相當(dāng)于合并了它們的樣式。

（2）如果有不同的class設(shè)定了同一樣式屬性勇吊，則后者覆蓋前者。

3.3 移除樣式

在上面的例子中，為<p>元素追加了another樣式悟民。此時<p>元素的HTML代碼變?yōu)椋?/p>

<p class='high' title="選擇你喜歡的水果">你最喜歡的水果是?</p>

如果用戶單擊某個按鈕時，要刪除class的某個值智润，那么可以使用與addClass()方法相反的removeClass()方法

來完成，它的作用是從匹配的元素中刪除全部或者指定的class。

例如可以使用如下的jQuery代碼來刪除<p>元素中值為“high”的class:

$("p").removeClass("high");

jQuery提供了更簡單的方法为狸。可以以空格的方式刪除多個class名泰涂，jQuery代碼如下：

$("p").removeClass("high another");

另外，還可以利用removeClass()方法的一個特性來完成同樣的效果其做。當(dāng)它不帶參數(shù)時艘策，就會將class的值全部刪除，jQuery代碼如下：

$("p").removeClass();

3.4 切換樣式

jQuery還提供了一個toggleClass()方法控制樣式上的重復(fù)切換驯妄。如果類名存在則刪除它翩伪，如果類名不存在則添加它凛剥。例如對<p>元素進(jìn)行toggleClass()方法操作。jQuery代碼如下：

$("p").toggleClass('another');  //重復(fù)的切換樣式

3.5 判斷是否含有某個樣式

hasClass()可以用來判斷元素中是否含有某個class犁享，如果有，則返回true屏积，否則返回false卷要。

例如可以使用下面的代碼來判斷<p>元素中是否含有“another”的class：

$("p").hasClass("another");

注意：這個方法是為了增強(qiáng)代碼可讀性而產(chǎn)生的奕枝。在jQuery內(nèi)部實(shí)際上是調(diào)用了is()方法來完成這個功能的。該方法等價于如下代碼：$("p").is(".another");

4.鏈?zhǔn)骄幊?/h2>

4.1 鏈?zhǔn)骄幊桃c(diǎn)

鏈?zhǔn)骄幊叹褪牵憾嘈写a合并成一行代碼,前提要認(rèn)清此行代碼返回的是不是對象.是對象才能進(jìn)行鏈?zhǔn)骄幊?/p>

 .html(‘val’).text(‘val’).css()

鏈?zhǔn)骄幊蹋[式迭代激捏。

鏈?zhǔn)骄幊套⒁猓?/p>

$(‘div’).html().text()

這樣是不對的，因?yàn)楂@取值時返回的是獲取的字符串而不是對象本身所以不能鏈?zhǔn)骄幊獭?/p>

4.2 鏈?zhǔn)骄幊蘣nd()方法返回到上一級

通過end()方法取消當(dāng)前的jQuery對象，返回前面的jQuery對象爆办。

這樣當(dāng)匹配某個按鈕時，為其綁定事件處理函數(shù)，然后調(diào)用end()方法诸蚕，則又返回前面一個jQuery對象坏瘩，即按鈕集合。

鏈?zhǔn)酱a已經(jīng)成為jQuery 非常流行的一個特點(diǎn)，在使用鏈條方式編寫代碼時壤巷，可能會用到eq()、filter()的jQuery方法改變鏈?zhǔn)椒椒ǖ膶ο笕乘墙柚鷍Query的end() 方法又能夠恢復(fù)或最初的jQuery對象灵汪，從而可以實(shí)現(xiàn)繼續(xù)執(zhí)行鏈?zhǔn)讲僮鳌Ｗ⒁夂渭裕袔讉€jQuery的方法并不返回jQuery 對象，所以鏈?zhǔn)讲僮骶筒荒芾^續(xù)下去侠驯，如get() 就不能像eq() 那樣使用。

$(‘ul.first’).find(’.foo’).css(‘background-color’, ‘red’)
.end().find(’.bar’).css(‘background-color’, ‘green’);

5. 動畫

jQuery提供的一組網(wǎng)頁中常見的動畫效果骗污，這些動畫是標(biāo)準(zhǔn)的、有規(guī)律的效果；同時還提供給我們了自定義動畫的功能擅这。

5.1 顯示動畫

方式一：

$("div").show();

解釋：無參數(shù)，表示讓指定的元素直接顯示出來溯香。其實(shí)這個方法的底層就是通過display: block;實(shí)現(xiàn)的包晰。

方式二：

    $("div").show(2000);

解釋：通過控制元素的寬高勉痴、透明度、display屬性，逐漸顯示磁玉，2秒后顯示完畢席赂。

方式三：

    $("div").show("slow");

參數(shù)可以是：

• slow 慢：600ms
• normal 正常：400ms
• fast 快：200ms

解釋：和方式二類似，也是通過控制元素的寬高、透明度喊熟、display屬性，逐漸顯示壁拉。

方式四：

    //show(毫秒值，回調(diào)函數(shù);
    $("div").show(5000,function () {
        alert("動畫執(zhí)行完畢痘昌！");
    });

解釋：動畫執(zhí)行完后返吻，立即執(zhí)行回調(diào)函數(shù)。

總結(jié)：

上面的四種方式幾乎一致：參數(shù)可以有兩個捍靠，第一個是動畫的執(zhí)行時長，第二個是動畫結(jié)束后執(zhí)行的回調(diào)函數(shù)谊迄。

5.2 隱藏動畫

方式參照上面的show()方法的方式统诺。如下：

    $(selector).hide();

    $(selector).hide(1000); 

    $(selector).hide("slow");

    $(selector).hide(1000, function(){});

顯示和隱藏的來回切換：

顯示和隱藏的來回切換采用的是toggle()方法：就是先執(zhí)行show()钞艇，再執(zhí)行hide()这难。

同樣是四種方式：

$(selector).toggle();

5.3 滑入和滑出

1、滑入動畫效果：（類似于生活中的卷簾門）

    $(selector).slideDown(speed, 回調(diào)函數(shù));

解釋：下拉動畫，顯示元素剪个。

注意：省略參數(shù)或者傳入不合法的字符串，那么則使用默認(rèn)值：400毫秒（同樣適用于fadeIn/slideDown/slideUp）

2 滑出動畫效果：

    $(selector).slideUp(speed, 回調(diào)函數(shù));

解釋：上拉動畫，隱藏元素惕虑。

3、滑入滑出切換動畫效果：

    $(selector).slideToggle(speed, 回調(diào)函數(shù));

參數(shù)解釋同show()方法。

舉例：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div {
            width: 300px;
            height: 300px;
            display: none;
            background-color: pink;
        }
    </style>

    <script src="jquery-1.11.1.js"></script>
    <script>
        $(function () {
            //點(diǎn)擊按鈕后產(chǎn)生動畫
            $("button:eq(0)").click(function () {

                //滑入動畫： slideDown(毫秒值痪伦，回調(diào)函數(shù)[顯示完畢執(zhí)行什么]);
                $("div").slideDown(2000, function () {
                    alert("動畫執(zhí)行完畢癞蚕！");
                });
            })

            //滑出動畫
            $("button:eq(1)").click(function () {

                //滑出動畫：slideUp(毫秒值，回調(diào)函數(shù)[顯示完畢后執(zhí)行什么]);
                $("div").slideUp(2000, function () {
                    alert("動畫執(zhí)行完畢！");
                });
            })

            $("button:eq(2)").click(function () {
                //滑入滑出切換（同樣有四種用法）
                $("div").slideToggle(1000);
            })

        })
    </script>
</head>
<body>
<button>滑入</button>
<button>滑出</button>
<button>切換</button>
<div></div>

</body>
</html>

img

5.4 淡入淡出動畫

1、淡入動畫效果：

    $(selector).fadeIn(speed, callback);

作用：讓元素以淡淡的進(jìn)入視線的方式展示出來。

2酸纲、淡出動畫效果：

    $(selector).fadeOut(1000);

作用：讓元素以漸漸消失的方式隱藏起來

3、淡入淡出切換動畫效果：

    $(selector).fadeToggle('fast', callback);

作用：通過改變透明度，切換匹配元素的顯示或隱藏狀態(tài)代承。

參數(shù)的含義同show()方法席爽。

代碼舉例：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div {
            width: 300px;
            height: 300px;
            display: none;
            /*opacity: 1;*/
            background-color: pink;
        }
    </style>

    <script src="jquery-1.11.1.js"></script>
    <script>
        $(function () {
            //點(diǎn)擊按鈕后產(chǎn)生動畫
            $("button:eq(0)").click(function () {
               //淡入動畫用法1:   fadeIn();   不加參數(shù)
                $("div").fadeIn();
            })

            //滑出動畫
            $("button:eq(1)").click(function () {
                //滑出動畫用法2:   fadeOut(2000);   毫秒值
               $("div").fadeOut(2000);  //通過這個方法實(shí)現(xiàn)的：display: none;
               //通過控制  透明度和display
              
            })

            $("button:eq(2)").click(function () {
                //滑入滑出切換
                //同樣有四種用法
                $("div").fadeToggle(1000);
            })

            $("button:eq(3)").click(function () {
                //改透明度
                //同樣有四種用法
                $("div").fadeTo(1000, 0.5, function () {
                    alert(1);
                });
            })
        })
    </script>
</head>
<body>
<button>淡入</button>
<button>淡出</button>
<button>切換</button>
<button>改透明度為0.5</button>
<div></div>

</body>
</html>

5.5 自定義動畫

    $(selector).animate({params}, speed, callback);

作用：執(zhí)行一組CSS屬性的自定義動畫齐饮。

• 第一個參數(shù)表示：要執(zhí)行動畫的CSS屬性（必選）
• 第二個參數(shù)表示：執(zhí)行動畫時長（可選）
• 第三個參數(shù)表示：動畫執(zhí)行完后握恳，立即執(zhí)行的回調(diào)函數(shù)（可選）

代碼舉例：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div {
            position: absolute;
            left: 20px;
            top: 30px;
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
    <script src="jquery-1.11.1.js"></script>
    <script>
        jQuery(function () {
            $("button").click(function () {
                var json = {"width": 500, "height": 500, "left": 300, "top": 300, "border-radius": 100};
                var json2 = {
                    "width": 100,
                    "height": 100,
                    "left": 100,
                    "top": 100,
                    "border-radius": 100,
                    "background-color": "red"
                };

                //自定義動畫
                $("div").animate(json, 1000, function () {
                    $("div").animate(json2, 1000, function () {
                        alert("動畫執(zhí)行完畢匕坯！");
                    });
                });

            })
        })
    </script>
</head>
<body>
<button>自定義動畫</button>
<div></div>
</body>
</html>

5.6 停止動畫

    $(selector).stop(true, false);

里面的兩個參數(shù)锹雏，有不同的含義。

第一個參數(shù)：

• true：后續(xù)動畫不執(zhí)行。
• false：后續(xù)動畫會執(zhí)行晰赞。

第二個參數(shù)：

• true：立即執(zhí)行完成當(dāng)前動畫戏挡。
• false：立即停止當(dāng)前動畫洪己。

PS：參數(shù)如果都不寫答捕，默認(rèn)兩個都是false逝钥。實(shí)際工作中，直接寫stop()用的多拱镐。

效果演示：

當(dāng)?shù)诙€參數(shù)為true時艘款，效果如下：

img

當(dāng)?shù)诙€參數(shù)為false時持际，效果如下：

img

這個后續(xù)動畫我們要好好理解殿衰，來看個例子拴竹。

案例：鼠標(biāo)懸停時，彈出下拉菜單（下拉時帶動畫）

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            list-style: none;
        }

        .wrap {
            width: 330px;
            height: 30px;
            margin: 100px auto 0;
            padding-left: 10px;
            background-color: pink;
        }

        .wrap li {
            background-color: green;
        }

        .wrap > ul > li {
            float: left;
            margin-right: 10px;
            position: relative;
        }

        .wrap a {
            display: block;
            height: 30px;
            width: 100px;
            text-decoration: none;
            color: #000;
            line-height: 30px;
            text-align: center;
        }

        .wrap li ul {
            position: absolute;
            top: 30px;
            display: none;
        }
    </style>
    <script src="jquery-1.11.1.js"></script>
    <script>
        //入口函數(shù)
        $(document).ready(function () {
            //需求：鼠標(biāo)放入一級li中，讓他里面的ul顯示证鸥。移開隱藏挺邀。
            var jqli = $(".wrap>ul>li");

            //綁定事件
            jqli.mouseenter(function () {
                $(this).children("ul").stop().slideDown(1000);
            });

            //綁定事件(移開隱藏)
            jqli.mouseleave(function () {
                $(this).children("ul").stop().slideUp(1000);
            });
        });
    </script>

</head>
<body>
<div class="wrap">
    <ul>
        <li>
            <a href="javascript:void(0);">一級菜單1</a>
            <ul>
                <li><a href="javascript:void(0);">二級菜單1</a></li>
                <li><a href="javascript:void(0);">二級菜單2</a></li>
                <li><a href="javascript:void(0);">二級菜單3</a></li>
            </ul>
        </li>
        <li>
            <a href="javascript:void(0);">一級菜單1</a>
            <ul>
                <li><a href="javascript:void(0);">二級菜單1</a></li>
                <li><a href="javascript:void(0);">二級菜單2</a></li>
                <li><a href="javascript:void(0);">二級菜單3</a></li>
            </ul>
        </li>
        <li>
            <a href="javascript:void(0);">一級菜單1</a>
            <ul>
                <li><a href="javascript:void(0);">二級菜單1</a></li>
                <li><a href="javascript:void(0);">二級菜單2</a></li>
                <li><a href="javascript:void(0);">二級菜單3</a></li>
            </ul>
        </li>
    </ul>
</div>
</body>
</html>

效果如下：

img

當(dāng)鼠標(biāo)第一次進(jìn)入時讯屈，會觸發(fā)$(this).children("ul").stop().slideDown(1000);攘已，此時stop()會立即的停止當(dāng)前的動畫辫樱，由于當(dāng)前沒有動畫备埃，所以會執(zhí)行后續(xù)的slideDown(1000)伞辛，此時，如果鼠標(biāo)在1秒移除倾剿，會觸發(fā)$(this).children("ul").stop().slideUp(1000);，此時stop()方法會停止未執(zhí)行完的slideDown(1000)(滑入動畫)皮官，進(jìn)而執(zhí)行后續(xù)的slideUp(1000)(滑出動畫）；如果不加stop()方法會先讓滑入執(zhí)行完再執(zhí)行滑出動畫。

上方代碼中翎碑，關(guān)鍵的地方在于扁眯，用了stop函數(shù)骤素，再執(zhí)行動畫前，先停掉之前的動畫。

如果去掉stop()函數(shù)者吁，效果如下：（不是我們期望的效果）

img

stop方法的總結(jié)

當(dāng)調(diào)用stop()方法后须床，隊列里面的下一個動畫將會立即開始。
但是懈涛，如果參數(shù)clearQueue被設(shè)置為true项秉，那么隊列面剩余的動畫就被刪除了绽昼，并且永遠(yuǎn)也不會執(zhí)行河咽。如果

參數(shù)jumpToEnd被設(shè)置為true罕偎，那么當(dāng)前動畫會停止，但是參與動畫的每一個CSS屬性將被立即設(shè)置為它們的目標(biāo)值腊凶。比如：slideUp()方法意敛，那么元素會立即隱藏掉剧劝。如果存在回調(diào)函數(shù)他巨，那么回調(diào)函數(shù)也會立即執(zhí)行。

注意：如果元素動畫還沒有執(zhí)行完，此時調(diào)用sotp()方法汪榔，那么動畫將會停止。并且動畫沒有執(zhí)行完成肃拜，那么回調(diào)函數(shù)也不會被執(zhí)行痴腌。

6. DOM節(jié)點(diǎn)的相關(guān)操作

6.1 創(chuàng)建元素

DOM中可以動態(tài)創(chuàng)建元素:

• document.write() : 會把頁面中的所有的頁面全部覆蓋
• element.innerHTML :
• document.createElement() <推薦的方式>

jQuery中同樣可以創(chuàng)建元素標(biāo)簽:

• $(標(biāo)簽代碼)
• 對象.html("標(biāo)簽代碼")

例如要創(chuàng)建兩個<li>元素節(jié)點(diǎn)，并且要把它們作為<ul>元素節(jié)點(diǎn)的子節(jié)點(diǎn)添加到DOM節(jié)點(diǎn)樹上燃领。完成這個任務(wù)需要兩個步驟士聪。

（1）創(chuàng)建兩個<li>新元素。

var $li_1 = $("<li></li>");
var $li_2 = $("<li></li>");

（2）將這兩個新元素插入文檔中猛蔽。

$("ul").append($li_1)

注意：

（1）動態(tài)創(chuàng)建的新元素節(jié)點(diǎn)不會被自動添加到文檔中剥悟，而是需要使用其他方法將其插入文檔中。

（2）當(dāng)創(chuàng)建單個元素時曼库，要注意閉合標(biāo)簽和使用標(biāo)準(zhǔn)的XHTML格式区岗。例如創(chuàng)建一個<p>元素，可以用$("</p>")或者$("<p></p>")毁枯，但不要使用$("<p>")或者大寫的$("<P/>")慈缔。

6.2 插入節(jié)點(diǎn)

動態(tài)創(chuàng)建HTML元素并沒有實(shí)際用處，還需要將新創(chuàng)建的元素插入文檔中种玛。將新創(chuàng)建的節(jié)點(diǎn)插入文檔最簡單的辦法是藐鹤，讓它成為這個文檔的某個節(jié)點(diǎn)的子節(jié)點(diǎn)。前面使用了一個插入節(jié)點(diǎn)的方法append()赂韵，它會在元素內(nèi)部追加新創(chuàng)建的內(nèi)容娱节。

將新創(chuàng)建的節(jié)點(diǎn)插入某個文檔的方法并非只有一種，在jQuery中還提供了其他幾種插入節(jié)點(diǎn)的方法祭示，如表所示肄满。讀者可以根據(jù)實(shí)際需求靈活地做出多種選擇。

mark

這些插入節(jié)點(diǎn)的方法不僅能將新創(chuàng)建的DOM元素插入到文檔中，也能對原有的DOM元素進(jìn)行移動稠歉。

簡單舉例

<body>
    <p title="選擇你喜歡的水果">選擇你喜歡的水果</p>
    <input type="button" value="元素移動" id="btn1">
    <input type="button" value="插入元素" id="btn2">
    <input type="button" value="元素移動" id="btn">
    <ul>
        <li title="蘋果">蘋果</li>
        <li title="橘子">橘子</li>
        <li title="梨子">梨子</li>
    </ul>
</body>

對元素進(jìn)行插入和移動操作

 <script>
     // 移動元素
        $(function () {
            $('#btn').click(function () {
                var $one_li = $("li:eq(1)");
                var $two_li = $("li:eq(2)");
                console.log('置頂');
                $two_li.insertBefore($one_li);
            });
        });
     
      // 插入元素
        $(function(){
            var $li_1 = $("<li title = '香蕉'>香蕉</li>");
            var $li_2 = $("<li title = '雪梨'>雪梨</li>");
            var $li_3 = $("<li title = '其他'>其他</li>");
            
            var $parent = $("ul");
            var $two_li = $("ul li:eq(1)");
            
            $('#btn2').click(function(){
                $parent.append($li_1);
                $parent.prepend($li_2);
                console.log($two_li.html());
                console.log($li_3.html());
                $two_li.after($li_3);
            });

        });
</script>

6.3 刪除節(jié)點(diǎn)

如果文檔中某一個元素多余讥电，那么應(yīng)將其刪除。jQuery提供了三種刪除節(jié)點(diǎn)的方法轧抗，即

• remove()恩敌，
• detach()
• empty()

1．remove()方法

作用是從DOM中刪除所有匹配的元素，傳入的參數(shù)用于根據(jù)jQuery表達(dá)式來篩選元素横媚。

例如刪除中<ul>節(jié)點(diǎn)中的第2個<li>元素節(jié)點(diǎn)纠炮，jQuery代碼如下：

$("ul li:eq(1)").remove();

當(dāng)某個節(jié)點(diǎn)用remove()方法刪除后，該節(jié)點(diǎn)所包含的所有后代節(jié)點(diǎn)將同時被刪除灯蝴。這個方法的返回值是一個指向已被刪除的節(jié)點(diǎn)的引用恢口，因此可以在以后再使用這些元素。下面的jQuery代碼說明元素用remove()方法刪除后穷躁，還是可以繼續(xù)使用的耕肩。

var $li_2 = $("ul li:eq(1)").remove();
$li_2.appendTo($('ul'));

另外remove()方法也可以通過傳遞參數(shù)來選擇性地刪除元素，jQuery代碼如下：

$("ul li").remove("li[title!='橘子']");

2．detach()方法

detach()和remove()一樣问潭，也是從DOM中去掉所有匹配的元素猿诸。但需要注意的是，這個方法不會把匹配的元素從jQuery對象中刪除狡忙，因而可以在將來再使用這些匹配的元素梳虽。與remove()不同的是，所有綁定的事件灾茁、附加的數(shù)據(jù)等都會保留下來窜觉。

            $("ul li").click(function () {
                alert($(this).html());
            });
            // 刪除元素
            var $li = $("ul li:eq(1)").detach();
            // 重新的添加，事件任然會綁定北专，不會消失,remove（）方法會消失
            $li.appendTo($("ul"));
        });

3．empty()方法

嚴(yán)格來講禀挫，empty()方法并不是刪除節(jié)點(diǎn)，而是清空節(jié)點(diǎn)拓颓，它能清空元素中的所有后代節(jié)點(diǎn)语婴。jQuery代碼如下：

 // 清空元素的內(nèi)容，注意是清空內(nèi)容
 $('ul li:eq(1)').empty();

案例演示

詳細(xì)的代碼在我的githube上顯示jQuery增加刪除節(jié)點(diǎn)

6.4 復(fù)制節(jié)點(diǎn)

繼續(xù)沿用之前水果的例子录粱，如果單擊<li>元素后需要再復(fù)制一個<li> 元素腻格，可以使用clone()方法來完成，jQuery代碼如下：

$(function(){
            $("ul li").click(function(){
                $(this).clone().appendTo($("ul"));
            })
        });

復(fù)制節(jié)點(diǎn)后啥繁，被復(fù)制的新元素并不具有任何行為。如果需要新元素也具有復(fù)制功能（本例中是單擊事件）青抛，可以使用如下jQuery代碼：

$(function(){
            $("ul li").click(function(){
                $(this).clone(true).appendTo($("ul"));
            })
        });

在clone()方法中傳遞了一個參數(shù)true旗闽，它的含義是復(fù)制元素的同時復(fù)制元素中所綁定的事件。因此該元素的副本也同樣具有復(fù)制功能（本例中是單擊事件）。

6.5 替換節(jié)點(diǎn)

如果要替換某個節(jié)點(diǎn)适室，jQuery提供了相應(yīng)的方法嫡意，即replaceWith()和replaceAll()。replaceWith()方法的作用是將所有匹配的元素都替換成指定的HTML或者DOM元素捣辆。例如要將網(wǎng)頁中“<p title="選擇你最喜歡的水果.">你最喜歡的水果是蔬螟？</p>”替換成“<strong>你最不喜歡的水果是？</strong>”汽畴，可以使用如下jQuery代碼：

        // 替換節(jié)點(diǎn) replaceWith
        $(function(){
            $('#btn1').click(function (e) { 
                e.preventDefault();
                $("p").replaceWith("<strong>你最喜歡的水果是旧巾？</strong><br>");
            });
        });

也可以使用jQuery中另一個方法replaceAll()來實(shí)現(xiàn)，該方法與replaceWith()方法的作用相同忍些，只是顛倒了replaceWith()操作鲁猩，可以使用如下jQuery代碼實(shí)現(xiàn)同樣的功能：

$("<strong>你最喜歡的水果是？</strong><br>").replaceAll($("p"));

注意：如果在替換之前罢坝，已經(jīng)為元素綁定事件廓握，替換后原先綁定的事件將會與被替換的元素一起消失，需要在新元素上重新綁定事件嘁酿。

6.6 屬性操作

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

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

如果要獲取<p>元素的屬性title是尔，那么只需要給attr()方法傳遞一個參數(shù)，即屬性名稱开仰。jQuery代碼如下：

 var p_txt = $('p').attr('title');
console.log(p_txt);

如果要設(shè)置<p>元素的屬性title的值拟枚，也可以使用同一個方法，不同的是众弓，需要傳遞兩個參數(shù)即屬性名稱和對應(yīng)的值恩溅。jQuery代碼如下：

$('p').attr('title','your title!');

如果需要一次性為同一個元素設(shè)置多個屬性，可以使用下面的代碼來實(shí)現(xiàn)：

// 使用json串的格式
$("p").attr({"title":"your title","name":'test'});

注意：

jQuery中的很多方法都是同一個函數(shù)實(shí)現(xiàn)獲任酵蕖（getter）和設(shè)置（setter）的脚乡，例如上面的attr()方法，既能設(shè)置元素屬性的值滨达，也能獲取元素屬性的值奶稠。類似的還有html()、text()捡遍、height()锌订、width()、val()和css()等方法画株。

2．刪除屬性

在某些情況下辆飘，需要刪除文檔中某個元素的特定屬性啦辐，可以使用removeAttr()方法來完成該任務(wù)。

如果需要刪除<p>元素的title屬性蜈项，可以使用下面的代碼實(shí)現(xiàn)：

 $('p').removeAttr("title");

注意：jQuery1.6中新增了prop()和removeProp()芹关，分別用來獲取在匹配的元素集中的第一個元素的屬性值和為匹配的元素刪除設(shè)置的屬性侥衬。

6.7 樣式操作

1．獲取樣式和設(shè)置樣式

HTML代碼如下：

<p class="myClass" title="選擇你喜歡的水果">選擇你喜歡的水果</p>

在上面的代碼中，class也是<p>元素的屬性，因此獲取class和設(shè)置class都可以使用attr()方法來完成。

例如使用attr()方法來獲取<p>元素的class，jQuery代碼如下：

var p_class = $("p").attr("class");  //獲取p元素的class

也可以使用attr()方法來設(shè)置<p>元素的class，jQuery代碼如下：

$("p").attr("class","high"); //設(shè)置<p>元素的class為high

上面的代碼是將原來的class（myClass）替換為新的class（high）谐算。如果此處需要的是“追加”效果洲脂，class屬性變?yōu)椤癿yClass high”往果，即myClass和high兩種樣式的疊加陕贮，那么我們可以使用addClass()方法福也。

其他的細(xì)節(jié)可以查看樣式的操作小節(jié)

6.7 設(shè)置和獲取html现喳、文本和值

1．html()方法

此方法類似于JavaScript中的innerHTML屬性，可以用來讀取或者設(shè)置某個元素中的HTML內(nèi)容诫欠。

var p_html = $("p").html();

如果需要設(shè)置某元素的HTML代碼浴栽，那么也可以使用該方法典鸡，不過需要為它傳遞一個參數(shù)。例如要設(shè)置<p>元素的HTML代碼萝玷，可以使用如下代碼：

 // 設(shè)置p的元素html代碼
$("p").html("<strong>選擇你喜歡的水果?</strong>")

2．text()方法

此方法類似于JavaScript中的innerText屬性嫁乘，可以用來讀取或者設(shè)置某個元素中的文本內(nèi)容。繼續(xù)使用以上的HTML代碼

<p class="myClass" title="選擇你喜歡的水果"><strong>選擇你喜歡的水果</strong></p>

用text()方法對<p>元素進(jìn)行操作：

 var p_text = $("p").text();

與html()方法一樣，如果需要為某元素設(shè)置文本內(nèi)容，那么也需要傳遞一個參數(shù)帮碰。例如對<p>元素設(shè)置文本內(nèi)容殉挽，代碼如下：

 $("p").text("text方法修改后的值");

注意：

（1）JavaScript中的innerText屬性并不能在Firefox瀏覽器下運(yùn)行丰涉，而jQuery的text()方法支持所有的瀏覽器。
（2）text()方法對HTML文檔和XML文檔都有效斯碌。

3．val()方法

此方法類似于JavaScript中的value屬性一死，可以用來設(shè)置和獲取元素的值。無論元素是文本框傻唾，下拉列表還是單選框投慈，它都可以返回元素的值。如果元素為多選冠骄，則返回一個包含所有選擇的值的數(shù)組伪煤。

簡單的案例說明：獲得焦點(diǎn)、失去焦點(diǎn)的情況

 <script>
        $(function(){
            $("#address").focus(function(){
                var text_value = $(this).val();
                console.log(text_value);
                // 還可以用this.defaultValue
                if (text_value =="請輸入郵箱地址"){
                    $(this).val("");
                }
            });
            $("#address").blur(function(){
                var text_value = $(this).val();
                if (text_value ==""){
                    $(this).val("請輸入郵箱地址");
                }
            });
        });
    </script>
</head>
<body>
    <input type="text" name="" id="address" value="請輸入郵箱地址"><br><br>
    <input type="text" name="" id="password" value="請輸入郵箱密碼"><br><br>
    <input type="button" value="登錄">

6.8 CSS操作

1：CSS樣式顏色

CSS-DOM技術(shù)簡單來說就是讀取和設(shè)置style對象的各種屬性凛辣。style屬性很有用抱既，但最大不足是無法通過它來提取到通過外部CSS設(shè)置的樣式信息，然而在jQuery中扁誓，這些都是非常的簡單防泵。

可以直接利用css()方法獲取元素的樣式屬性，jQuery代碼如下：

$("p").css("color");  //獲取p元素的樣式的顏色屬性

無論color屬性是外部CSS導(dǎo)入跋理，還是直接拼接在HTML元素里（內(nèi)聯(lián)）择克，css()方法都可以獲取到屬性style里的其他屬性的值。

也可以直接利用css()方法設(shè)置某個元素的單個樣式前普，例如：

$("p").css("color","red");  //獲取p元素的樣式的顏色屬性

與attr()方法一樣肚邢，css()方法也可以同時設(shè)置多個樣式屬性，代碼如下：

$("p").css({"color":"red","fontSize":"30px"}); 

注意：

（1）如果值是數(shù)字拭卿，將會被自動轉(zhuǎn)化為像素值骡湖。

（2）在css()方法中，如果屬性中帶有“-”符號峻厚，例如font-size和background-color屬性响蕴，如果在設(shè)置這些屬性的值的時候不帶引號，那么就要用駝峰式寫法惠桃，例如：

$("p").css({ fontSize : "30px"浦夷，backgroundColor : "#888888" })

如果帶上了引號，既可以寫成“font-size”辜王，也可以寫成“fontSize”劈狐。

總之建議大家加上引號，養(yǎng)成良好的習(xí)慣呐馆。

對透明度的設(shè)置肥缔，可以直接使用opacity屬性，jQuery已經(jīng)處理好了兼容性的問題汹来，如下代碼所示续膳，將<p>元素的透明度設(shè)置為半透明：

$("p").css("opacity","0.5")

如果需要獲取某個元素的height屬性改艇，則可以通過如下jQuery代碼實(shí)現(xiàn)：

$(element).css("height")

2：寬度和高度

在jQuery中還有另外一種方法也可以獲取元素的高度，即height()坟岔。它的作用是取得匹配元素當(dāng)前計算的高度值（px）谒兄。jQuery代碼如下：

$("p").height() //獲取<p>元素的高度值

height()方法也能用來設(shè)置元素的高度，如果傳遞的值是一個數(shù)字炮车，則默認(rèn)單位為px舵变。如果要用其他單位（例如em）酣溃，則必須傳遞一個字符串瘦穆。jQuery代碼如下：

$("p").height(100) //設(shè)置p元素的高度為100px

注意：

（1）在jQuery1.2版本以后的height()方法可以用來獲取window和document的高度。
（2）兩者的區(qū)別是：css()方法獲取的高度值與樣式的設(shè)置有關(guān)赊豌，可能會得到"auto"扛或，也可能得到"10px"之類的字符串；而height()方法獲取的高度值則是元素在頁面中的實(shí)際高度碘饼，與樣式的設(shè)置無關(guān)熙兔，并且不帶單位。

與height()方法對應(yīng)的還有一個width()方法艾恼，它可以取得匹配元素的寬度值（px）住涉。

$("p").width() //獲取p元素的寬度

同樣，width()方法也能用來設(shè)置元素的寬度钠绍。

$("p").with("400px")  //設(shè)置p元素的寬度

3：位置舆声，偏移量

• offset()方法

它的作用是獲取元素在當(dāng)前視窗的相對偏移，其中返回的對象包含兩個屬性柳爽，即top和left媳握，它只對可見元素有效。例如用它來獲取<p>元素的的偏移量磷脯，jQuery代碼如下：

var offset = $("p").offset(); //獲取元素的offset
var left = offset.left; // 獲取左偏移量
var top = offset.top //獲取上偏移量

• position()方法

它的作用是獲取元素相對于最近的一個position樣式屬性設(shè)置為relative或者absolute的祖父節(jié)點(diǎn)的相對偏移蛾找，與offset()一樣，它返回的對象也包括兩個屬性赵誓，即top和left打毛。jQuery代碼如下：

var position = $("p").offset(); //獲取元素的position
var left = position.left; // 獲取左偏移量
var top = position.top //獲取上偏移量

• scrollTop()方法和scrollLeft()方法

這兩個方法的作用分別是獲取元素的滾動條距頂端的距離和距左側(cè)的距離。例如使用下面的代碼獲取<p>元素的滾動條距離：

var $p = $("p"); //獲取元素
var top = $p.scrollTop();   // 獲取上偏移量
var left = $p.scrollLeft(); //獲取左偏移量

另外俩功，可以為這兩個方法指定一個參數(shù)幻枉，控制元素的滾動條滾動到指定位置。例如使用如下代碼控制元素內(nèi)的滾動條滾動到距頂端300和距左側(cè)300的位置：

$("textarea").scrollTop(300)  //元素的垂直滾動條到指定的地方
$("textarea").scrollLeft(300) //元素的水平滾動條到指定的地方

7. jQuery事件

7.1 事件的綁定

在文檔裝載完成后绑雄，如果打算為元素綁定事件來完成某些操作展辞，則可以使用bind()方法來對匹配元素進(jìn)行特定事件的綁定，bind()方法的調(diào)用格式為：

// bind()方法：第一個參數(shù)是事件的名字  第二個參數(shù)是事件處理函數(shù)

8. jQuery插件

參考文章

《鋒利的jQuery》