1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 <div id = "box">div</div> 9 <div id = "box1">div1</div> 10 <div id = "box2">div2</div> 11 12 13 <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> 14 <script> 15 $(function(){ 16 17 //dom对象和jq对象的转换 18 //dom对象只能使用自身的js节点对象提供的方法， 不能使用jq对象的方法 19 //js对象只能使用jq对象的属性和方法， 不能使用dom对象的方法 20 21 //dom对象转换为jq对象 22 var box1 = document.getElementById("box1");//dom对象 23 var _box1 = $(box1); 24 console.log(box1);//[object HTMLDivElement]，dom对象 25 console.log(_box1);//[object Object], jq对象 26 27 //jq对象转换为DOM对象 28 var box2 = $("div"); 29 var _box2 = box2[2]; 30 console.log(_box2.innerHTML);//div2 31 }) 32 33 </script> 34 35 </body> 36 </html>