jQuery DOM 互轉

jQuery對象與DOM對象是不同的

經過一個簡單的例子，簡單區分下jQuery對象與DOM對象：

<p id=」imooc」></p>

咱們要獲取頁面上這個id爲imooc的div元素，而後給這個文本節點增長一段文字：「hello,world」，而且讓文字顏色變成紅色。

經過標準JavaScript處理：

var p = document.getElementById('imooc');
p.innerHTML = 'hello,world!';
p.style.color = 'red';

經過原生DOM模型提供的document.getElementById(「imooc」) 方法獲取的DOM元素就是DOM對象，經過DOM方法將本身的innerHTML與style屬性處理文本與顏色。

jQuery的處理：

var $p = $('#imooc');
$p.html('hello,world').css('color','red');

 

經過$('#imooc')方法會獲得一個$p的jQuery對象，$p是一個類數組的對象這個對象裏面實際上是包含了DOM對象的信息的而後封裝了不少操做方法，調用本身的方法html與css處理，獲得的效果與標準的JavaScript處理結果是一致的。

 

1.jQuery對象轉化成DOM對象

    jQuery庫本質上仍是JavaScript代碼，它只是對JavaScript語言進行包裝處理，爲了是提供更好更方便快捷的DOM處理與開發常見中常常使用的功能。咱們能夠用jQuery的同時也能混合JavaScript原生代碼一塊兒使用。經過jQuery生成的對象是一個作了包裝處理的對象，若是要用jQuery對象本身的方法，就須要知足這個對象是經過jQuery生成的。 在不少場景中，咱們須要jQuery與DOM可以相互的轉換，它們都是操做的DOM元素，jQuery是一個類數組對象，DOM對象就是一個單獨的DOM元素。

如何把jQuery對象轉成DOM對象？

利用數組下標的方式讀取到jQuery中的DOM對象

HTML代碼

<div>元素一</div><div>元素二</div><div>元素三</div>

 

JavaScript代碼

var $div = $('div') //jQuery對象
var div = $div[0] //轉化成DOM對象
div.style.color = 'red' //操做dom對象的屬性

用jQuery找到全部的div元素（3個），由於jQuery 對象也是一個數組結構，能夠經過數組下標索引找到第一個div元素，經過返回的div對象而後調用它style屬性然修改第一個div元素的顏色。這裏須要注意的一點是，數組的索引是從0開始的，也就是第一個元素下標是0

經過jQuery自帶的get()方法

jQuery對象自身提供一個.get() 方法容許咱們直接訪問jQuery對象中相關的DOM節點，get方法中提供一個元素的索引：

var $div = $('div') //jQuery對象
var div = $div.get(0) //經過get方法，轉化成DOM對象
div.style.color = 'red' //操做dom對象的屬性

其實咱們翻開源碼，看看就知道了，get方法就是利用的第一種方式處理的，只是包裝成一個get讓開發者更直接方便的使用。

2.DOM對象轉化成jQuery對象

相比較jQuery轉化成DOM，開發中更多的狀況是把一個dom對象加工成jQuery對象。$(參數)是一個多功能的方法，經過傳遞不一樣的參數而產生不一樣的做用。

若是傳遞給$(DOM)函數的參數是一個DOM對象，jQuery方法會把這個DOM對象給包裝成一個新的jQuery對象

經過$(dom)方法將普通的dom對象加工成jQuery對象以後，咱們就能夠調用jQuery的方法了

HTML代碼

<div>元素一</div><div>元素二</div><div>元素三</div>

 

JavaScript代碼

var div = document.getElementsByTagName('div'); //dom對象
var $div = $(div); //jQuery對象
var $first = $div.first(); //找到第一個div元素
$first.css('color', 'red'); //給第一個元素設置顏色

經過getElementsByTagName獲取到全部div節點的元素，結果是一個dom合集對象，不過這個對象是一個數組合集(3個div元素)。經過$(div)方法轉化成jQuery對象，經過調用jQuery對象中的first與css方法查找第一個元素而且改變其顏色。