Home思洋影视事业部网站建设知识库
0 Comments

区分jQuery对象和DOM对象

发布于：2013-05-27  |   作者：广州网站建设  |   已聚集：人围观
区分jQuery对象和DOM对象

第一次学习jQuery的读者很容易迷惑的就是什么是jQuery代码，什么是JavaScript代码。

实际上，jQuery框架本身就是在JavaScript语言基础上进行包装的，因此jQuery代码本质上也是JavaScript代码，自然jQuery代码与JavaScript代码可以相互混合使用。读者也没有必要去区分每一行代码到底是jQuery代码，还是JavaScript代码。

但是，初学者必须明白jQuery对象和DOM对象。读者只要能够分辨清楚jQuery对象和DOM对象，以及它们各自适用的方法即可。

DOM是Document Object Model的简写，中文翻译为文档对象模型。根据W3C DOM规范，DOM是HTML与XML的应用编程接口(API)，DOM将整个页面映射为一个由层次节点组成的文件。例如，将下面文档加载并用浏览器解析后，会自动生成一个映射文件，该文件以结构树的形式展示了当前文档的结构，如图1.11所示。

广州网站建设,网站建设,广州网页设计,广州网站设计
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0  Transitional//EN" "http://www.w3.org/ TR/xhtml1/DTD/ xhtml1-transitional.dtd"> 
  2. <html xmlns="http://www.w3.org/1999/xhtml"> 
  3.     <head> 
  4.         <title>标准DOM示例</title> 
  5.     </head> 
  6.     <body> 
  7.         <h1>标准DOM</h1> 
  8.         <p>这是一份简单的<strong>文档对象模型</strong></p> 
  9.         <ul> 
  10.             <li>D表示文档，DOM的物质基础</li> 
  11.             <li>O表示对象，DOM的思想基础</li> 
  12.             <li>M表示模型，DOM的方法基础</li> 
  13.         </ul> 
  14.     </body> 
  15. </html> 
图1.11  文档对象模型的树形结构

在这棵DOM树中，<li>、<li>、<li>标签都是<ul>标签的子节点，可以通过document对象的getElementsByTagName()或者getElementById()方法访问它们，也可以利用节点之间的关系，通过它们的关联指针快速进行相互访问。

上面所有的节点和元素都是DOM对象的组成部分，getElementsByTagName()和getElementById()方法也是DOM模型提供的内置方法。所有这些就构成了DOM对象的基础。

jQuery对象是通过jQuery框架包装DOM对象之后产生的一个新对象，从本质上分析它仅是DOM对象的集合，因此我们可以把DOM对象看作是一个独立的个体，而jQuery是多个DOM对象组成的数据集合。

jQuery框架为jQuery对象定义了独立使用的方法和属性，它无法直接调用DOM对象的方法。相反，DOM对象也无法直接调用jQuery对象的方法或属性。例如，下面的写法都是错误的。

广州网站建设,网站建设,广州网页设计,广州网站设计
  1. $("#wrap").innerHTML ="嵌入文本";       //jQuery对象调用DOM属性  
  2. getElementById("wrap").html("嵌入文本") ;   //DOM对象调用jQuery对象的方法 
标签：
飞机