（四）DOM对象和jQuery对象

学习jQuery，需要搞清楚DOM对象和jQuery对象的关系与区别，因为两者的方法并不共用，如果搞不清楚对象类型就会导致调用错误的方法。

DOM（Document Object Model）称为文档对象模型，每一份DOM对象都可以表示成一棵树。

<body>
     <h2>这里是标题</h2>
     <p>dom结构的解说</p>
     <ul>
         <li>aaaaa</li>
         <li>sssss</li>
         <li>ddddd</li>
         <li>fffff</li>
     </ul>
     <div id="div1">hello world!</div>
 </body>

上面代码中的<h2>、<p>、<ul>、<li>等都是DOM元素节点。可以通过javascript中的getElementById或getElementsByTagName方法来获取DOM对象的元素节点，像这样得到的DOM元素就是DOM对象，DOM对象可使用javascript中的方法。

 

jQuery对象就是通过jQuery包装DOM对象后产生的对象，jQuery对象是jQuery里独有的对象，它可以调用jQuery方法，比如:

document.getElementById("div1").innerHTML;

和下面方法功能是相同的

$("#div1").html();

但是两种对象只能调用各自方法，一旦混用就是错误的。

但是两种对象可以相互转换，DOM对象转换成jQuery对象时只需要用$()将对象包装起来即可。

jQuery对象转换成DOM对象是有两种方式：

　　第一种是将jQuery对象看成一个数组，然后取数组第一个元素便是DOM对象；

　　第二种是jQuery提供的get(index)方法可以取出DOM对象。例如：

var div=doucment.getElementById("div1");
var div01=$(div);  //DOM对象转换成jQuery对象
var div02=div01[0];   //jQuery对象转换成DOM对象
var div03=div01.get[0];  //jQuery对象转换成DOM对象

除了div01之外都是DOM对象。在写页面控制时只有灵活运用DOM对象和jQuery对象才能够写出灵活美观的页面。

 

 

更多关于DOM对象的讲解：

http://www.cnblogs.com/yerenyuan/p/5397919.html

http://www.cnblogs.com/polk6/p/4957563.html

 

posted @ 2017-03-08 17:27  红妆满面  阅读(140)  评论(0)  编辑  收藏  举报