JQuery應用例項學習 —— 19 JQuery物件與DOM物件的關係與轉換
阿新 • • 發佈：2018-12-11
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <h1>jquery物件與DOM物件的關係與轉換</h1> <ul> <li>導航1</li> <li>導航2</li> <li>導航3</li> <li>導航4</li> </ul> <p id="test">test</p> </body> <script src="jquery.js"></script> <script> // 選擇器找到了test才能改背景 // 下面一行,充分證明$(選擇器)返回值不是DOM物件 $('#test').style.background = 'blue'; // 下面二行, 充分證明, DOM物件 ,也不是 $()的返回值. var test = document.getElementById('test'); test.css('background' , 'blue'); // $()返回的到底是什麼? 是物件,但不是DOM物件,而是jQuery物件 /* jquery物件與DOM物件有什麼關係? 答: jQuery按選擇器,選中1個或多個DOM物件, 把這些DOM物件,放在jQuery物件上, 索引分別是 0 1 2 3 ...N */ console.log($('li')); // 找到0123依次的4個li物件 // jquery物件轉化為DOM物件, 直接[索引] 取值即可 $('li')[2].style.background = 'blue'; // 第三個li標籤物件 // 也可以用get(索引)方法 $('li').get(3).style.background = 'green'; // 第四個li標籤物件 // DOM物件,轉化為 jquery物件, 直接把DOM物件,傳給$() $(test).css('background','orange'); // $('xxx')找xxx標籤 $(xxx)找xxxjQuery物件 var lis = document.getElementsByTagName('li'); // ByTagName會找到4個li console.log($(lis)); // 會把4個DOM物件找出來放到他內部 </script> </html>