jQuery節點選擇、操做

jQuery skill

1. 避免複雜的選擇器操做,而採用find操做

   $("ul").find("li") > $("ul li")

2. 添加html形式的操做與元素形式的操做
   

最經常使用的jQuery節點選擇

• ​eq( index ) 匹配一組元素中的某一個元素 index 值從 0 開始
• find() 匹配元素集合中每一個元素的 後代 (必須填寫參數)
• closest() 得到匹配選擇器的第一個 祖先元素，從當前元素開始沿 DOM 樹向上（知足條件的最近的祖先節點元素當中、包括自身） 代替parent()
• children() 匹配元素集合中每一個元素的 子元素
• parent() 匹配元素集合中每一個元素的 父元素 、獲取全部祖先節點
• first() 將匹配元素集合縮減爲集合中的 第一個元素
• last() 將匹配元素集合縮減爲集合中的 最後一個元素
• slice( 1,3 ) 把匹配元素集合縮減爲指定的 指數範圍的子集 不包含結束位置( 需求不多 )

能夠添加篩選條件

find()和children()的區別?

1. find('ele') 方法在 DOM 樹中搜索這些元素的後代(子子孫孫)，並用匹配元素來構造一個新的 jQuery 對象。
2. children() 方法在DOM 樹中只遍歷一層(兒子)，並用匹配元素來構造一個新的 jQuery 對象。
3. find() 方法必須添加篩選條件。而children()則不是必須

點擊查找指定節點closest()

$('em').click(function(){
  $(this).closest('li').css('color','pink');
  // 最大的便利再與忽略告終構上的麻煩
})

first() == eq(0) == li:first-child

first() == eq(0) == li:first-child == li:first-of-type == div:nth-of-type(0)擴展數組的shift unshift

shift() == splice(0,1)

splice(n,m); 
方法做用：刪除數組中指定項
傳遞參數：從索引n開始（包含），m刪除的個數 
返回參數：刪除的內容
原有數組：改變 

unshift() == splice(0,0,x)

splice(n,0,x);
方法做用：向數組的中間的某個位置添加新的內容
傳遞參數：n添加的位置（索引），x新增長的內容（放在索引n以前）
返回參數：空數組
原有數組：改變 

last() == eq(-1) == li:last-child

last() == eq(-1) == li:last-child == li:last-of-type == li:nth-last-of-type(0)擴展數組的 push pop

push() == splice( Array.length,0,x ) == Array[Array.length] = x

pop() == splice( Array.length - 1,1 ) == Array.length -= 1;

jQuery slice(n,m)

jQuery slice(n,m) 擴展數組的 slice(n,m)

傳遞參數：從索引n開始（包含n），到索引m（不包含）

從已有的數組中返回指定的元素

slice() == slice(0) == concat() == splice(0) 把原有的數組克隆一份

建立節點

// JS
            var oLi = document.createElement('li');
            oLi.innerHTML = 'ntscshen';
            oLi.id = 'ntscshen';
            // 建立元素：document.createElement
            // 設置屬性：setAttribute
            // 添加文本：innerHTML

            // 加入文檔：appendChild
            // jQuery-01
            var $li = $('<li>');
            $li.html('ntscshen');
            $li.attr('id','ntscshen');
            // jQuery-02
            var $li = $('<li id="ntscshen">ntscshen</li>');


    var $body = $('body');
    $body.on('click', function() {
        //經過jQuery生成div元素節點
        var div = $("<div class='right'><div class='aaron'>動態建立DIV元素節點</div></div>")
        $body.append(div)
    })

添加節點

insertBefore() 在您指定的已有子節點以前插入新的子節點。

appendChild() 方法向節點添加最後一個子節點。

append()和appendTo()的區別

// append：這個操做與對指定的元素執行原生的appendChild方法，將它們添加到文檔中的狀況相似。
// appendTo：實際上，使用這個方法是顛倒了常規的$(A).append(B)的操做，即不是把B追加到A中，而是把A追加到B中。

var $li = $('<li id="li1">ntscshen</li>')
$('ul').append('$li'); // 後續操做的結果是ul
$li.appendTo('ul'); // 後續操做的結果是li

after()和before()適用多個參數添加

$(".test2").after('<p style="color:blue">after,在匹配元素以後增長</p>', '<p style="color:blue">多參數</p>','<span>ntscshen<span>')

insertAfter()和insertBefore()不支持多參數

DOM節點的刪除

remove() 刪除全部

// 刪除全部包括自身、包括綁定的事件及與該元素相關的jQuery數據。
$('div').remove();
$('p').remove(":contains(3)");// 添加過濾處理 包含3的選擇器刪除掉
// remove比empty好用的地方就是能夠傳遞一個選擇器表達式用來過濾將被移除的匹配元素集合，能夠選擇性的刪除指定的節點

empty() 清空內部元素

// 只會清空內部元素、不會清空其自身
    $("button").on('click', function() {
        //經過empty移除了當前div元素下的全部p元素
        //可是自己id=test的div元素沒有被刪除
        $("#test").empty()
    })

empty()和remove()的區別

// 一、清空 不包括自身
// 二、刪除 包括自身 提供一個篩選的表達式

detach()分離

// 從當前頁面中移除該元素，但保留這個元素的內存模型對象。
// 這個方法不會把匹配的元素從jQuery對象中刪除，於是能夠在未來再使用這些匹配的元素。與remove()不一樣的是，全部綁定的事件、附加的數據等都會保留下來。
// $("div").detach()這一句會移除對象，僅僅是顯示效果沒有了。可是內存中仍是存在的。當你append以後，又從新回到了文檔流中。就又顯示出來了。
detach方法是JQuery特有的，因此它只能處理經過JQuery的方法綁定的事件或者數據
    var p;
    $("#bt1").click(function() {
        if (!$("p").length) return; //去重
        //經過detach方法刪除元素
        //只是頁面不可見，可是這個節點仍是保存在內存中
        //數據與事件都不會丟失
        p = $("p").detach()
    });

    $("#bt2").click(function() {
        //把p元素在添加到頁面中
        //事件仍是存在
        $("body").append(p);
    });

detach()和remove()區別

一、惟一的區別detach()會移除對象、但僅僅是顯示效果沒有了。可是在內存中依然存在。當你append以後、再次回到文檔流中。它只能處理經過JQuery的方法綁定的事件或者數據

DOM節點的複製和替換

clone()

clone(); // 只克隆告終構，事件丟失 淺拷貝
clone(true); // 結構、事件與數據都克隆 深拷貝
// 默認行爲不會複製操做行爲(只會複製節點)
// 默認是剪切操做
// clone()方法時、在將它插入到文檔以前、咱們能夠修改克隆後元素或者元素內容。
$(this).clone().css('color','red');
clone()方法是jQuery擴展的、只能處理經過jQuery綁定的事件和數據

replaceWith()和replaceAll()

// 用提供的內容替換集合中全部匹配的元素而且返回被刪除元素的集合
$('p:eq(1)').replaceWith('<a style="color:red">ntscshen</a>');
$('<a style="color:red">ntscshen</a>').replaceAll('p:eq(1)');

jQuery索引

返回指定元素相對於其餘指定元素的 index 位置。

註釋：若是未找到元素，index() 將返回 -1。

<div><span>1</span></div>
    <div><span id="span1">2</span></div>
    <div><span>3</span></div>
        // 在全部span當中、#span1的索引值
        $('#span1').index('span');

jQuery遍歷

$('li').each(function(i,ele){
  console.log(i);
  console.log(ele);// 原生的元素
  // $(this) == $(ele);
    if(i == 2){
        return false;// 退出當前循環
    }
});

jQuery包裝對象（***** ）

wrap(); // 包裝
wrapAll(); // 總體包裝
wrapInner(); // 內部包裝
unwrap(); // 刪除包裝。至關於刪除父級元素、不包括body
$('span').wrap('<div>');// 在span元素上包裝一個div元素
$('span').wrapAll('<div>');// 把全部的span包裝在一塊兒

jQuery轉原生 ( ***** )

一、獲取內容的高度;(jQuery中沒有獲取內容高度的API)
$('#div').get(0).scrollHeight;
二、元素之間的比較
if(nowLi[0] == $('li').first()[0]){ // prevLi.length == 0
  console.log('ntscshen');
}