jQuery DOM對象區別與聯絡

標籤：java   沒有   寫法   對象   inner   擷取   div   轉換   兩種   

對兩種物件類型的定義，只要能理解並轉換成自己的說法就可以，不用死板按照資料所寫

jQuery對象（jq對象）其實就是通過jquery類庫選取器獲得的對象（或者說是通過$擷取的對象或者說是通過jquery封裝dom對象後產生的對象（可參照下面的對象轉換理解））；

　　jquery對象是jquery專屬，可以使用jquery裡面的方法，但不能使用dom的方法；

樣本：

　　$("#img").attr("src", "test.jpg");其中$("#img")就是jquery對象；

DOM對象（js對象）就是通過傳統方法（javascript）獲得的對象或者說是javascript固有的一些對象操作或者說是通過document獲得的對象；

　　DOM對象能使用javascript固有的方法，但不能使用jquery裡面的方法；

樣本：

　　document.getElementById("img").src = “test.jpg"；其中document.getElementById("img")就是DOM對象；

需要注意的是：$("#img").attr("src", "test.jpg")和document.getElementById("img").src = “test.jpg"效果是一樣的，

但是document.getElementById("img").attr("src", "test.jpg") 或者$("#img").src = “test.jpg"是錯誤的；不要混淆一點是，同一個javascript指令碼裡面可以同時出現jq對象或者js對象，只是沒有轉換對象是不能互相調用不是自己對象的方法；

還有一種情況，就是this的使用，很多人在寫jquery時經常這樣寫：this.attr("src","test.jpg")；可是就是出錯，那是因為this是dom對象，而.attr("src","test.jpg")是jquery方法，當然出錯；

如果要解決這個問題，只需將dom對象轉成jquery對象，如：$(this).attr("src","test.jpg");

 

下面就談談jq對象、js對象的轉換及使用

以前我一直認為jquery的$("#id")和document.getElementById("id")得到的結果是一樣的，其實不然，可以做如下測試：

1、alert($("#div"))彈出[object Object]

2、alert(document.getElementById("div"))彈出[object HTMLDivElement]

3、alert($("#div")[0])或者alert($("#div").get(0))彈出[object HTMLDivElement]

 

1、DOM對象轉jquery對象

對於已經是一個dom對象，只需要用$()把dom對象封裝起來即可，如：$(dom對象)

樣本：

　　var obj=document.getElementById("id");　　 //dom對象
　　var $obj = $(obj);　　 //轉換成jquery對象

2、jquery對象轉dom對象

有兩種方式（通過索引）：[index] 和 .get(index)；

1）jquery對象是一個數組對象，可以通過[index]方法得到相應dom對象

樣本：

　　var $obj=$("#id");　　 //jquery對象
　　var obj = $obj[0]; 　　//dom對象 也可寫成 var obj=$obj.get(0);

2）jquery本身提供，通過.get(index)方法得到相應的dom對象

樣本：

　　var $obj=$("#id");　　 //jquery對象

　　var obj = $obj.get(0); 　　//dom對象 也可寫成 var obj=$obj[0];

再次強調一下：DOM對象只能能使用javascript固有的方法，但不能使用jquery裡面的方法；同時，jquery對象智能使用jquery的方法，不能使用dom對象方法；

另外以下幾種寫法都是正確的：

$("#id").html();

$("#id").get(0).innerHTML;

$("#id")[0].innerHTML;

 

jQuery DOM對象區別與聯絡