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>