Jquery的dom操做與原生dom的轉換

本片文章包含了

• jquery常見dom操做、
• q與原生dom對象的區別與轉換
• 僞數組對象的知識

若有錯誤，煩請指正。

增

如下方法共性：能夠一次添加多個內容，內容能夠是DOM對象、HTML string、 jQuery對象

建立元素

var obj = $('<div class="test"><p><span>Done</span></p></div>');

兩種方法能夠建立元素

1. 直接寫入html
2. 傳入一個原生dom

添加元素

append()

能夠傳入dom對象，html string，jq對象等等；傳到尾部；

appendTo()

與前者相比，主次不一樣；這裏是將孩子添加到某個父元素中；

prepend()

與append()類似，可是是傳入到頭部；

prependTo

主次關係同appendTo();

before()、after()

在對象前面/後面，與對象並列同級的位置插入內容，參數類型和append()相同；

insertBefore()、insertAfter()

與before()主次不一樣，把xx插入到xx前面；

刪

.remove()

能夠傳入一個選擇器進行過濾，刪除被選元素和全部自元素；

.empty()

刪除調用該方法的元素下全部子元素，調用元素自己不刪除；

包裹

.wrap()

爲調用這個api的對象包裹一層html結構；能夠傳入selector，element，jq對象，html string等等；

wrapAll()、wrapInner()

這兩個api是wrap()的延伸，前者將整個選取的對象包裹起來；後者在選取的對象內部套一層；

unwrap()

這個方法將移出元素的父元素。這能快速取消 .wrap()方法的效果。將匹配的元素（以及他們的同輩元素）DOM結構的上一層父元素剝離出去；

HTML相關

html()

可讀寫的api，即沒有參數時，可讀取元素的innerHTML，當傳遞了string參數，則修改元素的innerHTML。

$("p").html("Hello <b>world</b>!");

這種可讀寫的api是jquery的重要設計思想，後續會有不少相似的方法；

text()

可讀寫，操做dom的innerText；

val()

返回或設置元素值，處理input的value屬性值等；

jq與原生dom對象的區別與轉換

dom對象是咱們用原生js得到的對象，jQuery對象就是用jQuery的類庫選擇器得到的對象。jQuery對象是它自己獨有的，和原生對象不可混用，一樣，dom對象也不能夠混用jq對象的方法！

好比，如下兩行代碼的做用是相同的

$("#color").html();
document.getElementById("color").innerHTML;

$("#id").innerHTML; // 錯誤寫法

jq對象 > dom

jquery提供了兩個方法能夠實現jq對象轉換爲dom對象，即[index]和get(index)，由於jquery對象其實是僞數組對象！

var $cr = $("#cr"); //jquery對象
var cr = $cr[0]; //dom對象，也可寫成 var cr= $cr.get(0);
alert(cr.checked); //檢測這個checkbox是否給選中

dom對象 > jq對象

對於一個dom對象，只須要用$()把dom對象包裝起來，就能夠得到一個jquery對象了，方法爲$(dom對象); 複製代碼 代碼以下:

var cr = document.getElementById("cr"); //dom對象
var $cr = $(cr); //轉換成jquery對象

僞數組對象

咱們再進一步探討下jquery對象與dom對象的轉換的細節。

在jQuery的中有一個包裝集概念，包裝集就是用僞數組實現的。先看下正常的數組的定義及遍歷：

var arr = ['iceman' , 'mengzhe' , 'shoushou' , 'zhuzhu'];
for (var i = 0; i < arr.length; i++) {
    console.log(arr[i]);
}

執行結果依次輸出四個屬性，這是最爲正常的數組遍歷：用字面量的形式定義了一個數組，而且添加幾個簡單的字符串，以及遍歷輸出每一項，這個在JavaScript中是再正常不過了。那麼，什麼是僞數組呢？.... 就是用對象來模擬的！

var objArr = {
    0 : 'iceman',
    1 : 'mengzhe',
    2 : 'shoushou',
    3 : 'zhuzhu',
    length : 4
}
for (var i = 0; i < objArr.length; i++) {
    console.log($objArr[i]);
}

執行結果仍是依次輸出了四個屬性。

以上代碼中以對象字面量的形式定義了一個對象objArr，這個對象就用來模擬數組，即僞數組對象，在$arr中要假裝的數組項以數字0、一、2...爲鍵，值即是原數組的值。

js中獲取一個對象的屬性值可使用obj.prop或者obj['prop']，當對象字面量中鍵是以數字開頭的時候，用obj['prop']獲取值的時候能夠不加引號，即obj[prop]，在上面的實例中就是objArr[1]、objArr[2]、objArr[3]....

看到這裏有沒有一種很似曾相識的感受呢？ 前面說到，jQuery對象轉原生DOM對象的其中一種方式是：jQuery對象[0]，和以上的對象字面量中鍵是數字的形式是不很像呢？ 另外多說一句，jQuery對象.get(0)的內部使用的就是jQuery對象[0]來實現的。

僞數組驗證

jQuery使用選擇器獲取的對象會被包裝爲一個包裝集，該包裝集的內部實現就是使用僞數組對象： 經過打斷點的方式，用選擇器獲取的全部的確都封裝了一個僞數組對象。因此使用$divs[0]獲取的就是$divs對象中的鍵爲0的div元素，即第一個div元素。 用$divs[0]或get()獲取的是第一個，而且獲取的是原生的DOM對象，那麼若是用選擇器只獲取到了一個元素，那麼用$divs[0]獲取的就是該元素的原生DOM對象，這就是jQuery對象轉爲原生DOM對象。

有了上文的理解，原生DOM對象轉jQuery對象理解起來就簡單多了，$(原生DOM對象)的方式能夠將原生DOM對象轉爲jQuery對象，其實$是一個方法，原生的DOM對象傳入$方法中，該方法內部對原生DOM對象作進一步的加工， 使其成爲一個包裝集，即僞數組對象。