从零开始学习jQuery（三）管理jQuery包装集

从零开始学习jQuery（三）管理jQuery包装集2010-02-21 博客园 ziqiu.zhang一.摘要

在使用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）：

首页 / 脚本样式 / jQuery / 从零开始学习jQuery（三） 管理jQuery包装集

首页 / 脚本样式 / jQuery / 从零开始学习jQuery（三）管理jQuery包装集