JQuery对象与DOM对象
先把對象放一邊，我們先來試著實現一個最簡單的小程序，在div中寫入：”您好！好好學習jQuery才是最正確選擇“這段文字。想像一下，如果是你你會怎么寫？
<html> <head><meta charset="utf-8"/><title>第一個簡單的jQuery程序</title><style type="text/css">div{padding:8px 0px;font-size:12px;text-align:center;border:solid 1px #888;}</style><script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script><script type="text/javascript">$(document).ready(function() {$('div').html("您好！好好學習jQuery才是最正確選擇 ")});</script> </head> <body><div></div> </body> </html>上面的小程序實現在了iv中寫入：”您好！好好學習jQuery才是最正確選擇“這段文字。跟你想像的是不是有差距呢？是不是很簡潔？不錯，這就是JQuery的魅力。解析如下：
$(document).ready 的意思是等頁面的文檔（document）中的節點都加載完畢后，在執行后續的代碼，因為我們在執行代碼的時候，可能會依賴頁面的某一個元素，我們要確保這個元素真正的的被加載完畢后才能正確的使用。
jQuery對象與DOM對象
<p id=”imooc”></p>我們要獲取頁面上這個id為imooc的div元素，然后給這個文本節點增加一段文字：“您好！學習jQuery才是最佳的途徑”，并且讓文字顏色變成紅色。
下面代碼是分別使用原生JS和JQuery實現的，比較兩者的不同。
原生JS處理方式：
通過原生DOM模型提供的document.getElementById(“imooc”) 方法獲取的DOM元素就是DOM對象，通過DOM方法將自己的innerHTML與style屬性處理文本與顏色。
JQuery處理方式：
通過('#imooc')方法會得到一個p的jQuery對象，$p是一個類數組的對象這個對象里面其實是包含了DOM對象的信息的然后封裝了很多操作方法，調用自己的方法html與css處理，得到的效果與標準的JavaScript處理結果是一致的。
通過標準的JavaScript操作DOM與jQuyer操作DOM的對比，我們不難發現：
1.通過jQuery方法包裝后的對象，是jQuery對象，它是一個新的對象
2.jQuery與DOM對象完全不是同一個東西，但是又似曾相似，因為他們都能處理DOM
3.通過jQuery處理DOM的操作，可以讓開發者更專注業務邏輯的開發，而不需要我們具體知道哪個DOM節點有那些方法，也不需要關心不同瀏覽器的兼容問題，我們可以通過jQuery更友好的API進行開發，同時代碼也會更加精短
jQuery對象轉化成象DOM對象
jQuery庫本質上還是JavaScript代碼，它只是對JavaScript語言進行包裝處理，為了是提供更好更方便快捷的DOM處理與開發常見中經常使用的功能。我們可以用jQuery的同時也能混合JavaScript原生代碼一起使用。通過jQuery生成的對象是一個做了包裝處理的對象，如果要用jQuery對象自己的方法，就需要滿足這個對象是通過jQuery生成的。 在很多場景中，我們需要jQuery與DOM能夠相互的轉換，它們都是操作的DOM元素，jQuery是一個類數組對象，DOM對象就是一個
如何把jQuery對象轉成DOM對象呢？
下面通過一個獲取數組下標的例子來幫助我們理解獲取JQue中的DOM對象。
<!DOCTYPE html> <html><head><meta http-equiv="Content-type" content="text/html; charset=utf-8" /><title></title><script src="http://code.jquery.com/jquery-1.11.3.js"></script> </head><body><div>元素一</div><div>元素二</div><div>元素三</div><script type="text/javascript">var $div = $('div'); //jQuery對象div = $div[0];//換成DOM對象div.style.color = 'red'; //操作dom對象的屬性</script><script type="text/javascript">var $div = $('div'); //jQuery對象div = $div.get(0);//get方法轉換成DOM對象div.style.color = 'red'; //操作dom對象的屬性</script></body></html>上面代碼采用了兩種方式將JQuery轉換成DOM對象，分別是div = div[0];和get()方法。第一種遍歷數組:div=div[0];解析如下：
用jQuery找到所有的div元素（3個），因為jQuery 對象也是一個數組結構，可以通過數組下標索引找到第一個div元素，通過返回的div對象然后調用它style屬性然修改第一個div元素的顏色。這里需要注意的一點是，數組的索引是從0開始的，也就是第一個元素下標是0.
第二種使用get()方法解析如下：
jQuery對象自身提供一個.get() 方法允許我們直接訪問jQuery對象中相關的DOM節點，get方法中提供一個元素的索引:div = $div.get(0);
其實我們翻開源碼，看看就知道了，get方法就是利用的第一種方式處理的，只是包裝成一個get讓開發者更直接方便的使用。
DOM對象轉化成象jQuery對象
相比較jQuery轉化成DOM，開發中更多的情況是把一個dom對象加工成jQuery對象。$(參數)是一個多功能的方法，通過傳遞不同的參數而產生不同的作用。
如果傳遞給$(DOM)函數的參數是一個DOM對象，jQuery方法會把這個DOM對象給包裝成一個新的jQuery對象
通過$(dom)方法將普通的dom對象加工成jQuery對象之后，我們就可以調用jQuery的方法了這樣可以很好的實現JQuery的作用。
<!DOCTYPE html> <html><head><meta http-equiv="Content-type" content="text/html; charset=utf-8" /><title></title><script src="http://code.jquery.com/jquery-1.11.3.js"></script> </head><body> <div>元素一</div> <div>元素二</div> <div>元素三</div><script type="text/javascript">var div = document.getElementsByTagName('div'); //dom對象//將dom節點div轉化為$div的jquery對象$div = $(div);var $first = $div.first(); //找到第一個div元素$first.css('color', 'red'); //給第一個元素設置顏色</script>通過getElementsByTagName獲取到所有div節點的元素，結果是一個dom合集對象，不過這個對象是一個數組合集(3個div元素)。通過$(div)方法轉化成jQuery對象，通過調用jQuery對象中的first與css方法查找第一個元素并且改變其顏色。
創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎總結
以上是生活随笔為你收集整理的JQuery对象与DOM对象的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 韩剧tv极简版怎么用QQ登陆
- 下一篇： JQuery中的ID选择器