主页 > 优化推广 > 从零开始学习jQuery (三) 管理jQuery包装集

从零开始学习jQuery (三) 管理jQuery包装集

发布时间：2010/8/9 14:11:10

一.摘要

在使用jQuery选择器获取到jQuery包装集后, 我们需要对其进行操作. 本章首先讲解如何动态的创建元素, 接着学习如何管理jQuery包装集, 比如添加,删除,切片等.

二.前言

本系列的2,3篇上面列举了太多的API相信大家看着眼晕. 不过这些基础还必须要讲, 基础要扎实.其实对于这些列表大家可以跳过, 等以后用到时再回头看或者查询官方的API说明.

本章内容很少, 主要讲解动态创建元素和操作jQuery包装集的各个函数.

三.动态创建元素

1.错误的编程方法

我们经常使用javascript动态的创建元素, 有很多程序员通过直接更改某一个容器的HTML内容.比如:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>动态创建对象</title>
</head>
<body>
<div id="testDiv">测试图层</div>
<script type="text/javascript">
    document.getElementById("testDiv").innerHTML = "<div style=\"border:solid 1px #FF0000\">动态创建的div</div>";
</script>
</body>
</html>

上面的示例中我通过修改testDiv的内容,在页面上动态的添加了一个div元素. 但是请牢记,这是错误的做法!

错误的原因:

(1) 在页面加载时改变了页面的结构. 在IE6中如果网络变慢或者页面内容太大就会出现"终止操作"的错误. 也就是说"永远不要在页面加载时改变页面的Dom模型".

(2) 使用修改HTML内容添加元素, 不符合Dom标准. 在实际工作中也碰到过使用这种方法修改内容后, 某些浏览器中并不能立刻显示添加的元素, 因为不同浏览器的显示引擎是不同的. 但是如果我们使用Dom的CreateElement创建对象, 在所有的浏览器中几乎都可以. 但是在jQuery中如果传入的而是一个完整的HTML字符串, 内部也是使用innerHTML. 所以也不是完全否定innerHTML函数的使用.

所以从现在开始请摒弃这种旧知识, 使用下面介绍的正确方法编程.

2.创建新的元素

下面介绍两种正确的创建元素的方式.

(1)使用HTML DOM创建元素

什么是 DOM？

通过 JavaScript，您可以重构整个 HTML 文档。您可以添加、移除、改变或重排页面上的项目。

要改变页面的某个东西，JavaScript 就需要对 HTML 文档中所有元素进行访问的入口。这个入口，连同对 HTML 元素进行添加、移动、改变或移除的方法和属性，都是通过文档对象模型来获得的（DOM）。

在 1998 年，W3C 发布了第一级的 DOM 规范。这个规范允许访问和操作 HTML 页面中的每一个单独的元素。

所有的浏览器都执行了这个标准，因此，DOM 的兼容性问题也几乎难觅踪影了。

DOM 可被 JavaScript 用来读取、改变 HTML、XHTML 以及 XML 文档。

DOM 被分为不同的部分（核心、XML及HTML）和级别（DOM Level 1/2/3）：

Core DOM: 定义了一套标准的针对任何结构化文档的对象
XML DOM: 定义了一套标准的针对 XML 文档的对象
HTML DOM: 定义了一套标准的针对 HTML 文档的对象。

关于使用HTML DOM创建元素本文不做详细介绍, 下面举一个简单的例子:

    //使用Dom标准创建元素
    var Ｓelect = document.createElement("Ｓelect");
    Ｓelect.options[0] = new Option("加载项1", "value1");
    Ｓelect.options[1] = new Option("加载项2", "value2");
    Ｓelect.size = "2";
    var object = testDiv.appendChild(Ｓelect);

通过使用 document.createElement 方法我们可以创建Dom元素, 然后通过appendChild方法为添加到指定对象上.

(2) 使用jQuery函数创建元素

在jQuery中创建对象更加简单, 比如创建一个Div元素:

$("<div style=\"border:solid 1px #FF0000\">动态创建的div</div>")

我们主要使用jQuery核心类库中的一个方法:

jQuery( html, ownerDocument )
Returns: jQuery

根据HTML原始字符串动态创建Dom元素.

其中html参数是一个HTML字符串, 在jQuery1.3.2中对此函数做了改进:

当HTML字符串是没有属性的元素是, 内部使用document.create

从零开始学习jQuery (三) 管理jQuery包装集

上一篇：从零开始学习jQuery (二) 万能的选择器

下一篇：从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式

从零开始学习jQuery (三) 管理jQuery包装集

一.摘要

二.前言

三.动态创建元素

1.错误的编程方法

2.创建新的元素

(1)使用HTML DOM创建元素

DOM 被分为不同的部分（核心、XML及HTML）和级别（DOM Level 1/2/3）：

(2) 使用jQuery函数创建元素

相关新闻推荐

石家庄网站建设的优点

竞价排名对SEO的影响

SEO网站优化的八个步骤