对于jQuery的初学者来说,经常分辨不清DOM对象和jQuery对象,本文简单说明两者的区别和两种对象相互转换的方法。如你已掌握可以略过,如文中有错误之处请您指正。
DOM对象
DOM对象对有HTML基础的人来说,并不陌生:DOM(Document Object Model)即文档对象模型,每一份DOM都可以表示成一棵树,如下基本网页:
可以将上面HTML结构描述为一颗DOM树:
head——meta、title
HTML——
body——h1、p、ul(li、li、li)
在这颗DOM树中,<h1>、<p>、<ul>和<ul>的三个<li>子节点都是DOM元素节点。可以通过JavaScript中的 getElementByTagName 或者 getElementById 来获取元素节点。像这样得到的DOM元素就是DOM对象。DOM对象可以用JavaScript中的方法:
var domObj = document.getElementById("id"); //获得DOM对象
var ObjHTML = domObj.innerHTML; //使用JavaScript中的方法——innerHTML
jQuery对象
jQuery对象就是通过jQuery包装DOM对象后产生的对象。
jQuery对象是jQuery独有的。如果一个对象是jQuery对象,那么就可以使用jQuery里的方法,例如:
$("#foo").html(); //获取id为foo的元素内的html代码
这段代码等同于:
document.getElementById("foo").innerHTML;
在jQuery对象中无法使用DOM对象的任何方法。如 $("#id").innerHTML 和$("#id").checked 之类的写法都是错误的,可以使用 $("#id").html() 和 $("#id").attr("checked") 之类的jQuery方法代替。同样,DOM对象也不能使用jQuery里的方法。例如:document.getElementById("id").html()也会报错,只能用 document.getElementById("id").innerHTML语句。
用 #id 作为选择符取得的是jQuery对象而并非document.getElementById("id")所得到的DOM对象,两者并不等价。
DOM对象转换为jQuery对象
对于一个DOM对象,只需要用 $() 把DOM对象包装起来,就可以获得一个jQuery对象了,方式为 $("DOM对象")。jQuery代码如下:
var cr = document.getElementById("cr"); //DOM对象
var $cr = $(cr); //jQuery对象
转换后,可以任意使用jQuery中的方法。
jQuery对象转换为DOM对象
jQuery对象转换为DOM对象,一般有以下两种方法:
(1)jQuery对象是一个数组对象,可以通过 [index] 的方法得到相应的DOM对象:
var $cr = $("#cr"); //jQuery对象
var cr = $cr[0]; //DOM对象
alert(cr.checked); //检测这个checkbox是否被选中
(2)另一种是jQuery本身提供的,通过 get(index) 方法得到相应的DOM对象:
var $cr = $("#cr"); //jQuery对象
var cr = $cr.get(0); //DOM对象
alert(cr.checked);//检测这个checkbox是否被选中
关于对象变量的命名建议
约定好代码的编写的风格,对自己的编程速度和日后理解还有团队的配合都有很好的作用,这里就简单介绍对象变量的命名建议,如有更好的方法,请交流学习。
一个简单的方法,如果获取的对象是jQuery对象,那么变量前加上$:
var $variable = jQuery对象;
如果获取的对象是DOM对象,则定义如下:
var variable = DOM对象;