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>