1. 程式人生 > >jQuery DOM對象區別與聯系

jQuery DOM對象區別與聯系

一點 混淆 innerhtml 測試 選擇 script ava style 問題

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

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對象區別與聯系