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

jQuery对象和DOM对象区别

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

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

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

例子
你最喜欢的水果是?

   
苹果
   
橘子
   
菠萝

在这棵DOM树中，

、

、

以及
的3个
• 子节点都是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代码：
  

  我已经阅读了上面制度.

  
  然后分别使用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值。