DOM对象和jQuery对象简介
1. DOM对象
DOM(document object model),每一份DOM都可以表示成一棵树。
<h3>例子</h3>
<p title="选择你最喜欢的水果">选择你最喜欢的水果</p>
<ul>
<li>苹果</li>
<li>橘子</li>
<li>菠萝</li>
</ul>
可以把上面的HTML代码抽象为一颗DOM树。
在这课DOM树中,h3,p,ul,li这些子节点都是DOM元素节点。可以通过JavaScript中的getElementByTagname或者getElementById来获取节点。像这样得到的DOM元素就是DOM对象。DOM可以使用JavaScript中的方法。
var domObj = document.getElementById("id");
var ObjHTML = document.innerHTML;
2. jQuery对象
jQuery对象是通过jQuery包装DOM对象后产生的对象。
jQuery对象是jQuery独有的。如果一个对象是jQuery对象,那么就可以使用jQuery里的方法。
$("#foo").html(); // 获取id为foo的元素内的HTML代码。html()是jQuery里的方法
这段代码等同于:
document.getElementById("foo").innerHTML;
在jQuery对象中无法使用DOM对象的任何方法。例如$("id").innerHTML和$("#id").checked之类的写法都是错误的,同样,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)
jQuery对象是一个类似数组的对象,可以通过index的方法得到相应的DOM对象。
var $cr = $("#cr"); // jQuery对象
var cr = $cr[0]; // DOM对象
另一种方法是jQuery本身提供的,通过get(index)方法得到相应的DOM对象。
var $cr = $("#cr"); // jQuery对象
var cr = $cr.get(0); // DOM对象
2. DOM对象转换为jQuery对象
对于一个DOM对象,只需要用$()把DOM对象包装起来,就可以获得一个jQuery对象了。
var cr = document.getElementById("cr");
var $cr = $(cr);
转换后,可以任意使用jQuery中的方法。
最后再次强调:DOM对象才能使用DOM中的方法,jQuery对象不可以使用DOM中的方法,但jQuery对象提供了一套更加完善的工具用于操作DOM。