大家好!我們之前講了一些關於原生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是否被選中.
2、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對象
總之,框架之類的東西都是封裝好了的一個個函數,中間會經歷一些操作中間的取值過程也是不同,所以我們寫代碼的時候盡量使用同一種方式來寫,不能混合使用,大概就是這個樣子.