JavaScript 對象、DOM對象、jquery對象的區別、轉換詳解

JavaScript 提供多個內建對象，比如 String、Date、Array 等等。
對象只是帶有屬性和方法的特殊資料類型。

訪問對象的屬性:

var message="Hello World!";var x=message.length;

建立 JavaScript 對象:

person=new Object();person.firstname="Bill";person.lastname="Gates";person.age=56;person.eyecolor="blue";

使用物件建構器:

function person(firstname,lastname,age,eyecolor){this.firstname=firstname;this.lastname=lastname;this.age=age;this.eyecolor=eyecolor;}

var myFather=new person("Bill","Gates",56,"blue");var myMother=new person("Steve","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個屬性
4個屬性分別是
jquery     當前的jquery架構版本號碼
length     指示該數組對象的元素個數
context    一般情況下都是指向HtmlDocument對象   
selector   傳遞進來的選取器內容  如：#yourId或.yourClass等

並且你的頁面中只有一個id為yourId的元素
那麼$("#yourId")[0]就是HtmlElement元素
與document.getElementById("yourId")擷取的元素是一樣的

簡單理解，就是jQuery建立的對象

jQuery對象就是通過jQuery封裝DOM對象後產生的對象。jQuery對象是jQuery專屬的，其可以使用jQuery裡的方法，但是不能使用DOM的方法

四、DOM對象和jquery對象的區別

var domObj = document.getElementById("id"); //DOM對象var $obj = $("#id"); //jQuery對象;

$(“#img”).attr(“src”,”test.jpg”); //這裡的$(“#img”)就是擷取jQuery對象；

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對象)

var v=document.getElementById(“v”);  //DOM對象var $v=$(v);    //jQuery對象

jQuery對象轉成DOM對象:

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

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

var $v =$(“#v”) ; //jQuery對象var v=$v[0];    //DOM對象alert(v.checked)   //檢測這個checkbox是否被選中

(2)jQuery本身提供，通過.get(index)方法，得到相應的DOM對象。

var $v=$(“#v”);  //jQuery對象var v=$v.get(0);   //DOM對象alert(v.checked)  //檢測這個checkbox是否被選中