jquery物件 與 document 物件的互為轉換關係
阿新 • • 發佈：2019-01-23
<script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> function t1() { var jtest = $('#test'); var dtest = document.getElementById('test'); jtest.css('background','blue'); /* alert(jtest.style.backgroundColor='blue'); // 不好使,可證明jquery物件不是DOM物件 alert(dtest.style.backgroundColor='blue'); */ } function t2() { var divs = $('div'); // 讓你從divs中選出中國對應的DOM物件,然後改變他的背景. alert(divs[1]); divs[1].style.backgroundColor='red'; } function t3() { var div0 = document.getElementsByTagName('div')[0]; // 選中第1個div div0.style.backgroundColor="red"; alert('轉換為jquery物件並改成藍色'); // 直接把DOM物件以引數形式傳給$方法就可以了. // 如何來理解jquery的$方法 // $方法是個包裝器, 能把給的引數包裝成jquery物件. // 如果給的字串,他會先當成選擇器,並根據選擇器選中DOM物件,並打包. // 如果給的直接是DOM物件, 直接打包. $(div0).css('background','blue'); } </script> <style type="text/css"> </style> </head> <body> <h1>jquery物件和DOM物件的關係</h1> <p id="test">隨便打點</p> <div>美國</div> <div>中國</div> <div>英國</div> <input type="button" value="選中test" onclick="t1();" /> <input type="button" value="jquery物件轉成DOM物件" onclick="t2();" /> <input type="button" value="DOM物件轉成jquery物件" onclick="t3();" /> </body>
$('#test') 這是一個jquery 物件 不過他是先把 document.getElementById('test') 這個dom物件 放入了 jquery 物件屬性裡面 放入的數序是從0開始
所以放進去的$('#test')[0] 就是存放 document.getElementById('test')
而document.getElementById('test') 要轉成jquery 物件 只需要把它作為引數傳入$() 就可以了~~