區別:jQuery物件是使用jQuery類別函式庫的選擇器所獲得的對象,它是jQuery獨有的,可以使用jQuery裡的方法,但無法使用DOM物件的任何方法;DOM物件是使用javascript方法獲得的對象,DOM對像不能使用jQuery方法。
相關推薦:《jQuery影片教學》
一、Dom物件、jQuery物件
1.1 Dom物件
##文件物件模型簡稱DOM,是W3C組織推薦的處理可擴充置標語言的標準程式介面。
DOM其實是以物件導向方式描述的文檔模型。 DOM定義了表示和修改文件所需的物件、這些物件的行為和屬性以及這些物件之間的關係。 - 透過DOM,可以存取所有的 HTML 元素,連同它們所包含的文字和屬性。可以對其中的內容進行修改和刪除,同時也可以建立新的元素。
- DOM 獨立於平台和程式語言。它可被任何程式語言諸如 Java、JavaScript 和 VBScript 使用。
- DOM對象,也就是我們用傳統的方法(javascript)所獲得的物件。
- DOM準確地說是對文檔物件的一種規範標準(文檔物件模型),標準只定義了屬性和方法行為。
-
1.2 jQuery物件
1)概述
jQuery物件其實是一個JavaScript的陣列,這個陣列物件包含125個方法和4個屬性
4個屬性分別是:
jquery 目前的jquery框架版本號- length 指示該陣列物件的元素個數.
-
context 一般情況下都是指向HtmlDocument物件.- selector 傳遞進來的選擇器內容
-
jquery物件就是透過jQuery包裝DOM物件後產生的物件。 jQuery物件是jQuery獨有的,其可以使用jQuery裡的方法,但是不能使用DOM的方法;反過來Dom物件也不能使用jquery的方法。
2)jQuery物件與js物件區別
jQuery物件屬於js的陣列- jQuery物件是透過jQuery包裝的DOM物件後產生的
-
jQuery物件不能使用DOM物件的方法和屬性- DOM物件不能使用jQuery物件的方法和屬性
-
3)jQuery物件和js物件之間的相互轉換
js轉jQuery物件$(js物件)- jQuery物件轉js物件
-
var doc2=$("#idDoc2")[0]; //转换jQuery对象为DOM对象
doc2.innerHTML="这是jQuery的第一个DOM对象"
//使用jQuery对象本身提供的get函数来返回指定集合位置的DOM对象
var doc2=$("#idDoc2").get(0);
doc2.innerHTML="这是jQuery的第二个DOM对象"
登入後複製
二、細說jQuery物件和DOM對象的區別與使用
2.1 jQuery對象和DOM對象
DOM對象,即是我們用傳統的方法(javascript)獲得的對象,jQuery物件即是用jQuery類別庫的選擇器所獲得的物件。
var domObj = document.getElementById("id"); //DOM对象
var $obj = $("#id"); //jQuery对象;
登入後複製
jQuery物件就是透過jQuery包裝DOM物件後產生的對象,它是jQuery獨有的。如果一個物件是jQuery對象,那麼就可以使用jQuery裡的方法。
$("#foo").html(); //获取id为foo的元素内的html代码,html()是jQuery特有的方法
登入後複製
等同於js中:
document.getElementById("foo").innerHTML;
登入後複製
注意:在jQuery物件中無法使用DOM物件的任何方法。
例如:
$("#id").innerHTML 和$("#id").checked之类的写法都是错误的
登入後複製
可以用
$("#id").html()和$("#id").attr ("checked")之类的 jQuery方法来代替。
登入後複製
同樣,DOM物件也不能使用jQuery方法。學習jQuery開始就應樹立正確的觀念,分辨jQuery物件和DOM物件之間的區別,之後學習 jQuery就會輕鬆很多的。
2.2 jQuery物件和DOM物件的互相轉換
#2.2.1 jquery物件轉換成dom物件
jquery提供了兩種方法將一個jquery物件轉換成一個dom對象,即[index]和get(index)。
可能有人會覺得奇怪,怎麼是用下標呢,沒錯,jquery物件就是一個陣列物件。
範例:
var $cr=$("#cr"); //jquery对象
var cr = $cr[0]; //dom对象 也可写成 var cr=$cr.get(0);
alert(cr.checked); //检测这个checkbox是否给选中
登入後複製
2.2.2 dom物件轉換成jquery物件
對於一個dom對象,只需要用$()把dom物件包裝起來,就可以得到一個jquery物件了,
方法為$(dom物件);
舉例:
var cr=document.getElementById("cr"); //dom对象
var $cr = $(cr); //转换成jquery对象
登入後複製
轉換後可以任意使用jquery中的方法了。
三、總結一下
dom物件才能使用dom中的方法,jquery物件不可以使用dom中的方法,但jquery物件提供了一套更加完善的工具用於操作dom。
平常用到的jquery物件都是透過$()函數製造出來的,$()函數就是一個jquery物件的製造工廠。
注意:
如果取得的物件是 jquery對象,那麼在變數前面加上$,這樣方便容易辨識出哪些是jquery物件。
範例:
var $variable = jquery对象;
登入後複製
如果取得的是dom對象,則定義如下:
var variable = dom对象
登入後複製
更多程式相關知識,請造訪:
程式設計影片 ! !
以上是jquery物件與dom物件的差異有哪些?的詳細內容。更多資訊請關注PHP中文網其他相關文章!