第一次学习jQuery,经常会搞不清楚哪些是jQuery对象、哪些是DOM对象,所以需要重点了解它们以及它们之间的关系。
1. DOM对象
DOM(Document Object Model,文档对象模型),每一份DOM都可以表示成一棵树。下面我们构建一个非常基本的网页,网页代码如下
初始化效果图如图1-13所示。
图1-13 一个非常基本的网页 |
(点击查看大图)图1-14 把网页元素表示为文档树 |
2. jQuery对象
jQuery对象就是通过jQuery包装DOM对象后产生的对象。
jQuery对象是jQuery独有的。如果一个对象是jQuery对象,那么它就可以使用jQuery里的方法。
例如:
这段代码等同于:
在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对象,两者并不等价。关于"#"选择符的运用,我们将在下一章进行讲解。从学习jQuery一开始就应当树立正确的观念,认识jQuery对象和DOM对象之间的区别,一旦能够跨越这道坎,之后学习jQuery的路子就轻松多了。