没有合适的资源？快使用搜索试试~ 我知道了~

文库首页前端Javascript管理Jquery包装集

管理Jquery包装集

需积分: 6 2 下载量 9 浏览量 2010-01-31 16:47:27 上传评论收藏 71KB DOC 举报

温馨提示

试读

13页

管理Jquery包装集详细讲解很适合初学者

资源推荐

资源详情

资源评论

emberjs-component-jquerydatatables-example:一个 Emberjs 组件实现，它包装了 jQuery-DataTables 并演示了该组件在管理 IT 电子书集合的应用程序中的用法。要访问此演示，请访问以下网站

示例应用程序：Emberjs-jquery-datatables 组件该项目将作为包装在项目模板中。在这样做时，这个项目充当了一个演示应用程序，它使用这个 ember 组件来呈现可交互的数据表。这里，交互是指对渲染数据集的操作。 ...

JavaScript权威指南(第六版) 清晰-完整

2.1 字符集 2.2 注释 2.3 直接量 2.4 标识符和保留字 2.5 可选的分号第3章类型、值和变量 3.1 数字 3.2 文本 3.3 布尔值 3.4 null和undefined 3.5 全局对象 3.6 包装对象 3.7 不可变的原始值和可变的对象引用 3.8 ...

JavaScript权威指南(第6版)(中文版)

4星 · 用户满意度95%

JavaScript权威指南（第6版）

JavaScript权威指南(第6版) 中文版

2.1 字符集 25 2.2 注释 27 2.3 直接量 27 2.4 标识符和保留字 28 2.5 可选的分号 30 第3章类型、值和变量 32 3.1 数字 34 3.2 文本 38 3.3 布尔值 43 3.4 null和undefined 44 3.5 全局对象 45 3.6 包装对象 46 3.7...

JavaScript权威指南(第6版)

JavaScript权威指南(第6版)中文文字版

第二章管理 Jquery 包装集

一.摘要

在使用 jQuery 选择器获取到 jQuery 包装集后, 我们需要对其进行操作. 本章

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

除,切片等.



二.前言

上一讲列举了太多的 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>

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 核心类库中的一个方法:

jQuery( html, ownerDocument )

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 方法创建元素:

//jQuery 内部使用 innerHTML 创建元素: $("<div

style=\"border:solid 1px #FF0000\">动态创建

的 div</div>").appendTo(testDiv);

剩余12页未读，继续阅读

评论收藏

内容反馈

资源评论

资源反馈

评论星级较低，若资源使用遇到问题可联系上传者，3个工作日内问题未解决可申请退款~

jeyor

粉丝: 72
资源: 197

上传资源快速赚钱

我的内容管理展开

我的资源快来上传第一个资源

我的收益

登录查看自己的收益

我的积分登录查看自己的积分

我的C币登录后查看C币余额

我的收藏

我的下载

下载帮助

前往需求广场，查看用户热搜

管理Jquery包装集

Jquery 做的一款OA 后台管理

超级牛B的Jquery-UI后台管理模板

Jquery后台管理界面设计

Jquery实现客户管理界面

一款逆天超级牛B的Jquery-UI后台管理模板

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

jQuery学习资料

jQuery使用手册 jquery入门教程

jquery 入门文档 从零开始学校jquery

人力资源权限管理Jquery树+SSi架构，包含pdm文件jar包

Jquery EasyUI的基础权限管理

如何在Spring + Jquery中管理不同时区之间的日期和时间

Jquery与Bootstrap实现后台管理页面增删改查功能示例

从零开始学习jQuery-张子秋

Ajax入门：从零开始学习jQuery pdf

从零开始学习JQuery

从零开始学习jQuery pdf

jQuery的学习步骤

emberjs-component-jquerydatatables-example:一个 Emberjs 组件实现，它包装了 jQuery-DataTables 并演示了该组件在管理 IT 电子书集合的应用程序中的用法。 要访问此演示，请访问以下网站

JavaScript权威指南(第六版) 清晰-完整

JavaScript权威指南(第6版)(中文版)

JavaScript权威指南（第6版）

JavaScript权威指南(第6版) 中文版

JavaScript权威指南(第6版)

JavaScript权威指南(第6版)中文文字版

最新资源

jquery 入门文档从零开始学校jquery

emberjs-component-jquerydatatables-example:一个 Emberjs 组件实现，它包装了 jQuery-DataTables 并演示了该组件在管理 IT 电子书集合的应用程序中的用法。要访问此演示，请访问以下网站