- 相比較jQuery轉化成DOM,開發中更多的情況是把一個dom對象加工成jQuery對象。$(參數)是一個多功能的方法,通過傳遞不同的參數而產生不同的作用。
如果傳遞給$(DOM)函數的參數是一個DOM對象,jQuery方法會把這個DOM對象給包裝成一個新的jQuery對象
通過$(dom)方法將普通的dom對象加工成jQuery對象之後,我們就可以調用jQuery的方法了
HTML代碼
<div>元素一</div> <div>元素二</div> <div>元素三</div>
JavaScript代碼
var div = document.getElementsByTagName('div'); //dom對象 var $div = $(div); //jQuery對象 var $first = $div.first(); //找到第一個div元素 $first.css('color', 'red'); //給第一個元素設置顏色
通過getElementsByTagName獲取到所有div節點的元素,結果是一個dom合集對象,不過這個對象是一個數組合集(3個div元素)。通過$(div)方法轉化成jQuery對象,通過調用jQuery對象中的first與css方法查找第一個元素並且改變其顏色。
- jQuery庫本質上還是JavaScript代碼,它只是對JavaScript語言進行包裝處理,爲了是提供更好更方便快捷的DOM處理與開發常見中經常使用的功能。我們可以用jQuery的同時也能混合JavaScript原生代碼一起使用。通過jQuery生成的對象是一個做了包裝處理的對象,如果要用jQuery對象自己的方法,就需要滿足這個對象是通過jQuery生成的。 在很多場景中,我們需要jQuery與DOM能夠相互的轉換,它們都是操作的DOM元素,jQuery是一個類數組對象,DOM對象就是一個單獨的DOM元素。
如何把jQuery對象轉成DOM對象?
利用數組下標的方式讀取到jQuery中的DOM對象
HTML代碼
<div>元素一</div> <div>元素二</div> <div>元素三</div>
JavaScript代碼
var $div = $('div') //jQuery對象 var div = $div[0] //轉化成DOM對象 div.style.color = 'red' //操作dom對象的屬性
用jQuery找到所有的div元素(3個),因爲jQuery 對象也是一個數組結構,可以通過數組下標索引找到第一個div元素,通過返回的div對象然後調用它style屬性然修改第一個div元素的顏色。這裏需要注意的一點是,數組的索引是從0開始的,也就是第一個元素下標是0
通過jQuery自帶的get()方法
jQuery對象自身提供一個.get() 方法允許我們直接訪問jQuery對象中相關的DOM節點,get方法中提供一個元素的索引:
var $div = $('div') //jQuery對象 var div = $div.get(0) //通過get方法,轉化成DOM對象 div.style.color = 'red' //操作dom對象的屬性
其實我們翻開源碼,看看就知道了,get方法就是利用的第一種方式處理的,只是包裝成一個get讓開發者更直接方便的使用。
eq:
jQuery對象轉化成DOM對象
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8"/> <title></title> <script src="http://code.jquery.com/jquery-1.11.3.js"></script> </head> <body> <div>元素一</div> <div>元素二</div> <div>元素三</div> <script type="text/javascript"> var $div = $('div:first'); //jQuery對象 var div = $('div').get(0); div.style.color = 'red'; //操作dom對象的屬性 $div.css("color", "red"); </script> </body> </html>
DOM對象轉化成jQuery對象
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8"/> <title></title> <script src="http://code.jquery.com/jquery-1.11.3.js"></script> </head> <body> <div>元素一</div> <div>元素二</div> <div>元素三</div> <script type="text/javascript"> var div = document.getElementsByTagName('div'); //dom對象 //將dom節點div轉化爲$div的jquery對象 // $div = ? $div = $(div); var $first = $div.first(); //找到第一個div元素 $first.css('color', 'red'); //給第一個元素設置顏色 </script> </body> </html>