管理jQuery包装集 - 蓝桥云课

管理 jQuery 包装集

目标

首先讲解如何动态的创建元素, 接着学习如何管理 jQuery 包装集, 比如添加,删除,切片等。

动态创建元素

错误的编程方法

<!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>
copy

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

错误的原因:

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

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

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

创建新的元素

1-使用 HTML DOM 创建元素

什么是 DOM？

通过 JavaScript，您可以重构整个 HTML 文档。您可以添加、移除、改变或重排页面上的项目。要改变页面的某个东西，JavaScript 就需要对 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 方法为添加到指定对象上。
copy

2-使用 jQuery 函数创建元素

比如创建一个 Div 元素:

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

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

jQuery( html, ownerDocument ) Returns: jQuery

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

其中 html 参数是一个 HTML 字符串,

将元素添加到对象上

上面已经提到一定不要在页面加载时就改变页面的 DOM 结构, 比如添加一个元素。正确的做法是在页面加载完毕后添加或删除元素。

传统上, 使用 window.onload 完成上述目的:

//DOM 加载完毕后添加元素
//传统方法
window.onload = function() { testDiv.innerHTML = "<div style=\"border:solid 1px #FF0000\">动态创建的 div</div>"; }
copy

虽然能够在 DOM 完整加载后, 在添加新的元素, 但是不幸的是浏览器执行 window.onload 函数不仅仅是在构建完 DOM 树之后, 也是在所有图像和其他外部资源完整的加载并且在浏览器窗口显示完毕之后。所以如果某个图片或者其他资源加载很长时间, 访问者就会看到一个不完整的页面, 甚至在图片加载之前就执行了需要依赖动态添加的元素的脚本而导致脚本错误。

解决办法就是等 DOM 被解析后, 在图像和外部资源加载之前执行我们的函数。在 jQuery 中让这一实现变得可行:

//jQuery 使用动态创建的$(document).ready(function)方法
$(document).ready(
        function() { testDiv.innerHTML = "<div style=\"border:solid 1px #FF0000\">使用动态创建的$(document).ready(function)方法</div>"; }
);

//或者使用简便语法:

//jQuery 使用$(function)方法
$(function() { 
    testDiv.innerHTML += "<div style=\"border:solid 1px #FF0000\">使用$(function)方法</div>"; });
copy

使用$()将我们的函数包装起来即可。而且可以在一个页面绑定多个函数, 如果使用传统的 window.onload 则只能调用一个函数。

所以请大家将修改 DOM 的函数使用此方法调用。另外还要注意 document.createElement 和 innerHTML 的区别。如果可以请尽量使用 document.createElement 和$("")的形式创建对象。

管理 jQuery 包装集元素

我们可以在 jQuery 包装集上调用下面这些函数, 用来改变我们的原始 jQuery 包装集, 并且大部分返回的都是过滤后的 jQuery 包装集。

jQuery 提供了一系列的函数用来管理包装集:

1-过滤 Filtering

2-查找 Finding

3-串联 Chaining

有点多啊，多练习应该就慢慢记住了！

“jQuery基础入门”实验报告