jQuery对象和DOM对象的区别

Posted 2021-01-12 lindablog

三、DOM对象和jQuery对象的区别
1、DOM对象（Document Object Model）文档对象模型

通过getElementsByTagName、getElementsById、getElementsByClassName方法得到的对象就是DOM对象

2、jQuery对象
」Query对象就是通过」Query包装DOM对象后产生的对象。
jQuery对象是jQuery独有的。如果一个对象是」Query对象，那么就可以使用jQuery里的方法。例如:

$("#foo").html();这段代码等同于：
document.getElementsById("foo").innerHTML();

注：1）在jQuery对象中无法使用DOM对象的任何方法。
       2）DOM对象无法使用jQuery对象中的任何方法。

3、DOM对象和jQuery对象相互转化
Var $variable = jQuery对象;（定义变量时前面加上$符号的就是jQuery对象）
Var variable = jQuery对象;

1）两种方法将一个jQue甲对象转换成DoM对象，即[index]和get(index)。

eg.

var $cr = $("#cr"); //jQuery对象
var cr = $cr[0]; //DOM对象
var cr = $cr.get[0]; //DOM对象

2）对于一个DOM对象，只需要用$()把DoM对象包装起来，就可以获得一个jQuery对象了。方式为$(DOM对象)。

var cr = document.getElementsById("cr"); //DOM对象
var $cr = $(cr); // $(DOM对象)得到一个jQuery对象
转换后可以任意使用jQuery对象中的方法。

实例：jQuery判断是否选中复选框

<input type="checkbox" id="cr" />
<label>我已经阅读了用户协议</label>

var $cr = $("#cr"); //jQuery对象
/* var cr = $cr[0]; //DOM对象*/
$cr.click (function(){
/* if(cr.checked){ //错误写法：cr.checked()
alert("DOM方式判断:复选框已选中！");
}*/
if($cr.is(":checked")){//返回值是boolean值
alert("jQuery方式判断:复选框已选中！");
}
});