一.摘要
在使用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>测试图层</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 select = document.createElement("select");
select.options[0] = new Option("加载项1", "value1");
select.options[1] = new Option("加载项2", "value2");
select.size = "2";
var object = testDiv.appendChild(select);
通过使用 document.createElement 方法我们可以创建Dom元素, 然后通过appendChild方法为添加到指定对象上.
(2) 使用jQuery函数创建元素
在jQuery中创建对象更加简单, 比如创建一个Div元素:
$("<div style=\"border:solid 1px #FF0000\">动态创建的div</div>")
我们主要使用jQuery核心类库中的一个方法:
Returns: jQuery
根据HTML原始字符串动态创建Dom元素.
其中html参数是一个HTML字符串, 在jQuery1.3.2中对此函数做了改进:
当HTML字符串是没有属性的元素是, 内部使用document.createElement创建元素, 比如:
复制代码 代码如下:
//jQuery内部使用document.createElement创建元素:
$("<div/>").css("border","solid 1px #FF0000").html("动态创建的div").appendTo(testDiv);
否则使用innerHTML方法创建元素:
复制代码 代码如下: