Dom對象和JQuery對象的詳細介紹及其區別

一直搞不清Dom對象和JQuery對象之間的區別，今天好好總結下

1.dom對象（摘抄自百度百科http://baike.baidu.com/link?url=4L8bZ7kW6kE-it4F-1LUIgaPhjuTTPIVJu9wZafjm-M7QJw5J8kkAWUpItGBb-eoEXK9-q8vwmz6funpAOfQsa）

DOM—Document Object Model,它是 W3C國際組織的一套Web標準。它定義了訪問HTML文檔對象的一套屬性、方法和事件。

DOM是以 層次結構組織的節點或信息片段的集合。 文檔對象模型（Document Object Model）是給HTML與XML文件使用的一組API。DOM的本質是創建網頁與 腳本語言或程序語言溝通的橋樑。

瀏覽器對象是一個 分層結構，也稱爲 文檔對象模型

（1）打開網頁後，首先看到的是瀏覽器窗口，即頂層的window對象。

（2）其次，看到的是網頁文檔的內容，即document文檔。

（3）定位對象：

window.document.myform.text1

或

document.myform.text1

由於window 窗口對象是全部頁面的根對象，因此經常省略。

(4)地址對象location和歷史對象history，它他對應IE瀏覽器中的地址欄和前進/後退按鈕。

 

2.JQuery對象（摘抄自http://www.poluoluo.com/jzxy/201110/144577.html）
　　首先介紹 jQuery 的幾個核心函數，在 jQuery
中它們起着相當重要的做用，在實際的前端開發過程當中用到最多的也是它們。
① jQuery(elements)
　　將一個或多個DOM元素轉化爲jQuery對象。
　　這個函數也能夠接收XML文檔和Window對象（雖然它們不是DOM元素）做爲有效的參數。
　　返回值：jQuery 對象
　　參數
　　　　elements:　　用於封裝成 jQuery 對象的 DOM 元素

代碼示例

 

// 將當前頁面的背景色設爲黑色
jQuery(document.body).css( "background-color", "black" );

　　再看如下代碼
// 將當前頁面的背景色設爲黑色
$(document.body).css( "background-color",
"black" );
　　代碼也能夠正常運行，而且執行的效果跟前面的代碼一致；那麼這兒的 $ 和前面的 jQuery 標識符到底有什麼關係呢？

　　打開 jQuery 的源文件 jquery-1.3.2.js 發現如下代碼
jQuery = window.jQuery =
window.$ = function( selector, context ) {
// The jQuery object is actually
just the init constructor 'enhanced'
return new jQuery.fn.init( selector,
context );

原來 $ 與 jQuery 表明的是 jQuery 框架中同一個 function，使用 jQuery 和 $ 的效果是同樣的；實際上 jQuery 框架中採用
$ 來做爲 jQuery 方法的一個別名（更易於使用），因爲擔憂 $ 與其它 javascript 框架（好比 asp.net ajax）甚至我的代碼中的 $
標識符產生衝突，也能夠經過 jQuery.noConflict() 函數來移除 $ 與 jQuery 函數的關聯，這樣 $ 就不表明 jQuery
方法了，而是表明那個原始的 $ 對象了。

②、jQuery(expression,[context])
　　這個函數接收一個包含 CSS
選擇器的字符串，而後用這個字符串去匹配一組元素。
　　jQuery 的核心功能都是經過這個函數實現的。
jQuery中的一切都基於這個函數，或者說都是在以某種方式使用這個函數。這個函數最基本的用法就是向它傳遞一個表達式（一般由 CSS
選擇器組成），而後根據這個表達式來查找全部匹配的元素。
　　返回值：jQuery 對象
　　參數

　　　　expression:　　　用來查找 DOM 元素的字符串
　　　　context:　　　　 (可選) 做爲待查找的 DOM
元素集、文檔或 jQuery 對象，用於限定查找範圍

③、jQuery(html)
　　根據 HTML 字符串，動態建立由 jQuery 對象包裝的 DOM 元素。

　　返回值：jQuery 對象
　　參數
　　　　html:　　　　用於建立 DOM 元素的 HTML 字符串

 代碼以下:

// 將一個 jquery.com 的超連接元素加到頁面主體元素中
$("<a href=http://jquery.com/>jquery.com</a>").appendTo("body");

由上可知：jQuery 核心函數的返回值都是一個 jQuery 對象，經過對 jQuery 對象進行操做，能夠完成 javascript 編程中的大部分任務；那麼這個
jQuery 對象究竟是一個什麼對象呢？

 

 經過 doc[0]、doc[1] 能夠分別取出一個 DOM 對象，其它的則是一些 jQuery 對象特有的屬性和方法；實際上 jQuery 對象包裝了 DOM
對象，同時還包含了一些操做 DOM 元素的 jQuery 方法。
在使用 jQuery
的過程當中，大部分狀況下第一步工做同時也是最重要的一步工做，就是取得包裝了要操做 DOM 對象的 jQuery 對象；而後經過調用取得的 jQuery
對象的方法來完成對 DOM 對象的操做。

3.jQuery對象和DOM對象的互相轉換 在上面第一點說了，jquery對象和dom對象是不同的！好比jquery對象不能使用dom的方法，dom對象不能使用jquery方法，那假如我 jquery沒有封裝我要的方法，那能怎麼辦呢？ 這時咱們能夠將jquer對象轉換成dom對象 jquery對象轉換成 dom對象 jquery提供了兩種方法將一個jquery對象轉換成一個dom對象，即[index]和get(index)。可能有人會以爲奇怪，怎麼是用下標呢，沒錯，jquery對象就是一個數組對象. 下面代碼將演示一個jquery對象轉換成dom對象，再使用dom對象的方法 複製代碼 代碼以下: var $cr=$("#cr"); //jquery對象 var cr = $cr[0]; //dom對象 也可寫成 var cr=$cr.get(0); alert(cr.checked); //檢測這個checkbox是否給選中 dom對象轉換成jquery對象 對於一個dom對象，只須要用$()把dom對象包裝起來，就能夠得到一個jquery對象了，方法爲$(dom對象); 複製代碼 代碼以下: var cr=document.getElementById("cr"); //dom對象 var $cr = $(cr); //轉換成jquery對象 轉換後能夠任意使用jquery中的方法了. 經過以上的方法，能夠任意的相互轉換jquery對象和dom對象. 最後再次強調，dom對象才能使用dom中的方法，jquery對象不能夠使用dom中的方法，但 jquery對象提供了一套更加完善的工具用於操做dom,關於jquery的dom操做將在後面的文章進行詳細講解. ps: 平時用到的jquery對象都是經過$()函數製造出來的，$()函數就是一個jquery對象的製造工廠. 建議:若是獲取的對象是 jquery對象，那麼在變量前面加上$,這樣方便容易識別出哪些是jquery對象,例如: var $variable = jquery對象; 若是獲取的是dom對象，則定義以下: var variable = dom對象