首頁 >web前端 >js教程 >簡述Jquery與DOM對象_jquery

簡述Jquery與DOM對象_jquery

WBOY
WBOY原創
2016-05-16 15:50:501768瀏覽

在第一次學習jquery中,常常會無法分辨DOM對象和Jquery對象,下面我們就簡訴一下它們之間的關係和區別

1.DOM物件(Document Object Model)

文檔物件模型,每份DOM都可表示為一棵樹,例如下面是一個簡單的網頁程式碼:

表示為DOM為:

我們可以透過JS中的getelementsByTayName或getelementsByTayId來取得樹中的節點,像這樣取得的元素就是DOM對象,DOM可以使用JS中方法,例如:

複製程式碼 程式碼如下:
var domobj=  🎜> //var objhtml=domobj.innerHTML;                            2.2

2.Jquery物件

Jquery對象就是透過Jquery包裝DOM對象後產生的對象,他是Jquery獨有的,可以呼叫jquery中的方法,例如:


$("#foo").HTML();
Jquery物件不能呼叫DOM物件的任何方法,例如:


複製程式碼 程式碼如下:
$("#foo                                     

3.DOM物件與Jquery物件之間的相互轉換


我們在轉換他們之前,必須先規定定義變數的風格,如定義個Jquery物件時,加上一個$符號,例如:


 var $obj=Jquery对象
定義DOM對象時,則不需要添加任何符號,這樣可以幫助我們區分變數是什麼對象,提高程式碼的可讀性,例如:


var domobj=DOM对象
當Jquery類別庫中沒有我們想要的方法或者我們對Jquery的方法不太清楚時,我們就可以轉化為DOM對象,有2種方法將Jquery對象轉化為DOM對象----[index ]/get(index),
(1)jquery對像是數組對象,透過[index]得到一個DOM對象,程式碼如下:



var $obj=$("#sc");
var obj=$obj[0];
alter(obj.checked);
(2)另一種方法是Jquery自己提供的,透過get(index)取得到DOM對象,例如:


var $obj=$("#sc");
var obj=$obj.get(0);
alter(obj.checked);

4.DOM物件轉換為Jquery物件


DOM對像只需要透過$(),就可以轉換為一個Jquery對象,例如:


var obj=document.getelementsByTayName("Name");
var $obj=$(obj);
以上所述就是本文的全部內容了,希望大家能夠喜歡。
陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn