jQuery框架-2.jQuery操作DOM節點與jQuery.ajax方法

一、jQuery操作DOM 內部插入操作： append(content|fn)：向每個匹配的元素內部追加內容。 prepend(content)：向每個匹配的元素內部前置內容。外部插入操作： after(content|fn)：在每個匹配的元素之後插入內容。 before(content|fn) ...

一、jQuery操作DOM

內部插入操作：

append(content|fn)：向每個匹配的元素內部追加內容。

prepend(content)：向每個匹配的元素內部前置內容。

外部插入操作：

after(content|fn)：在每個匹配的元素之後插入內容。

before(content|fn)：在每個匹配的元素之前插入內容。

包裹操作：

wrap(html|element|fn)：把所有匹配的元素用其他元素的結構化標記包裹起來。

unwrap()：這個方法將移出元素的父元素。

wrapAll(html|ele)：將所有匹配的元素用單個元素包裹起來。

wrapInner(htm|element|fnl)：將每一個匹配的元素的子內容(包括文本節點)用一個HTML結構包裹起來。

替換操作：

replaceWith(content|fn)：將所有匹配的元素替換成指定的HTML或DOM元素。

replaceAll(selector)：用匹配的元素替換掉所有 selector匹配到的元素。

刪除操作：

empty()：刪除匹配的元素集合中所有的子節點。

remove([expr])：從DOM中刪除所有匹配的元素。這個方法不會把匹配的元素從jQuery對象中刪除，因而可以在將來再使用這些匹配的元素。但除了這個元素本身得以保留之外，其他的比如綁定的事件，附加的數據等都會被移除。

detach([expr])：從DOM中刪除所有匹配的元素。這個方法不會把匹配的元素從jQuery對象中刪除，因而可以在將來再使用這些匹配的元素。與remove()不同的是，所有綁定的事件、附加的數據等都會保留下來。

複製操作：

clone(Even])：克隆匹配的DOM元素並且選中這些克隆的副本。

even：一個布爾值（true 或者 false）指示事件處理函數是否會被覆制。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .outer_one{
                width: 80%;
                height: 80px;
                text-align: center;
                background: #ff0000;
            }
            .outer_one_child{
                width: 100%;
                height: 50px;
                line-height: 50px;
                text-align: center;
                background: #00cd00;
            }
            .outer_four{
                background: purple;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="outer_one">
                第一個外邊框
            </div>
            <div class="outer_one_child">
                第一個外邊框的孩子——佈局與第一個外邊框同級
            </div>
            <div class="outer_two">
                第二個外邊框
            </div>
            <div class="outer_three">
                第三個外邊框
            </div>
            <div class="outer_four">
                第四個外邊框
            </div>
            
            <div class="outer_five">
                <p>第五個外邊框</p>
                <p>第五個外邊框</p>
                <a>第五個外邊框</a>
            </div>
            <div class="outer_six">
                <p>第六個外邊框</p>
                <a>第六個外邊框</a>
            </div>
            <div class="outer_seven">
                <p>第七個外邊框</p>
                <p>第七個外邊框</p>
                <a>第七個外邊框a標簽<p>我是孫子p標簽</p></a>
                <p>第七個外邊框</p>
            </div>
            <div class="outer_eight">
                <p>第八個外邊框</p>
                <a>第八個外邊框<span>&times;</span></a>
                第八個外邊框
            </div>
            <div class="outer_nine">
                <p>第九個外邊框</p> 
                <p>第九個外邊框</p> 
                <p>第九個外邊框</p> 
                <p>第九個外邊框</p> 
            </div>
            <div class="outer_ten">
                <p>第十個外邊框</p> 
                <p>第十個外邊框</p> 
                <p>第十個外邊框</p> 
                <a>第十個外邊框</a> 
            </div>
            <div class="outer_11">
                <p>第11個外邊框</p> 
                <p>第11個外邊框</p> 
                <p>第11個外邊框</p> 
                <a>第11個外邊框</a> 
            </div>
            <div class="outer_12">
                <p>第12個外邊框</p> 
                <p>第12個外邊框</p> 
            </div>
            <div class="outer_13">
                <p>第13個外邊框</p> 
                <p>第13個外邊框</p> 
            </div>
            <div class="outer_14">
                第14個外邊框
            </div>
            <div class="outer_15">
                第15個外邊框
            </div>
            <div class="outer_16">
                第16個外邊框
            </div>
            <div class="outer_17">
                第17個外邊框
            </div>
            
        </div>
    </body>
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
    <script type="text/javascript">
        
        //內部插入（生成子元素）
        //append元素內部末尾追加內容(支持回調函數)
        $('.outer_one').append($('.outer_one_child'));//將現有標簽追加到元素內
        $('.outer_two').append('<p>');//向元素末尾追加新標簽
        //prepend元素內部開頭追加內容
        $('.outer_three').prepend('我是prepend追加的內容');
        
        //外部插入（生成兄弟元素）
        $('.outer_four').before('<p>我是before剛插入的標簽</p>')
        $('.outer_four').after('<p>我是after剛插入的標簽</p>')
        //包裹操作wrap（添加父元素） unwrap(移除父元素)
        $('.outer_five p').wrap('<a>');//所有包含的元素外圍包裹p標簽
        $('.outer_six p').unwrap('<p>');//去除父元素的包裹
        //wrapAll將所有匹配的元素放到一起用一個規定的父元素包裹
        $('.outer_seven p').wrapAll('<a>');
        //wrapInner將子元素包裹
        $('.outer_eight').wrapInner('<h3>');
        
        //替換操作
        //replaceWith將匹配的元素替換為規定的元素
        $('.outer_nine p').replaceWith('<a>');
        //replaceAll將匹配的元素替換為規定的元素
        $('<p>').replaceAll('.outer_ten a');
        //刪除操作
        $('.outer_11').empty();
        // remove和detach的區別：
        //remove() dom中刪除節點保留到jquery,元素保留，事件刪除
        //detach() dom中刪除節點保留到jquery,元素保留，事件保留
        $('.outer_12').click(function(){
            $(this).css('background','green');
        }).remove().appendTo('.outer_14');
        $('.outer_13').click(function(){
            $(this).css('background','red');
        }).detach().appendTo('.outer_15');            
        //複製操作clone(even)方法的參數取值boolean如果true保留複製元素的綁定事件否則相反
        $('.outer_16').clone().appendTo('.outer_17')
    </script>
</html>

二、jQuery動畫

show([speed, [easing], [callback]])：顯示隱藏的匹配元素。

hide([speed, [easing], [callback]])：隱藏顯示的元素。

toggle([speed, [easing], [callback]])：如果元素是可見的，切換為隱藏的，如果元素是隱藏的，切換為可見的。

speed：三種預定速度的字元串（slow、normal、fast）或者動畫時長的毫秒數值。

easing：指定切換效果，預設是swing，可用linear。

callback：在動畫完成時執行的函數，每個元素執行一次。

運動過程中：改變width、height、margin、padding、opacity屬性值，添加overflow：hidden屬性。

slideDown([speed, [easing], [callback]])：通過高度變化（向下增大）來動態的顯示所有匹配的元素，顯示完成後可選的觸發一個回調函數。

slideUp([speed, [easing], [callback]])：通過高度變化（向上減小）來動態的隱藏所有匹配的元素，隱藏完成後可選的觸發一個回調函數。

slideToggle([speed, [easing], [callback]])：通過高度變化來切換所有匹配元素的可見性，切換完成後可選的觸發一個回調函數。

speed：三種預定速度的字元串（slow、normal、fast）或者動畫時長的毫秒數值。

easing：指定切換效果，預設是swing，可用linear。

callback：在動畫完成時執行的函數，每個元素執行一次。

運動過程中：改變height、margin-top、margin-bottom、padding-top、padding-bottom屬性值，添加overflow：hidden屬性。

fadeIn([speed, [easing], [callback]])：通過不透明度的變化來實現所有匹配元素的淡入效果，動畫完成後可選的觸發一個回調函數。

fadeOut([speed, [easing], [callback]])：通過不透明度的變化來實現所有匹配元素的淡出效果，動畫完成後可選的觸發一個回調函數。

fadeTo([speed, opacity, [easing], [callback]])：把所有匹配元素的不透明度以漸進方式調整到指定的不透明度，動畫完成後可選的觸發一個回調函數。opacity：一個0到1之間表示透明度的數字。

fadeToggle([speed, [easing], [callback]])：通過不透明度的變化來開關所有匹配元素的淡入淡出效果，動畫完成後可選的觸發一個回調函數。

speed：三種預定速度的字元串（slow、normal、fast）或者動畫時長的毫秒數值。

easing：指定切換效果，預設是swing，可用linear。

callback：在動畫完成時執行的函數，每個元素執行一次。

註：fadeIn、fadeout、fadeToggle，運動過程中修改opacity屬性值，最終只修改display屬性值。而fadeTo只修改opacity屬性值。

animate(params, [speed], [easing], [fn])：用於創建自定義動畫的函數。

params：一組包含作為動畫屬性和終值的樣式屬性和及其值的集合。

speed：三種預定速度的字元串（slow、normal、fast）或者動畫時長的毫秒數值。

easing：指定切換效果，預設是swing，可用linear。

fn：在動畫完成時執行的函數，每個元素執行一次。

stop(clearQueue, [jumpToEnd])：停止所有在指定元素上正在運行的動畫。如果clearQueue沒有設置為true，並且隊列中有等待執行的動畫，他們將馬上執行。

clearQueue：如果同一元素調用多個動畫方法，尚未被執行的動畫被放置在元素的效果隊列中。這些動畫不會開始，直到第一個完成。調用stop()的時候，隊列中的下一個動畫開始。如果clearQueue參數為true，那麼在隊列中的動畫其餘被刪除並永遠不會被執行。

jumpToEnd：當前動畫將停止，但該元素上的CSS屬性會被立刻修改成動畫的目標值。

delay(duration [,queueName])：設置一個延時來推遲執行隊列中之後的項目。

duration：延遲時間，單位：毫秒。

queueName：隊列名次，預設是Fx，動畫隊列。

jQuery.fx.off：關閉頁面上所有的動畫。把這個屬性設置為true可以立即關閉所有動畫。把這個屬性設置為false，可以重新開啟所有動畫。

jQuery.fx.interval：設置動畫的顯示幀速。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery—dom操作和ajax方法</title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        .box{
            width: 90%;
            height: 100px;
            margin: 20px;
            padding: 10px;
            border: 10px solid #ff0000;
            background: #888888;
        }
        input[type=button]{
            border: 1px solid #555555;
            padding: 10px 20px;
            background:'#f3f3f3';
            margin:5px;
        }
    </style>
</head>
<body>
    <div class="container">
        <input name="show" type="button" value="show顯示" />
        <input name="hide" type="button" value="hide隱藏" />
        <input name="toggle" type="button" value="toggle動畫" />
        <hr/>
        <input name="slideDown" type="button" value="slideDown動畫" />
        <input name="slideUp" type="button" value="slideUp動畫" />
        <input name="slideToggle" type="button" value="slideToggle動畫" />
        <hr/>
        <input name="fadeIn" type="button" value="fadeIn動畫" />
        <input name="fadeOut" type="button" value="fadeOut動畫" />
        <input name="fadeToggle" type="button" value="fadeToggle動畫" />
        <input name="fadeTo" type="button" value="fadeTo動畫" />
        <hr/>
        <input name="animate" type="button" value="animate自定義動畫" />
        <input name="delay" type="button" value="delay動畫延遲" />
        <input name="stop" type="button" value="stop停止動畫" />
        <div class="box">
            
        </div>
    </div>
</body>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
<script type="text/javascript">

    // $.fx.off = true; // 關閉頁面上所有的動畫
    // $.fx.interval = 500; //設置動畫顯示幀速 500ms執行一次
    // toggle和帶有toggle的jQuery方法顯示動畫為隱藏、隱藏動畫為顯示可重覆
    $('input[name=show]').click(function () {
        $('.box').show('slow','linear',function () {
            console.log("顯示動畫");
        });
    });

    $('input[name=hide]').click(function () {
        $('.box').hide('quick');
    });

    $('input[name=toggle]').click(function () {
        $('.box').toggle(5000);
    });
    // 操作高度控制元素的顯示隱藏
    $('input[name=slideDown]').click(function () {
        $('.box').slideDown(5000, 'linear', function () {
            console.log('OVER');
        });
    });

    $('input[name=slideUp]').click(function () {
        $('.box').slideUp(1000);
    });

    $('input[name=slideToggle]').click(function () {
        $('.box').slideToggle(1000);
    });

    // 操作opacity屬性
    $('input[name=fadeIn]').click(function () {
        $('.box').fadeIn(1000);
    });

    $('input[name=fadeOut]').click(function () {
        $('.box').fadeOut(1000);
    });    
    
    $('input[name=fadeToggle]').click(function () {
        $('.box').fadeToggle(1000);
    });

    $('input[name=fadeTo]').click(function () {    
        alert("fadeIn、fadeout、fadeToggle，運動過程中修改opacity屬性值，
　　　　　　　　最終只修改display屬性值。而fadeTo只修改opacity屬性值
　　　　　　　　,故針對此屬性後其他動畫無法顯示。 ")
        $('.box').fadeTo(1000, 0);
    });
    // 自定義動畫
    $('input[name=animate]').click(function () {    
        $('.box').animate({
            width: 200,
            height: 200,
            opacity: 0.4,
            border:0
        }, 6000, 'linear', function () {
            console.log('自定義動畫完成');
        });
    });
    // 動畫延遲
    $('input[name=delay]').click(function () {    
        $('.box').delay(2000).animate({
            width: 200,
            height: 200,
            opacity: 0.4,
            border:0
        }, 6000, 'linear', function () {
            console.log('自定義動畫完成');
        });
    });
    $('input[name=stop]').click(function () {
        $('.box').stop(false, true);
    });

</script>
</html>

三、jQuery迴圈遍歷及data()方法

對象訪問：

each(callback)：以每一個匹配的元素作為上下文來執行一個函數。回調函數有兩個參數，第一個參數代表索引，第二個參數代表當前遍歷到的DOM對象。return true則跳至下一個迴圈(就像在普通迴圈中使用continue)，return false則終止迴圈（就像在普通迴圈中使用break）。

get([index])：取得其中一個匹配的元素。 num表示取得第幾個匹配的元素。與$(this)[0]等價。

index([selector|element])：搜索匹配的元素，並返回相應元素的索引值，從0開始計數。如果參數是一組DOM元素或者jQuery對象，那麼返回值就是傳遞的元素相對於原先集合的位置。如果不傳遞參數，那麼返回值就是這個jQuery對象集合中第一個元素相對於其同輩元素的位置。

數據緩存：

data([key],[value]) ：在元素上存放數據,返回jQuery對象。

removeData([name|list])：在元素上移除存放的數據。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>jQuery迴圈遍歷</title>
        <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        .list{
            list-style: none;
            line-height: 35px;
            text-indent: 24px;
        }
        .list li{
            border-bottom: 1px dashed #f3f3f3;
        }
        </style>
    </head>
    <body>
        <div class="container">
            <ul class="list" data-name='迷城'>
                <li>標簽內容1</li>
                <li>標簽內容2</li>
                <li>標簽內容3</li>
                <li>標簽內容4</li>
                <li>標簽內容5</li>
            </ul>
        </div>
        <img class="testimg" src="kong" data-src="測試" />
    </body>
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
    <script type="text/javascript">
        /*參數回調函數包含兩個參數，一索引值，二對應項的dom元素*/
        $('.list li').each(function (index,value) {
            // get方法對應索引位置的元素
            $(value).hover(function(){
                this.style.background="#555555";
                console.log(index,$('.list li').get(index));
                console.log($(this).index());
            },function () {
                this.style.background="#ffffff";
            });
        });

        // data()添加的數據屬性在dom元素不顯示
        /*data()在元素直接定義data需要加data-首碼
        後續修改data的值不會dom元素身上呈現
        */
        $('.list').data('name', '煙霧');
        console.log($('.list').data('name'));
        $('.list').removeData('name')
        /*removeData()元素身上直接定義的data無法刪除，
        可以理解為元素身上添加例如data-name視為初始化data*/
        console.log($('.list').data('name'));
        $('.list').data('age','40');
        $('.list').removeData('age');
        console.log($('.list').data('age'));

        console.log($('.testimg').data('src'));
        $('.testimg').data('src','數據')
        console.log($('.testimg').data('src'));
        /*data()、removeData()方法不能直接通過data-操作data()添加的數據*/
        $('.testimg').data('data-src');
        $('.testimg').attr('src');
        /*data(key, value)中value可以存儲任意對象而不限於簡單類型。
　　　　為此付出的代價是，dom添加jQuery.expando屬性,用jQuery-ID進行唯一標識，
　　　　然後用jQuery.cache做k-v字典，於是dom上只能看到jQuery.expando，
　　　　而實際上data數據都是存在那個字典里的*/
       //具體查看jQuery框架源碼
    </script>
</html>

四、jQuery.ajax方法

1、load(url, [data], [callback])：載入伺服器HTML文件代碼並插入至DOM中。預設為GET請求。

1）url不一定是html文件地址，css、js、txt、php等可以。

2）篩選載入進來的HTML文檔：Load(url #content p)。

3）data可以是key/value數據，也可以是字元串類型。如果是鍵值對對象類型，則為POST請求，如果是字元串，則為GET請求。

4）回調函數三個參數：1：獲取的HTML代碼，2：請求狀態的描述，3：XHR對象。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jq.ajax方法</title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
    </style>
</head>
<body>
    <ul class="list">
<!--     
//test.html文件內容    
<ul>
    <li>測試數據1</li>
    <li>測試數據2</li>
    <li>測試數據3</li>
    <li>測試數據4</li>
    <li>測試數據5</li>
</ul> -->
    </ul>
</body>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
<script type="text/javascript">
    $('.list').load('test.html ul li',function () {
        console.log("載入完成")
    })
</script>
</html>

2、jQuery.ajax(url, [settings])：通過HTTP請求載入遠程數據，返回其創建的XHR對象。

url：請求地址，settings也有url配置選項，如果同時設置，則以外面的url為基準。如果都不設置，則預設請求的是當前發起請求的頁面。

settings配置選項：

dataType：支持的數據類型：xml，html、json、jsonp、script、text。

text和xml類型返回的數據不會經過處理。數據僅僅將簡單的XHR的responseText和responseXML屬性傳遞給success回調函數。
script類型：jquery會先執行伺服器端生成的JS代碼，然後將腳本作為一個文本數據返回。
jsonp類型：會創建一個查詢字元串參數callback=?，這個參數會加在請求的URL後面。
xml類型：返回XML文檔，可用jquery處理。
html類型：返回純文本HTML信息，包含的script標簽會在插入DOM時執行。
json類型：返回JSON數據。
text類型：返回純文本字元串。

async：Boolean類型。預設為true（非同步）。

contentType：string類型。預設為application/x-www-form-urlencoded，發送信息至伺服器時內容編碼類型。

context：object類型。這個對象用於設置AJAX相關回調函數的上下文，也就是說，讓回調函數內部的this指向這個對象。

timeout：設置請求超時時間（毫秒）。

type：請求方式（GET或POST），預設為GET。

url：預設當前頁地址，發送請求的地址。

data：object/string類型。發送到伺服器的數據。

jsonp：string類型。在一個jsonp請求中重寫回調函數的名字。這個值用來替代”callback=?”中的callback部分。

jsonpCallback：string類型。為jsonp請求指定一個回調函數名。這個值用來取代jQuery自動生成的隨機函數名。

statusCode：map類型。一組數值的HTTP代碼和函數對象，當響應時調用相應的代碼。

回調函數：

beforeSend：在發送請求之前調用，並且傳入XHR作為參數。

error：在請求出錯時調用。傳入XHR對象，描述錯誤類型的字元串，以及異常對象（如果存在的話）。

dataFilter：在請求成功後調用，傳入返回的數據以及dataType參數的值，並且必須返回新的數據給success回調函數。

success：當請求成功之後調用，傳入返回後的數據，以及包含成功代碼的字元串。

complete：當請求完成後調用這個函數，無論成功或失敗。傳入XHR對象，以及包含成功或錯誤代碼的字元串。

beforeSend：function(xhr, ajax){}

dataFilter：function (data, dataType){}

success：function(data, sInfo, xhr){}

complete：function(xhr, sInfo){}

error：function(xhr, sInfo[, exception]){}

成功執行順序：beforeSend、dataFilter、success、complete

失敗執行順序：beforeSend、error、complete

ajax普通請求：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jq.ajax方法</title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        .container{
            border: 1px solid #eeeeee;
            margin: 100px auto 0;
            width: 500px;
            overflow: hidden;
        }
        .box{
            width: 300px;
            height: 40px;
            border: 1px solid #f4f4f4;
            line-height: 40px;
            margin: 10px auto;
            overflow: hidden;
        }
        .box label{
            width: 60px;
            text-align: center;
            display: inline-block;
        }
        .box i