jQuery 物件與 DOM 物件之間的轉(zhuǎn)換
jQuery轉(zhuǎn)換成DOM,開發(fā)中更多的情況是把一個dom物件加工成jQuery物件。 $(參數(shù))是一個多功能的方法,透過傳遞不同的參數(shù)而產(chǎn)生不同的作用。
透過$(dom)方法將普通的dom物件加工成jQuery物件之後,我們就可以呼叫jQuery的方法了
看如下程式碼:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>jQuery 對象 與DOM 對象的轉(zhuǎn)換</title> <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script> </head> <body> <div>元素一</div> <div>元素二</div> <div>元素三</div> <script type="text/javascript"> var div = document.getElementsByTagName('div'); //這是一個DOM 對象 var $div = $(div); //jQuery 對象 將dom節(jié)點div轉(zhuǎn)化為$div的jquery對象 var $first = $div.first(); //找到第一個div元素 $first.css('color', 'red'); //給第一個元素設(shè)置顏色 </script> </body> </html>
如何將jQuery 物件轉(zhuǎn)換成DOM物件
? ? jQuery函式庫本質(zhì)上還是JavaScript程式碼,它只是對JavaScript語言進行包裝處理,為的是提供更好更方便快捷的DOM處理與開發(fā)中經(jīng)常使用的功能。我們使用jQuery的同時也能混合JavaScript原生程式碼一起使用。在許多場景中,我們需要jQuery與DOM能夠相互的轉(zhuǎn)換,它們都是可以操作的DOM元素,jQuery是一個類別數(shù)組對象,而DOM對象就是一個單獨的DOM元素。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script> </head> <body> <div>元素一</div> <div>元素二</div> <div>元素三</div> <script type="text/javascript"> var $div = $('div'); //jquery對象 var div = $div[1]; //轉(zhuǎn)換成dom對象 div.style.color = "red";//對dom對象進行操作 </script> </body> </html>