jQuery基礎--樣式篇（3）

1.jQuiery對象與DOM對象　　

　　對于剛剛接觸jQuery的初學者，我們要清楚認識一點：jQuery對象與DOM對象是不一樣的。可能一時半會分不清楚哪些是jQuery對象，哪些是DOM對象，下面重點介紹一下jQuery對象，以及兩者相互間的轉換。

　　下面舉一個簡單的例子：

<p id="cnblogs"></p>

?

　　使用原生的javascript處理：通過原生DOM模型提供的document.getElementById(“snblogs”) 方法獲取的DOM元素就是DOM對象，通過DOM方法將自己的innerHTML與style屬性處理文本與顏色。

var p = document.getElementById('snblogs');
p.innerHTML = '您好！通過博客園學習前端才是最佳的途徑';
p.style.color = 'red';

　　使用jQuery處理：通過$('#snblogs')方法會得到一個$p的jQuery對象，$p是一個類數組的對象這個對象里面其實是包含了DOM對象的信息的然后封裝了很多操作方法，調用自己的方法html與css處理，得到的效果與標準的JavaScript處理結果是一致的。

?

var $p = $('#cnblogs');
$p.html('您好！通過博客園學習前端才是最佳的途徑').css('color','red');

?

通過標準的JavaScript操作DOM與jQuyer操作DOM的對比，我們不難發現：

1. 通過jQuery方法包裝后的對象，是jQuery對象，它是一個新的對象.
2. jQuery與DOM對象完全不是同一個東西，但是又似曾相似，因為他們都能處理DOM.
3. 通過jQuery處理DOM的操作，可以讓開發者更專注業務邏輯的開發，而不需要我們具體知道哪個DOM節點有那些方法，也不需要關心不同瀏覽器的兼容問題，我們可以通過jQuery更友好的API進行開發，同時代碼也會更加精短.

?2.jQuery對象轉化為DOM對象

　　jQuery庫本質上還是JavaScript代碼，它只是對JavaScript語言進行包裝處理，為了是提供更好更方便快捷的DOM處理與開發常見中 經常使用的功能。我們可以用jQuery的同時也能混合JavaScript原生代碼一起使用。通過jQuery生成的對象是一個做了包裝處理的對象，如 果要用jQuery對象自己的方法，就需要滿足這個對象是通過jQuery生成的。?在很多場景中，我們需要jQuery與DOM能夠相互的轉換，它們都 是操作的DOM元素，jQuery是一個類數組對象，DOM對象就是一個單獨的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讓開發者更直接方便的使用。

3.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方法查找第一個元素并且改變其顏色。

?