首頁 > web前端 > js教程 > jquery物件與dom物件的差異有哪些?

jquery物件與dom物件的差異有哪些?

青灯夜游
發布: 2020-12-01 10:07:20
原創
3452 人瀏覽過

區別:jQuery物件是使用jQuery類別函式庫的選擇器所獲得的對象,它是jQuery獨有的,可以使用jQuery裡的方法,但無法使用DOM物件的任何方法;DOM物件是使用javascript方法獲得的對象,DOM對像不能使用jQuery方法。

jquery物件與dom物件的差異有哪些?

相關推薦:《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中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板