Jquery与Dom对象相互转化

Jquery与Dom对象相互转化

 

jQurey对象和DOM对象的相互转换

在讨论jQurey对象和DOM对象的相互转换之前，我们先约定定义变量的风格。如果我们获取的对象是jQuery对象，那么我们在变量前面加上$，例如：

var   $variable    =   jQuery 对象 ;

如果获取的是DOM对象，则定义如下：

var  variable     =   DOM对象;

本书中的例子均会以这种方式呈现，以方便读者阅读。

1. jQuery对象转成DOM对象

前面说了，jQuery对象不能使用DOM中的方法，但如果对jQuery对象所提供的方法不熟悉，或者jQuery没有封装想要的方法，这时不得不使用DOM对象的时候，该怎么办呢？

jQuery提供两种方式来将一个jQuery对象转换成DOM对象：[ index ]和get( index )。

(1) jQuery对象是一个数组对象，可以通过 [index] 的方式，来得到相应的 DOM 对象。

jQuery代码如下：

var   $cr    =    $("#cr");      // jQuery对象
var  cr     =    $cr[0];        // DOM对象
alert(cr.checked)              //检测这个checkbox是否被选中了

(2) 另一种方式是jQuery本身提供的，通过get(index) 方法，来得到相应的 DOM 对象。

jQuery代码如下：

var $cr    =     $("#cr");        // jQuery对象
var cr     =     $cr.get(0);      // DOM对象
alert(cr.checked)             //检测这个checkbox是否被选中了

2. DOM对象转成jQuery对象

对于已经是一个DOM对象的，只需要用$( ) 把 DOM对象包装起来，就可以获得一个如假包换的jQuery对象了。方式为 $( DOM对象)。

jQuery代码如下：

var cr   =  document.getElementById("cr");     //DOM对象
var $cr   =   $(cr);                            // jQuery 对象

转换后，就可以任意使用jQuery中的方法了。

通过以上提供的方法，我们可以任意的相互转换 jQuery对象和DOM对象。

最后再次强调下，DOM对象才能使用DOM中的方法，jQuery对象是不可以用DOM中的方法的，但jQuery对象提供了一套更加完善的工具用于操作DOM。。

注：我们所用的jQuery对象都是通过$()函数制造出来的，$()函数就是一个jQuery对象的制造工厂。

实例研究

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

大家应该都玩过论坛，有的论坛注册的时候，用户必须先要同意论坛的规章制度，才可以进行下一步操作，效果如图1-15所示。

（点击查看大图）图1-15 某论坛注册截图

这个是某论坛的注册页面，用户必须选中页面下方的"同意并接受注册协议"，否则不能注册。

做个简单的例子，来实现这个功能。新建一个空白的页面，然后添加如下HTML代码：

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

HTML代码初始效果如图1-16所示：

图1-16 初始化状态

然后编写JavaScript部分。前面说过了，没有特殊声明，jQuery库是默认导入的。

我们可以通过$("#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("感谢你的支持!你可以继续操作!");
           }
      })
})

实现上述代码后，选中"我已经阅读了上面制度"，效果如图1-17所示。

图1-17 选中选项后的效果图

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

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

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

From：

http://hi.baidu.com/jiang_yy_jiang/blog/item/27ab17c41974c7c738db49e4.html