首頁 > web前端 > js教程 > 主體

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

高洛峰
發布: 2016-11-28 13:20:59
原創
1341 人瀏覽過

一、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是否被選 

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!