- 浏览: 75687 次
- 性别:
- 来自: 济南
最新评论
-
疯狂的草儿:
刚开始读这篇文章 我以为lz 招了个美女呢 呵呵
踏实与成功 -
binoruv:
bucuo
学习jQuery笔记(三)包装集 -
jy00314996:
若是人间 写道刚开始学接触PV3D,跟你学习学习,呵呵,交个朋 ...
Papervision3D(PV3D)笔记&教程(1)-四个基础元素 -
若是人间:
刚开始学接触PV3D,跟你学习学习,呵呵,交个朋友哈
Papervision3D(PV3D)笔记&教程(1)-四个基础元素 -
jy00314996:
martri 写道呵呵,不错,谢谢!
谢谢~~~一起进步!
Freemarker网站静态化的实现
一.摘要
在使用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 定义了一套标准的针对任何结构化文档的对象
关于使用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);
3.将元素添加到对象上
我们可以使用上面两种方式创建一个而元素, 但是上面已经提到一定不要在页面加载时就改变页面的DOM结构, 比如添加一个元素. 正确的做法是在页面加载完毕后添加或删除元素.
传统上, 使用window.onload完成上述目的:
//DOM加载完毕后添加元素 //传统方法 window.onload = function() { testDiv.innerHTML = "<div style=\"border:solid 1px #FF0000
虽然能够在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>"; } );
使用$()将我们的函数包装起来即可. 而且可以在一个页面绑定多个函数, 如果使用传统的window.onload则只能调用一个函数.
所以请大家将修改DOM的函数使用此方法调用. 另外还要注意document.createElement和innerHTML的区别. 如果可以请尽量使用document.createElement和$("<div/>")的形式创建对象.
四.管理jQuery包装集元素
既然学会了动态创建元素, 接下来就会想要把这些元素放入我们的jQuery包装集中.
我们可以在jQuery包装集上调用下面这些函数, 用来改变我们的原始jQuery包装集, 并且大部分返回的都是过滤后的jQuery包装集.
jQuery提供了一系列的函数用来管理包装集:
1.过滤 Filtering
名称 | 说明 | 举例 |
eq( index ) | 获取第N个元素 | 获取匹配的第二个元素: $("p").eq(1) |
filter( expr ) |
筛选出与指定表达式匹配的元素集合。 |
保留带有select类的元素: $("p").filter(".selected") |
filter( fn ) |
筛选出与指定函数返回值匹配的元素集合 这个函数内部将对每个对象计算一次 (正如 '$.each'). 如果调用的函数返回false则这个元素被删除,否则就会保留。 |
保留子元素中不含有ol的元素: $("div").filter(function(index) { |
is( expr ) 注意: 这个函数返回的不是jQuery包装集而是Boolean值 |
用一个表达式来检查当前选择的元素集合,如果其中至少有一个元素符合这个给定的表达式就返回true。 如果没有元素符合,或者表达式无效,都返回'false'. 'filter' 内部实际也是在调用这个函数,所以,filter()函数原有的规则在这里也适用。 |
由于input元素的父元素是一个表单元素,所以返回true: $("input[type='checkbox']").parent().is("form") |
map( callback ) |
将一组元素转换成其他数组(不论是否是元素数组) 你可以用这个函数来建立一个列表,不论是值、属性还是CSS样式,或者其他特别形式。这都可以用'$.map()'来方便的建立 |
把form中的每个input元素的值建立一个列表: $("p").append( $("input").map(function(){ |
not( expr ) | 删除与指定表达式匹配的元素 | 从p元素中删除带有 select 的ID的元素: $("p").not( $("#selected")[0] ) |
选取一个匹配的子集 | 选择第一个p元素: $("p").slice(0, 1); |
2.查找 Finding
名称 | 说明 | 举例 |
add( expr ) |
把与表达式匹配的元素添加到jQuery对象中。这个函数可以用于连接分别与两个表达式匹配的元素结果集。 |
动态生成一个元素并添加至匹配的元素中: $("p").add("<span>Again</span>") |
children( [expr] ) |
取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合。 可以通过可选的表达式来过滤所匹配的子元素。注意:parents()将查找所有祖辈元素,而children()只考虑子元素而不考虑所有后代元素。 |
查找DIV中的每个子元素: $("div").children() |
closest( [expr] ) | 取得与表达式匹配的最新的父元素 |
为事件源最近的父类li对象更换样式: $(document).bind("click", function (e) { |
contents( ) | 查找匹配元素内部所有的子节点(包括文本节点)。如果元素是一个iframe,则查找文档内容 | 查找所有文本节点并加粗: $("p").contents().not("[nodeType=1]").wrap("<b/>"); |
find( expr ) |
搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。 所有搜索都依靠jQuery表达式来完成。这个表达式可以使用CSS1-3的选择器语法来写。 |
从所有的段落开始,进一步搜索下面的span元素。与$("p span")相同: $("p").find("span") |
next( [expr] ) |
取得一个包含匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合。 这个函数只返回后面那个紧邻的同辈元素,而不是后面所有的同辈元素(可以使用nextAll)。可以用一个可选的表达式进行筛选。 |
找到每个段落的后面紧邻的同辈元素: $("p").next() |
nextAll( [expr] ) |
查找当前元素之后所有的同辈元素。 可以用表达式过滤 |
给第一个div之后的所有元素加个类: $("div:first").nextAll().addClass("after"); |
offsetParent( ) | 返回第一个有定位的父类(比如(relative或absolute)). |
|
parent( [expr] ) |
取得一个包含着所有匹配元素的唯一父元素的元素集合。 你可以使用可选的表达式来筛选。 |
查找每个段落的父元素: $("p").parent() |
parents( [expr] ) | 取得一个包含着所有匹配元素的祖先元素的元素集合(不包含根元素)。可以通过一个可选的表达式进行筛选。 | 找到每个span元素的所有祖先元素: $("span").parents() |
prev( [expr] ) |
取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合。 可以用一个可选的表达式进行筛选。只有紧邻的同辈元素会被匹配到,而不是前面所有的同辈元素。 |
找到每个段落紧邻的前一个同辈元素: $("p").prev() |
prevAll( [expr] ) |
查找当前元素之前所有的同辈元素 可以用表达式过滤。 |
给最后一个之前的所有div加上一个类: $("div:last").prevAll().addClass("before"); |
siblings( [expr] ) | 取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合。可以用可选的表达式进行筛选。 | 找到每个div的所有同辈元素: $("div").siblings() |
3.串联 Chaining
名称 | 说明 | 举例 |
andSelf( ) |
加入先前所选的加入当前元素中 对于筛选或查找后的元素,要加入先前所选元素时将会很有用。 |
选取所有div以及内部的p,并加上border类: $("div").find("p").andSelf().addClass("border"); |
end( ) | 回到最近的一个"破坏性"操作之前。即,将匹配的元素列表变为前一次的状态。 如果之前没有破坏性操作,则返回一个空集。所谓的"破坏性"就是指任何改变所匹配的jQuery元素的操作。这包括在 Traversing 中任何返回一个jQuery对象的函数--'add', 'andSelf', 'children', 'filter', 'find', 'map', 'next', 'nextAll', 'not', 'parent', 'parents', 'prev', 'prevAll', 'siblings' and 'slice'--再加上 Manipulation 中的 'clone'。 |
选取所有的p元素,查找并选取span子元素,然后再回过来选取p元素: $("p").find("span").end() |
五.常用函数举例
[待续]
六.总结
本篇文章内容较少, 主要讲解如何动态创建元素以及管理jQuery包装集, 接口文档列举了太多, 实例部分还没来得及写. 等以后有空的时候补上!
发表评论
-
使用JQuery+Struts1.3实现JSON的post传递
2009-02-20 15:28 815json格式的数据传递已经红遍全球,JQuery的 ... -
学习jQuery笔记(十)jQuery表单验证与自动完成提示插件
2009-07-01 09:20 3581一.摘要 本文是介绍两个最常用的jQuery插件. 分别用于 ... -
学习jQuery笔记(九)jQueryUI常用功能实战
2009-06-26 15:11 1537一.摘要 本文是实战篇. 使用jQueryUI完成制作网站的 ... -
学习jQuery笔记(八)jQuery工具函数
2009-06-26 10:10 981一.摘要 我们经常要使用脚本处理各种业务逻辑, 最常见的就是 ... -
学习jQuery笔记(七)jQuery动画-让页面动起来!
2009-06-25 14:46 1733一.摘要 本系列文章将 ... -
学习jQuery笔记(六)jQuery中的Ajax
2009-06-25 14:36 1531一.摘要 本篇文章讲解如何使用jQuery方便快捷的实现Aj ... -
学习jQuery笔记(五)事件与事件对象
2009-06-24 15:01 1153一.摘要 事件是脚本编程的灵魂. 所以本章内容也是jQuer ... -
学习jQuery笔记(四)操作元素的属性与样式
2009-06-24 14:28 1550一.摘要 本篇文章讲解 ... -
学习jQuery笔记(二)选择器
2009-06-23 15:22 1161一.摘要 本章讲解jQuery最重要的选择器部分的知识. 有 ... -
学习jQuery笔记(一)入门篇
2009-06-23 14:44 1242首先什么是jQuery? ... -
学习jQuery笔记 前篇 开发环境配置
2009-06-23 14:34 951一.摘要 本系列文章将带您进入jQuery的精彩世界 ... -
jQuery日常使用技巧总结
2009-06-19 14:40 8081、关于页面元素的引用 ... -
jQuery使用JSON的例子
2009-06-12 15:53 11481、在HTML中,有这样一个表单: <form met ... -
用JQuery解析Json
2009-06-12 15:36 1963JSON的数据格式现在挺热门的!这里不解释了。主要讲下Jque ... -
jQuery的动态效果效果演示
2009-06-12 15:24 1222Jquery做动态效果,可以使用animate函数, ... -
jquery 插件corner实现圆角边框
2009-06-12 15:11 1381<!DOCTYPE html PUBLIC &qu ... -
各种效果的jquery ui(接口)介绍
2009-06-11 10:21 1560基本的鼠标互动: 拖拽(drag and dropping) ... -
在jQuery中利用AJAX加载XML数据并解析
2009-06-11 10:03 8221,Content-Type很多时候无法解析就是Con ... -
jQuery & CSS制作折页效果
2009-06-09 13:21 2011不多说先看效果图 demo地址:http://www.s ... -
网页设计趋势:Out Of The Box
2009-06-04 16:39 752这是一个创造性的流行趋势。 这很简单了,但增加了一个额外的要素 ...
相关推荐
jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery ...
Jquery学习笔记 Jquery学习笔记是指使用Jquery框架来实现javascript编程的笔记记录,本笔记记录了Jquery-1.2的基本用法、Ajax异步交互、XMLHttpRequest对象的基本应用等知识点。 一、Jquery基本用法 Jquery是一个...
**jQuery 学习笔记总结** jQuery 是一个广泛使用的 JavaScript 库,它简化了网页文档对象模型(DOM)操作、事件处理、动画制作以及Ajax交互。本篇笔记将深入探讨 jQuery 的核心概念,包括选择器、常用方法以及在...
这个"JQuery学习笔记合集"包含了三个部分,旨在帮助开发者从初级到高级逐步掌握jQuery的核心技术和实践应用。 **第一季:jQuery基础篇** 在"jQ学习第一季.rar"中,你将学习到jQuery的基础知识,包括如何引入jQuery...
《韩顺平jQuery学习笔记及练习》是一份珍贵的学习资源,由知名讲师韩顺平的课程实录整理而成,旨在帮助学习者深入理解和掌握jQuery这一强大的JavaScript库。jQuery简化了HTML文档遍历、事件处理、动画设计和Ajax交互...
学习管理jQuery包装集,意味着理解如何有效地对一组元素进行批量操作,如遍历、添加、删除、插入、替换等。这对于提升JavaScript代码的效率和可读性至关重要。此外,了解并掌握正确的DOM操作方法,可以帮助开发者...
这里,我们有针对这两个主题的学习笔记和参考资料,包括JavaScript培训、jQuery API、JavaScript基础、函数详解以及jQuery使用手册等内容。让我们逐一探讨这些知识点。 首先,`JavaScript培训.zip`可能包含的是对...
本人学习jquery的代码和笔记,主要是jquery的入门知识,以及前后台数据交互。包括一个jquery的web工程和一个配置好的tomcat。jquery工程是用myeclipse10做的,如果eclipse打不开可以重新建工程,再把对应的文件拷贝...
**jQuery学习笔记(一)** 在深入探讨jQuery之前,我们首先要理解什么是jQuery。jQuery是一个高效、易用且功能丰富的JavaScript库,它简化了HTML文档遍历、事件处理、动画制作和Ajax交互等任务。由John Resig在2006...
锋利的JQuery学习笔记
在深入探讨jQuery的知识点之前,首先需要理解jQuery是一个流行的JavaScript库,它简化了DOM操作、事件处理、动画制作以及Ajax交互等任务。jQuery的核心特性是其选择器,它允许开发者通过CSS样式的语法轻松选取HTML...
**jQuery学习笔记** jQuery,作为一个轻量级的JavaScript库,极大地简化了JavaScript的DOM操作、事件处理、动画设计以及Ajax交互。这篇学习笔记将深入探讨jQuery的核心概念和实用技巧,帮助初学者快速上手。 ## 一...
这份"js&jquery学习笔记"应该包含对这些概念的详细解释,以及示例代码和练习,帮助读者理解和掌握这两种技术。对于初学者来说,这是一份宝贵的资源,能够快速上手JavaScript和jQuery,提升Web开发技能。
jQuery基础教程笔记jQuery基础教程笔记jQuery基础教程笔记jQuery基础教程笔记
《jQuery学习笔记详解》 jQuery,作为一款广泛应用于Web开发的JavaScript库,以其简洁的API、强大的功能和广泛的社区支持,极大地简化了DOM操作、事件处理、动画制作以及Ajax交互等任务。这篇学习笔记将深入探讨...
《jQuery学习笔记详解》 jQuery 是一款强大的JavaScript库,它极大地简化了JavaScript的DOM操作、事件处理、动画设计和Ajax交互。本笔记基于一年的学习经验,涵盖了基础到进阶的知识点,旨在帮助初学者快速掌握...
### JQuery学习笔记(技术文档) #### 一、JQuery能做什么? JQuery 是一款轻量级的 JavaScript 库,它的设计宗旨是“write less, do more”,即“写得更少,做得更多”。通过JQuery,可以实现以下功能: 1. **...
jQuery 是一个广泛使用的 JavaScript 库,它以简洁的语法和强大的功能著称,极大地简化了网页的DOM操作、事件处理和动画制作。"写的更少,但做的更多"是jQuery的核心理念,它允许开发者用相对较少的代码实现复杂的...