jQuery物件和DOM物件的關係
阿新 • • 發佈:2019-02-19
$('form')[0]= fm
jquery --> Dom
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="jquery-1.12.4.min.js"></script> <script> $(document).ready(function () { // 1 基本概念: // DOM物件:通過DOM的方式獲取的頁面元素。 // jQuery物件:通過jQuery方式獲取的頁面元素。 // 2 DOM物件和jQuery物件的關係: // 我們發現jQuery物件是偽陣列形式,內部儲存了DOM物件, // 所以我們稱jQuery物件是DOM物件的包裝集。 var box = document.getElementById('box'); var $box = $('div'); // 通過觀察我們看到jQuery物件是一個數組結構,但實際上是偽陣列形式,js高階部分進行說明。 console.dir(box); console.log($box); // 3 功能區別: // DOM物件只能使用DOM功能,jQuery物件只能使用jQuery功能。 // box.text('這是box'); // $box.innerHTML = '這是新內容'; // 4 轉換方式: // 4.1 轉換為jQuery物件:將DOM物件傳入到$()中 // $(box).text('這是新內容'); // 4.2 轉換為DOM物件: // - 按照索引取值(推薦) // $box[0].innerHTML = '這是新內容2'; // - 使用get方法,傳入索引值。 // $box.get(0).innerHTML = '這是新內容3'; }); </script> </head> <body> <div id="box">這是box</div> <div></div> <div></div> </body> </html>