dom对象与jQuery对象的区别（使用实例方法）

jQuery对象和DOM对象区别

A、dom对象是使用js脚本获取

var dom = document.getElementById("dom");

可以获得页面中id为dom的元素。

<h3>例子</h3>
<p title="选择你最喜欢的水果." >你最喜欢的水果是?</p>
<ul>
   <li>苹果</li>
   <li>橘子</li>
   <li>菠萝</li>
</ul>

在这棵DOM树中，<h3>、<p>、<ul>以及<ul>的3个<li>子节点都是DOM元素节点。

可以通过JavaScript中的getElementsByTagName或者getElementById来获取元素节点。像这样得到的DOM元素就是DOM对象。

B、通过jQuery选择器取得的DOM元素，是对DOM对象进行的一个包装，此时得到的就是jQuery对象。

var $jq = $("#jq");     //id页面中会只有一个元素，如果是p/div/h1/h2的html默认的标签元素，这时取出来的会是一个元素的集合。

所以说，jquery获得的是一个集合数据。

通过jquery的$()引用元素包括通过id、class、元素名以及元素的层级关系及dom或者xpath条件等方法，且返回的对象为jquery对 象（集合对象），不能直接调用dom定义的方法。

jQuery对象和DOM对象的转换

1、dom对象一般可以通过$()转换成jquery对象。

$(document.getElementById("msg"))则为jquery对象

2、由于jquery对象本身是一个集合。所以如果jquery对象要转换为dom对象则必须取出其中的某一项，一般可通过索引取出。
如：$("#jq")[0]，$("div").eq(1)[0]，$("div").get()[1]，$("td")[5]这些都是dom对象，可 以使用dom中的方法，但不能再使用Jquery的方法。

$("#jq").html();
$("#jq")[0].innerHTML;    //dom对象

$("div").eq(1).html;   //jQuery对象
$("#jq").eq(0)[0].innerHTML;   //dom对象
$("#jq").get(0).innerHTML;   //dom对象

上面由jQuery对象转化为dom对象，要注意的是eq返回的是jquery对象，get（n）和索引返回的是dom对象。

下面举个简单的例子，来加深对jQuery对象和DOM对象的理解。

有些论坛在用户注册的时候，必须先要同意论坛的规章制度，才可以进行下一步操作。如图 1-15是某个论坛的注册页面，用户必须选中页面下方的“同意并接受注册协议”复选框，否则不能提交。

编写一段简单的代码来实现这个功能。新建一个空白的页面，然后添加以下HTML代码：

<input type="checkbox" id="cr"/><label for="cr">我已经阅读了上面制度.</label>

然后分别使用js和jQuery编写Script部分。

通过$("#cr")获取到复选框元素，然后通过判断复选框是否被选中，来执行下一步操作。

首先，用DOM方式来判断复选框是否被选中，代码如下：

$(document).ready(function(){                  //等待dom元素加载完毕
       var $cr = $("#cr");                     //jQuery对象
       var cr = $cr[0];                        //DOM对象，或者$cr.get(0)
       $cr.click(function(){
              if(cr.checked){                  //DOM方式判断
                 alert("感谢你的支持!你可以继续操作!");
              }
       })
})

结果显示

换一种方式，使用jQuery中的方法来判断选项是否被选中，代码如下：

$(document).ready(function(){                   //等待dom元素加载完毕
       var $cr = $("#cr");                      //jQuery对象
       $cr.click(function(){
           if($cr.is(":checked")){              //jQuery方式判断
                 alert("感谢你的支持!你可以继续操作！");
           }
       })
})

上面的例子简单地演示了DOM对象和jQuery对象的不同，但最终效果是一样的。

注意：is(":checked")是jQuery中的方法，判断jQuery对象是否被选中，返回boolean值。