jQuery基础——操作DOM

        DOM操作可分为3个方面：DOM Core(核心）、HTML DOM和CSS DOM。

1. DOM Core不属于JavaScript语言范畴，任何一种支持DOM的程序设计语言都可以操作它，它的用途不限于处理网页，也可以用来处理任何一种标记语言编写出来的文档，如XML。JavaScript中的createElement()、getElementById()和removeAttribute()等方法都是DOM Core的组成部分。
2. HTML DOM的出现比DOM Core要早，他提供了一些更简单的记号来描述各种HTML元素的属性，如访问表单document.forms等。
3. CSS DOM主要操作CSS。在JavaScript中，CSS DOM主要作用是获取和设置style对象的各种属性，可以使网页呈现不同的效果。

        jQuery作为一种JavaScript库，继承优化了JavaScript访问DOM对象的特性，使开发人员更加方便地操作DOM对象。

1、创建节点 

        在Web开发中，要创建动态网页内容，主要操作的节点包括元素、属性和文本，下面分别进行说明。 

1.1、创建元素

        使用DOM的createElement()方法能够根据参数指定的标签名创建一个新的元素，并返回新建元素的引用。用法如下。

var element  = document.createElement("tagName");

        其中element表示新建元素的引用，createElement()是document对象的一个方法，该方法只有以参数，用来指定创建元素的标签名称。
        如果要把创建的元素加到文档中，还需要调用appendChild()方法来实现。

// 本示例创建div元素对象，然后添加到文档中
// 页面初始化函数
window.onload = function(){
    // 创建div元素
    var div = document.createElement("div");
    // 把创建的div元素添加到DOM文档树中
    document.body.appendChild(div);
}

        jQuery简化DOM操作，直接使用jQuery构造函数$()创建元素对象。用法如下：

$(html)

        该函数能够根据参数htmll所传递的HTML字符串，创建一个DOM对象，并将该对象包装为jQuery对象返回。

        动态创建的元素不会自动添加到文档中，需要使用其他方法把它添加到文档中。可以使用jQuery的append()方法把创建的div元素添加到文档body元素节点下。

$(function(){
    var $div = $("<div></div>");
    $("body").append($div);
})

注意：
        参数字符串必须符合严谨型XHTML结构要求，标记应该包含起始标签和结束标签。如果没有结束标签，则应该添加闭合标记，即在起始标签中添加斜线。

1.2、创建文本

        使用DOM的createTextNode()方法可以创建文本节点。用法如下：

document.createTextNode(data)

        参数data表示字符串。参数中不能包含任何HTML标签，否则JavaScript会把这些标签作为字符串进行显示。最后返回新创建的文本节点。

        新创建的文本节点不会自动增加到DOM文档树中，需要使用appendChild()方法实现。

// 下面代码为div元素创建一行文本，并在文档中显示。
window.onload = function (){
    var div = document.createElement("div");
    var txt = document.createTextNode("DOM");
    div.appendChild(text);
    document.body.appendChild(div);
}

        jquery创建文本节点比较简单，直接把文字字符串添加到元素标记字符串之中，然后使用append()等方法把他们添加到DOM文档树中。

// 本示例中，在文档中插入一个div元素，并在<div>标签中包含“DOM”的文本信息。
$(function(){
    var $div = $("<div>DOM</div>");
    $("body").append($div);

})

1.3、创建属性

        使用DOM的setAttribute()方法可以创建属性节点，并设置属性节点包含的值。用法如下：

setAttribute(name,value)

         参数name和value参数分别表示属性名称和属性值。属性名称和属性值必须以字符串的形式进行传递。如果元素中存在指定的属性，它的值将被刷新；如果不存在，则setAttribute()方法将为元素创建改属性并赋值。

// 本示例中调用setAttribute()方法为div元素设置一个title属性，实现代码如下：
window.onload = function(){
 var div = document.createElement("div");    
 var txt = document.createTextNode("DOM");
 div.appendChild(txt);
 document.body.appendChild(div);
    //为div元素定义title属性
 div.setAttribute("title","hezi");
}

jQuery创建属性节点与创建文本节点类似，简单而又方便。

$(function(){
    var $div = $("<div title="hezi" >DOM</div>");
    $("body").append($div);

})

        由此可见，jQuery以一种简易的方法代替繁琐的操作，简化Web开发的难度和门槛，但是由于jQuery是对JavaScript进行封装，所以执行速度并没有得到优化，相反却影响了代码的执行效率，因此，在可能的情况下，建议混合使用JavaScript和jQuery方法，以提高代码执行效率。

2、插入节点 

        jQuery提供了众多在文档中插入节点的方法，极大地方便了用户操作。

2.1、内部插入

        在DOM中，使用appendChild()和insertBefore()可以在元素内部插入节点内容。

        appendChild()方法能够把参数指定的元素插入到指定节点内的尾部。用法如下：

nodeObject.appendChild(newchild);

         其中nodeObject表示节点对象，参数newchild表示要添加的子节点。插入成功之后，返回插入节点。

        insertBefore()方法可以在指定子节点前面插入元素。用法如下：

insertBefore(newchild,refchild)

        其中参数newchild表示插入新的节点，redfchild表示此节点前插入新节点，返回新的子节点。

jQuery定义了4个方法用来在元素内部插入内容，如下表所示：

在节点内部插入内容的方法

方法	说明
append()	向每个匹配的元素内部追加内容
appendTo()	把所有匹配的元素追加到另一个指定的元素集合中。 实际上，该方法颠倒了append()用法
prepend()	向每个匹配的元素内部前置内容
prependTo()	把所有匹配的元素前置到另一个指定的元素集合中。 实际上，该方法颠倒了prepend()用法

1.append()

        append()方法能够把参数指定到内容插入到指定的节点中，并返回一个jQuery对象。指定的内容被插入到每个匹配元素里面的最后面，作为它的最后一个子元素（last child）。用法如下：

append(content)
append(function(index,html))

        参数content可以是一个元素、html字符串，或者jQuery对象，用来插入在每一个匹配元素里面的末尾。
        参数function(index,html)是一个返回HTML字符串的函数，该字符串用来插入到匹配元素的末尾。

2.appendTo()