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()的區別

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

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()區別

1、唯一的區別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轉原生 ( ***** )

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