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代码:
- <input type="checkbox" id="cr"/><label for="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