一开始学jQuery就应当树立正确的观念,分清jQuery对象和DOM对象之间的区别,之后学习jQuery就会轻松很多。
在讨论jQuery对象和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对象的制造工厂。
实战演习:
有些社区论坛在注册新用户的时候,会让你先确定同意论坛的规章制度,否则不能进行下一步的操作。
写段简单的代码来实现这个功能。新建一个空白的页面,然后添加以下HTML代码:
<input type=”checkbox” id=”cr”/><label for=”cr”>我已经阅读了上面的制度。</label>
继续看javascript部分,导入jQuery库。
通过$(“#cr”)获取到复选框元素,然后通过判断复选框是否被选中,来执行下一步操作。
First,用DOM方式来判断复选框是否被选中,代码如下:
$(function(){
var $cr = $(“#cr”); //jQuery对象
var cr = $cr[0]; //DOM对象,或者$cr.get(0)
$cr.click(function(){
if(cr.checked){ //DOM方式判断
alert(“感谢你的支持,你可以继续下一步操作!”);
}
})
})
换一种方式,使用jQuery中的方法来判断选项是否被选中,代码如下:
$(function(){
var $cr = $(“#cr”); //jQuery对象
$cr.click(function(){
if($cr.is(“:checked”)){ //jQuery方式判断
alert(“感谢你的支持,你可以继续下一步操作!”);
};
})
})
上面的例子简单的演示了jQuery对象和DOM对象的不同,但最终效果是一样的。
注:is(“:checked”)是jQuery中的方法,判断jQuery对象是否被选中,返回boolean值。