锋利的jQuery(三)-- jQuery中的DOM操作

DOM是 Document Object Model的缩写，意思是文档对象模型。根据 W3C DOM 规范（http://www.w3.org/DOM），DOM是一种与浏览器、平台、语言无关的接口，使用该接口可以轻松地访问页面中所有的标准组件。简单来说，DOM解决了Netscape的JavaScript和Microsoft的JScript之间的冲突，给予了 Web 设计师和开发者一套标准的方法，让他们能够轻松获取和操作网页中的数据、脚本和表现层对象。
3.1 DOM操作的分类
一般来说，DOM操作分为3个方面，即DOM Core（核心）、HTML-DOM、CSS-DOM。
1．DOM Core
DOM Core并不专属于JavaScript，任何一种支持DOM的程序设计语言都可以使用它。它的用途并非仅限于处理网页，也可以用来处理任何一种使用标记语言编写出来的文档，例如XML。
JavaScript 中的getElmentById()、getElementsByTagName()、getAttribute()和setAttribute()等方法，这些都是DOM Core的组成部分。
例如：
使用DOM Core来获取表单对象的方法：

document.getElementsByTagName("form")；

使用DOM Core来获取某元素的src属性的方法：

element.getAttribute("src");

2．HTML-DOM
在使用JavaScript和DOM为HTML文件编写脚本时，有许多专属于HTML-DOM的属性。HTML-DOM的出现甚至比DOM Core还要早，它提供了一些更简明的记号来描述各种HTML元素的属性。
例如：
使用HTML-DOM来获取表单对象的方法：

document.forms  //HTML-DOM提供了一个forms对象

使用HTML-DOM来获取某元素的src属性的方法：

element.src;

因此获取某些对象、属性既可以用DOM Core来实现，也可以使用HTML-DOM实现。相比较而言HTML-DOM的代码通常比较简短，不过它只能用来处理Web文档。
3．CSS-DOM
CSS-DOM是针对 CSS的操作。在JavaScript中，CSS-DOM技术的主要作用是获取和设置style对象的各种属性。通过改变style对象的各种属性，可以使网页呈现出各种不同的效果。
例如：

设置某元素style对象字体颜色的方法：

element.style.color = "red";

jQuery作为JavaScript库，继承并发扬了JavaScript对DOM对象的操作的特性，使开发人员能方便地操作DOM对象。下面详细介绍jQuery中的各种DOM操作。
3.2 jQuery中的DOM操作
下面我们构建一个网页。因为每一张网页都能用DOM表示出来，而每一份DOM都可以看作一棵DOM树。构建的网页效果如图

<p title="选择你最喜欢的水果." >你最喜欢的水果是？</p>
<ul>
      <li title='苹果'>苹果</li>
      <li title='橘子'>橘子</li>
      <li title='菠萝'>菠萝</li>
</ul>

根据上面的网页结构构建出一棵DOM树，如图

接下来，对DOM的各种操作都将围绕这棵DOM树而展开。
3.2.1 查找节点
1．查找元素节点
获取元素节点并打印出它的文本内容，jQuery代码如下：

var $li = $("ul li:eq(1)")；         //获取<ul>里第2个<li>节点
var li_txt = $li.text()；            //获取第2个<li>元素节点的文本内容
alert(li_txt)；                      //打印文本内容

以上代码获取了<ul>元素里第2个<li>节点，并将它的文本内容“橘子”打印出来，效果如图
2．查找属性节点
利用 jQuery 选择器查找到需要的元素之后，就可以使用 attr()方法来获取它的各种属性的值。attr()方法的参数可以是一个，也可以是两个。当参数是一个时，则是要查询的属性的名字，例如：

var $para = $("p");                 //获取<p>节点
var p_txt = $para.attr("title");    //获取<p>元素节点属性title
//var p_txt = $para.text(); 效果同上条语句相同
alert(p_txt);                       //打印title属性值

以上代码获取了<p>节点，并将它的title属性的值打印出来，效果如图
3.2.2 创建节点
在DOM操作中，常常需要动态创建HTML内容，使文档在浏览器里的呈现效果发生变化，并且达到各种各样的人机交互的目的。
1．创建元素节点
例如要创建两个<li>元素节点，并且要把它们作为<ul>元素节点的子节点添加到DOM节点树上。
（1）创建两个<li>新元素。
（2）将这两个新元素插入文档中。
第（1）个步骤可以使用jQuery的工厂函数$()来完成：

var $li_1 = $("<li></li>");    //创建第1个<li>元素
var $li_2 = $("<li></li>");    //创建第2个<li>元素
$("ul").append($li_1);         //添加到<ul>节点中，使之能在网页中显示
$("ul").append($li_2);         //可以采取链式写法：$("ul").append($li_1).append ($li_2)

$(html)方法会根据传入的HTML标记字符串，创建一个DOM对象，并将这个DOM对象包装成一个jQuery对象后返回。

运行代码后，新创建的<li>元素将被添加到网页中，因为暂时没有在它们内部添加任何文本，所以只能看到<li>元素默认的“· ”，如图

2．创建文本节点

var $li_3 = $("<li>香蕉</li>");                    //创建一个<li>元素，包括元素节点和文本节点
                                                    //“香蕉”就是创建的文本节点
var $li_4 = $("<li>雪梨</li>");                    //创建一个<li>元素，包括元素节点和文本节点
                                                    //“雪梨”就是创建的文本节点。
$("ul").append($li_3);                             //添加到<ul>节点中，使之能在网页中显示
$("ul").append($li_4);                             //添加到<ul>节点中，使之能在网页中显示

效果如图:

注意：无论$(html)中的HTML代码多么复杂，都可以使用相同的方式来创建。例如$("<li><em>这是</em><b>一个</b>< a href='#' >复杂的组合</ a></li>")；
3．创建属性节点
 

var $li_5 = $("<li title='香蕉'>香蕉</li>");        //创建一个<li>元素
                                                     //包括元素节点、文本节点和属性节点
                                                     //其中title='香蕉'就是创建的属性节点
var $li_6 = $("<li title='雪梨'>雪梨</li>");        //创建一个<li>元素
                                                     //包括元素节点、文本节点和属性节点
                                                     //其中title='雪梨'就是创建的属性节点
$("ul").append($li_5);
$("ul").append($li_6);                              //添加到<ul>节点中，使之能在网页中显示

上图创建文本节点的例子中新增的元素没有属性节点，创建属性节点的例子中新增的元素有title属性节点

3.2.3 插入节点

这些插入节点的方法不仅能将新创建的DOM元素插入到文档中，也能对原有的DOM元素进行移动。
例如利用它们创建新元素并对其进行插入操作：

var $li_1 = $("<li title='香蕉'>香蕉</li>");                                           
var $li_2 = $("<li title='雪梨'>雪梨</li>");   
var $li_3 = $("<li title='其他'>其他</li>");   
var $parent = $("ul");