JavaScript 物件、DOM物件、jquery物件的差異、轉換詳解

一、JavaScript 物件

JavaScript 提供多個內建對象，例如 String、Date、Array 等等。

物件只是帶有屬性和方法的特殊資料型別。

存取物件的屬性:

[javascript] 

var message="Hello World!";  

var x=message.length;  

 

var x=message.length;  

. Object();  

person.firstname="Bill";  

person.lastname="Gates";  

person.age=56;  

person.ecolor="blue"; :

[javascript] view plaincopy

function person(firstname,lastname,age,eyecolor)  

{  

🠟0

this.eyecolor=eyecolor;  

}  

[javascript] 

var myFather=new person("Bill","Gates",56,"blue"); 包

Jobs",48,"green");  

 

二、DOM物件

DOM實際上是以物件導向方式描述的文件模型。 DOM定義了表示和修改文件所需的物件、這些物件的行為和屬性以及這些物件之間的關係。

依據W3C DOM規範，DOM是HTML與XML的應用程式介面（API）。

透過 DOM，可以存取所有的 HTML 元素，連同它們所包含的文字和屬性。可以對其中的內容進行修改和刪除，同時也可以建立新的元素。

HTML DOM 獨立於平台和程式語言。它可被任何程式語言諸如 Java、JavaScript 和 VBScript 所使用。

DOM對象，也就是我們用傳統的方法(javascript)所得到的對象。

 

三、jQuery物件

jquery物件其實是一個javascript的陣列

這個陣列物件包含125個方法和4個屬性

指示該陣列物件的元素個數

context    一般情況下都是指向HtmlDocument物件  

selector   傳遞進來的選擇器內容 如：#yourId或.yourClass等

方法取得jquery對象，

且你的頁面中只有一個id為yourId的元素

那麼$("#yourId")[0]就是HtmlElement元素

與document.getElementById("yourId")取得的元素是一樣的

 

簡單理解，就是jQuery創建的物件

jQuery物件就是透過jQuery包裝DOM物件後產生的物件。 jQuery物件是jQuery獨有的，其可以使用jQuery裡的方法，但是不能使用DOM的方法

 

四、DOM物件和jquery物件的區別

[javascript] 

var 物件的區別

[javascript] 

var 物件的區別

[javascript] 

var domObget id"); //DOM物件 

var $obj = $("#id"); //jQuery物件;  

[javascript]  

$(“#img”).attr(“src”,”test

$(“#img”).attr(“src”,”test

$(“#img”).attr(“src”,”test

$(“#img”).attr(“src”,”test

$(“#img”).attr(“src”,”test

$(“#img”)。 .jpg”); //這裡的$(“#img”)就是取得jQuery物件； 

[javascript]  

document.getElementById(“img”).src=”test.jpg”;//這裡的document .getElementById(“img”)就是DOM物件； 

再說一個例子：就是this，我在寫jQuery的時候常常這樣寫：

this.attr(“src”,”test.jpg”);

可是就是出錯。其實this是DOM對象，而

.attr(“src”,”test.jpg”)

是jQuery方法，所以出錯了。要解決這個問題就要將DOM對象轉換成jQuery對象，例如：

$(this).attr(“src”,”test.jpg”);

 

五、DOM對象和jquery對象的轉換

DOM對象轉成jQuery對象:

對於已經是一個DOM對象，只需要用$()把DOM對象包裝起來，就可以獲得一個jQuery對象了。

方法：$(DOM物件)

[javascript] 

jQuery物件轉換為DOM物件:

兩種轉換方式將一個jQuery物件轉換成DOM物件：[index]和.get(index);

(1)jQuery物件是一個資料對象，可以透過[index]的方法，來得到對應的DOM物件。

[javascript]  

var $v =$(“#v”) ; //jQuery對象 

var v=$v[0];    //DOM對象 checkbox是否被選中 

 

(2)jQuery本身提供，透過.get(index)方法，得到對應的DOM物件。

[javascript] 

var $v=$(“#v”);  //jQuery對象 

var v=$v.get(0);   //DOM對象 

alert(v.checked)  

alert(v.checked)  

alert(v.checked)  

alert(v.checked)  

alert(v.checked)偵測這個checkbox是否被選