原生JS DOM對象與jQuery對象的區別、聯繫、相互轉換

你們好!咱們以前講了一些關於原生JS的一些操做,今天咱們來說一下原生JS DOM對象與jQuery對象的區別、聯繫、相互轉換.

Dom原生對象和jQuery對象的區別:

jQuery選擇器獲得的jQuery對象和標準的js中的document.getElementById()取得的dom對象是兩種不一樣類型,二者不等價.

注:js原生獲取的dom是一個對象,jQuery對象就是一個數組對象,其實就是選擇出來的元素的數組集合.因此說他們二者是不一樣的對象類型不等價.

jQuery沒法使用DOM對象的任何 方法,同理Dom對象也不能使用jQuery裏的方法.亂使用會報錯.

例:

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

document.getElementById("id").innerHTML;

意思是指:獲取ID名爲id的元素內的html代碼.這兩段代碼結果相同,中間的取值過程不一樣.

即:$("#id").innerHTML、document.getElementById("id").html()之類的寫法都是錯誤的.

注:jQuery是從js衍生出來的,師處同源,可是jQuery是通過一系列操做以後,將其封裝成了一個個不一樣的方法,學習jQuery開始就應當樹立正確的觀念,以後學習jQuery就會輕鬆不少的.

js-dom對象和jQuery對象相互轉換:

jQuery對象轉換成DOM對象--兩種轉換方式:[index]和.get(index)

1.jQuery對象是一個數據對象,經過[index]的方法(就是經過下標索引尋找dom,進行操做)

　　如:var $a = $("#a");   //jQuery對象

　　var a = $a[0]; //DOM對象

　　alert(a.checked)//檢測這個checkbox是否被選中.

二、jQuery自己提供,經過.get(index)方法

　　如:var $a = $("#a");//jQuery對象

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

alert(v.checked)//檢測這個checkbox是否被選中

注:其實二者都是同一個道理即經過索引下標的方式,來尋找dom進行轉換.

DOM對象轉換成jQuery對象:對於DOM對象,只須要用$()把DOM對象包裝起來,就可獲得jQuery對象

　　如:var a = document.getElementById("v");//DOM對象

　　var $a=$(a);//jQuery對象

總之,框架之類的東西都是封裝好了的一個個函數,中間會經歷一些操做中間的取值過程也是不一樣,因此咱們寫代碼的時候儘可能使用同一種方式來寫,不能混合使用,大概就是這個樣子.