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

本系列文章导航

从零开始学习jQuery (一) 开天辟地入门篇

从零开始学习jQuery (二) 万能的选择器

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

从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式

从零开始学习jQuery (五) 事件与事件对象

从零开始学习jQuery (六) jQuery中的Ajax

从零开始学习jQuery (七) jQuery动画-让页面动起来!

从零开始学习jQuery (八) 插播:jQuery实施方案

从零开始学习jQuery (九) jQuery工具函数

从零开始学习jQuery (十) jQueryUI常用功能实战

从零开始学习jQuery (十一) 实战表单验证与自动完成提示插件


 

一.摘要

在使用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
定义了一套标准的针对任何结构化文档的对象
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);

3.将元素添加到对象上

我们可以使用上面两种方式创建一个而元素, 但是上面已经提到一定不要在页面加载时就改变页面的DOM结构, 比如添加一个元素. 正确的做法是在页面加载完毕后添加或删除元素.

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

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


虽然能够在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) {
  return $("ol", this).size() == 0;
});

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(){
  return $(this).val();
}).get().join(", ") );

not( expr ) 删除与指定表达式匹配的元素 从p元素中删除带有 select 的ID的元素:
$("p").not( $("#selected")[0] )

slice( start, end )

选取一个匹配的子集 选择第一个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) {
  $(e.target).closest("li").toggleClass("hilight");
});

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包装集, 接口文档列举了太多,  实例部分还没来得及写. 因为要睡觉明天还要上班, 所以请各位见谅, 等以后有空的时候补上!

作者:张子秋
出处:http://www.cnblogs.com/zhangziqiu/
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。
posted @ 2009-05-04 00:41 ziqiu.zhang 阅读(34243) 评论(42) 编辑 收藏

 回复 引用 查看   
#1楼 2009-05-04 08:46 文明的天空      
是沙发吗?
 回复 引用 查看   
#2楼 2009-05-04 08:50 gc      
太支持了.请继续定,我等着研究
 回复 引用   
#3楼 2009-05-04 09:40 YokerWu[未注册用户]
看看这个东西吧,其实这个是有问题的:

<!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> just test for Yoker.Wu </title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">
<!--
$(document).ready(function(){
$("div").filter(
function(index) {
return $("ol", this).size() == 0;
}
).each(function(index){
alert(this.id);
});
//这里测试p的结果
$("p").filter(
function(index) {
return $("ol", this).size() == 0;
}
).each(function(index){
alert(this.id);
});
});
//-->
</script>
</head>

<body>
<div id="a">a html<ol id="div_ol"><li id="div_ol_li">ol html</li></ol></div>
<div id="b">b html</div>
<div id="c">c html</div>

<p id="p1">p1 html<ol id="p_ol"><li id="p_ol_li">ol html</li></ol><p>
<p id="p2">p2 html</p>
<p id="p3">p3 html</p>
</body>
</html>

 回复 引用   
#4楼 2009-05-04 09:40 YokerWu[未注册用户]
我上面说的是: filter( fn )
 回复 引用 查看   
#5楼 2009-05-04 09:46 Frankwangyifang      
我一直在关注你的文章,期待着您的后续文章!
写得很好,我也在学习JQuery,您的文章对我的帮助很大.谢谢!

 回复 引用 查看   
#6楼[楼主] 2009-05-04 10:00 ziqiu.zhang      
@YokerWu
首先你的代码里里面的<p>元素没有闭合, 我修正以后发现还是存在问题. 第一部分在div中筛选不包含<ol>的元素结果正常, 后面把div改成p结果就不正常.

我想这是jQuery的错误, 但是<p>中不应该包含<ol>, 我们可以避免不标准的使用也许能够避免这个问题.

 回复 引用   
#7楼 2009-05-04 10:21 YokerWu[未注册用户]
那个P没闭合,是手误,这很容易看出来的哈。
 回复 引用   
#8楼 2009-05-04 10:23 YokerWu[未注册用户]
其实这也算不上JQuery的问题, 应该是你上面的那个例子误导了,HTML的规范里面,好像 p 中 的ol 是不应该用的。
 回复 引用 查看   
#9楼[楼主] 2009-05-04 11:13 ziqiu.zhang      
@YokerWu
引诱大家走入陷阱...你看的还真细啊, 改之!

 回复 引用 查看   
#10楼 2009-05-04 11:16 假如爱有天意      
写的不错~ 顶。。。
 回复 引用 查看   
#11楼 2009-05-04 19:45 leobb      
你为什么一上来就讲错误的方法,你见过谁这么讲课!
 回复 引用 查看   
#12楼[楼主] 2009-05-05 00:38 ziqiu.zhang      
@leobb
你见过谁讲课不收学费的? 估计也只有互联网有这样的事情了. 希望不要太在乎小节, 我只是将自己有限的知识拿出来无偿分享而已. 纠正开发人员错误的编程方式就是要提醒我们每一个开发: 学好基本功! :)

 回复 引用   
#13楼 2009-05-05 09:43 Soralis[未注册用户]
@leobb
大哥你没事吧?吃咸了?

 回复 引用   
#14楼 2009-05-05 11:39 ss2[未注册用户]
页面优化的文章里 说是要innerHTML,避免使用Append
这边又说尽量使用CreateElement,用CreateElement显然要用Append了
应该多点自己思考的东西 而不是简单的 翻抄别人的东西

 回复 引用 查看   
#15楼[楼主] 2009-05-05 15:52 ziqiu.zhang      
@ss2
说明你没有在实际项目中碰到这个问题. 不是谁好谁坏的这么简单, 而是innerHTML在某些场景下不能使用. 如果innerHTML不出错也是可以用的, 就像jQuery的内部实现也有innerHTML.


 回复 引用 查看   
#16楼 2009-05-05 16:27 yay      
@leobb
这话讲话不地道的!

 回复 引用 查看   
#17楼 2009-05-05 16:28 yay      
秋哥得加实例啊.....
 回复 引用 查看   
#18楼[楼主] 2009-05-05 17:51 ziqiu.zhang      
@yay
加...以后加....现在忙得都找不到北了.今天争取12点前完成事件篇.这一篇很重要!

 回复 引用 查看   
#19楼 2009-05-06 09:53 麦穗      
@leobb
人家拿来分享就不错了,你何必要求那么高呢?

鼓励楼主。我也一直在看这些东西。至少知道门在哪了,剩下的,要靠自己研究了

 回复 引用 查看   
#20楼 2009-05-30 14:32 私家侦探      
var x = $('.x');
var y = $('.y');
------------------
这两个包装集如何合并?代码中不能采用andSelf( )的方式,因为变量x和y有其它用途,也不要再次$('.x,.y') 性能考虑

 回复 引用 查看   
#21楼 2009-06-29 21:58 Alone      
$('.x').add('.y');
 回复 引用 查看   
#22楼 2009-07-08 17:02 南风飞扬      
我正在学习jquery,这系列文章帮助很大,谢谢
@leobb
吃包了别来闲逛。。。去外面流狗去。。

LZ 那个“end( )” 有什么用处啊。。在什么常情下用啊。看不太清楚那意思。。
 回复 引用 查看   
#25楼 2009-09-04 17:19 せいきち      
老师问你下哦!
为什么在IE下点击可以添加,在FF下提示divMsg is not defined
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!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 runat="server">
<title></title>
<script type="text/javascript" src="Jquery/jquery-1.2.6.min.js"></script> <%if (false) { %> <script type="text/javascript" src="Jquery/jquery-1.3.2-vsdoc2.js"></script> <%} %>
</head>
<body>
<div id="divMsg">
Hello World!</div>
<input id="btnAdd" type="button" value="新增动态创建的div" />
<script type="text/javascript">
$("#btnAdd").bind("click", function(event) { $("<div style=\"border:solid 1px #FF0000\">动态创建的div</div>").appendTo(divMsg) });
</script>
</body>
</html>


 回复 引用 查看   
#26楼 2009-09-04 17:33 せいきち      
哦,问题解决了,呵呵!
靠。。。小日本。。。
 回复 引用 查看   
#28楼 2010-04-11 15:51 cj21828      
秋哥得加实例啊.....

 回复 引用 查看   
#29楼 2010-04-11 15:51 cj21828      
引用yay:秋哥得加实例啊.....

同样的想法

 回复 引用 查看   
#30楼 2010-05-25 10:41 冰の酷龙      
老大,啥时把空缺的补上啊。
 回复 引用 查看   
#31楼 2010-06-11 22:24 冉元胜      
很多人都有这么一个错误的观点"传统的window.onload只能调用一个函数",多的不说,直接看例子。请不要再有这样的错误观点。
  function myinit()
  {//两个函数合并下
  fn1();
  fn2();
fn3();
...
  }
  window.onload=myinit;

 回复 引用 查看   
#32楼 2010-07-01 17:04 djune      
引用冉元胜:
很多人都有这么一个错误的观点"传统的window.onload只能调用一个函数",多的不说,直接看例子。请不要再有这样的错误观点。
  function myinit()
  {//两个函数合并下
  fn1();
  fn2();
fn3();
...
  }
  window.onload=myinit;

嗯。。。支持。这是根本。

 回复 引用 查看   
#33楼 2010-11-04 19:48 zhouqin      
有实例就好了
 回复 引用 查看   
#34楼 2010-11-15 13:52 xiaona      
有实例就好了

不过已经很好了,谢谢。加油!

 回复 引用 查看   
#35楼 2011-02-18 11:27 破小孩程序员      
包装集元素写的太多了 有些看不过来了 看的晕晕的
 回复 引用 查看   
#36楼 2011-03-14 16:06 qzx297      
写的很好,赞一个
 回复 引用 查看   
#37楼 2011-07-01 15:38 目标RE      
好文要顶,但是有的函数还是没理解真正的意思,必须尝试才知道.
 回复 引用   
#38楼 2011-07-07 21:57 Object001[未注册用户]
非常值得鼓励 且可敬可佩
经常不断的学习、更新自己知识的程序员越来越少了
然而总结出来 供别人参考和学习的更是少之又少

 回复 引用   
#39楼 2011-07-08 22:29 IObject[未注册用户]
这位高手 我不能理解的是关于html元素的动态创建
为什么说当html有属性时调用的是innerhtml
而没有属性时调用的createElement
比如var e1=$("<div>")和 var e2=$("<div id=\"advMy\">")
他们有区别吗 不都是个包装集吗
el.attr("class","cs1"); el.appendTo("#advTop");
e2.attr("class","cs2"); e2.appendTo("#advBottom");
它们的区别究竟在哪 另外我e2的穿件规范吗
还是要写成 var e2=$("<div id=\"advMy\"></div>")呢

zhanglubiao@yeah.net 本人邮箱

 回复 引用   
#40楼 2011-08-18 15:44 jQueryFan[未注册用户]
好文章
 回复 引用 查看   
#41楼 2011-08-22 16:51 Fibonaccii      
nice
 回复 引用   
#42楼 2012-02-01 16:08 ln2468[未注册用户]
引用冉元胜:
很多人都有这么一个错误的观点"传统的window.onload只能调用一个函数",多的不说,直接看例子。请不要再有这样的错误观点。
  function myinit()
  {//两个函数合并下
  fn1();
  fn2();
fn3();
...
  }
  window.onload=myinit;

区别在于
$(function(){alert("a")});
$(function(){alert("b")});
window.onload = function(){alert("c")};//不显示
window.onload = function(){alert("d")};

发表评论

昵称: [登录] [注册]

主页:

邮箱:(仅博主可见)

评论内容:

  登录  注册

[使用Ctrl+Enter键快速提交评论]

0 1448428 +WUuWMvQwhk=