[jQuery入门到精通]第3章：管理jQuery包装集xb

一.摘要要在使用jjQueery选选择器获获取到jjQueery包包装集后后, 我我们需要要对其进进行操作作. 本本章首先先讲解如如何动态态的创建建元素,, 接着着学习如如何管理理jQuueryy包装集集, 比比如添加加,删除除,切片片等.  二.前言言本系列的的2,33篇上面面列举了了太多的的APII相信大大家看着着眼晕.. 不过过这些基基础还必必须要讲讲, 基基础要扎扎实.其其实对于于这些列列表大家家可以跳跳过, 等以后后用到时时再回头头看或者者查询官官方的AAPI说说明.本章内容容很少,, 主要要讲解动动态创建建元素和和操作jjQueery包包装集的的各个函函数.  三.动态态创建元元素1.错误误的编程程方法我们经常常使用jjavaascrriptt动态的的创建元元素, 有很多多程序员员通过直直接更改改某一个个容器的的HTMML内容容.比如如:>> 动态态创建对对象>>测测试图层层>> doccumeent..gettEleemenntByyId(("teestDDiv"").iinneerHTTML = ""动态态创建的的divv>";>>上面的示示例中我我通过修修改teestDDiv的的内容,,在页面面上动态态的添加加了一个个divv元素.. 但是是请牢记记,这是是错误的的做法!!错误的原原因:(1) 在页面面加载时时改变了了页面的的结构.. 在IIE6中中如果网网络变慢慢或者页页面内容容太大就就会出现现"终止止操作""的错误误. 也也就是说说"永远远不要在在页面加加载时改改变页面面的Doom模型型".(2) 使用修修改HTTML内内容添加加元素,,  不不符合DDom标标准. 在实际际工作中中也碰到到过使用用这种方方法修改改内容后后, 某某些浏览览器中并并不能立立刻显示示添加的的元素,, 因为为不同浏浏览器的的显示引引擎是不不同的.. 但是是如果我我们使用用Domm的CrreatteEllemeent创创建对象象, 在在所有的的浏览器器中几乎乎都可以以. 但但是在jjQueery中中如果传传入的而而是一个个完整的的HTMML字符符串, 内部也也是使用用innnerHHTMLL. 所所以也不不是完全全否定iinneerHTTML函函数的使使用. 所以从现现在开始始请摒弃弃这种旧旧知识,, 使用用下面介介绍的正正确方法法编程..2.创建建新的元元素下面介绍绍两种正正确的创创建元素素的方式式. (1)使使用HTTML DOMM创建元元素什么是 DOMM？通过 JJavaaScrriptt，您可可以重构构整个 HTMML 文文档。

您您可以添添加、移移除、改改变或重重排页面面上的项项目要改变页页面的某某个东西西，JaavaSScriipt 就需要要对 HHTMLL 文档档中所有有元素进进行访问问的入口口这个个入口，连连同对 HTMML 元元素进行行添加、移移动、改改变或移移除的方方法和属属性，都都是通过过文档对对象模型型来获得得的（DDOM）在 19998 年，WW3C 发发布了第第一级的的 DOOM 规规范这这个规范范允许访访问和操操作 HHTMLL 页面面中的每每一个单单独的元元素所有的浏浏览器都都执行了了这个标标准，因因此，DDOM 的兼容容性问题题也几乎乎难觅踪踪影了DOM 可被 JavvaSccrippt 用用来读取取、改变变 HTTML、XXHTMML 以以及 XXML 文档DOM 被分为为不同的的部分（核核心、XXML及及HTMML）和和级别（DDOM Levvel 1/22/3）：：Coree DOOM 定义了一一套标准准的针对对任何结结构化文文档的对对象XML DOMM定义了一一套标准准的针对对 XMML 文文档的对对象 HTMLL DOOM 定义了一一套标准准的针对对 HTTML 文档的的对象。

关于使用用HTMML DDOM创创建元素素本文不不做详细细介绍,, 下面面举一个个简单的的例子:://使用用Domm标准创创建元素素var sellectt = doccumeent..creeateeEleemennt(""sellectt");; sellectt.opptioons[[0] = neew OOptiion(("加载载项1"", "vvaluue1""); sellectt.opptioons[[1] = nnew Opttionn("加加载项22", "vaaluee2")); sellectt.siize = ""2";;varoobjeect = ttesttDivv.apppenndChhildd(seelecct);;通过使用用 doocummentt.crreatteEllemeent 方法我我们可以以创建DDom元元素, 然后通通过apppenndChhildd方法为为添加到到指定对对象上..(2) 使用jjQueery函函数创建建元素在jQuueryy中创建建对象更更加简单单, 比比如创建建一个DDiv元元素:$("<>动态创创建的ddiv<"")我们主要要使用jjQueery核核心类库库中的一一个方法法:jQueery(( httml,, owwnerrDoccumeent )Reeturrns:: jQQuerry根据HTTML原原始字符符串动态态创建DDom元元素.其中httml参参数是一一个HTTML字字符串,,  在在jQuueryy1.33.2中中对此函函数做了了改进::当HTMML字符符串是没没有属性性的元素素是, 内部使使用doocummentt.crreatteEllemeent创创建元素素, 比比如://jQQuerry内部部使用ddocuumennt.ccreaateEElemmentt创建元元素:$("<"").ccss(("boordeer",,"soolidd 1ppx ##FF000000")..htmml(""动态创创建的ddiv"").aappeendTTo(ttesttDivv);否则使用用innnerHHTMLL方法创创建元素素://jQQuerry内部部使用iinneerHTTML创创建元素素:$("<>动态创创建的ddiv<"").aappeendTTo(ttesttDivv);3.将元元素添加加到对象象上我们可以以使用上上面两种种方式创创建一个个而元素素, 但但是上面面已经提提到一定定不要在在页面加加载时就就改变页页面的DDOM结结构, 比如添添加一个个元素.. 正确确的做法法是在页页面加载载完毕后后添加或或删除元元素.传统上,, 使用用winndoww.onnloaad完成成上述目目的://DOOM加载载完毕后后添加元元素//传统统方法winddow..onlloadd = funnctiion(() {{ teestDDiv..innnerHHTMLL = "动动态创建建的diiv";; }虽然能够够在DOOM完整整加载后后, 在在添加新新的元素素, 但但是不幸幸的是浏浏览器执执行wiindoow.oonlooad函函数不仅仅仅是在在构建完完DOMM树之后后, 也也是在所所有图像像和其他他外部资资源完整整的加载载并且在在浏览器器窗口显显示完毕毕之后.. 所以以如果某某个图片片或者其其他资源源加载很很长时间间, 访访问者就就会看到到一个不不完整的的页面,, 甚至至在图片片加载之之前就执执行了需需要依赖赖动态添添加的元元素的脚脚本而导导致脚本本错误..解决办法法就是等等DOMM被解析析后, 在图像像和外部部资源加加载之前前执行我我们的函函数.在在jQuueryy中让这这一实现现变得可可行://jQQuerry 使使用动态态创建的的$(ddocuumennt)..reaady((funnctiion))方法$(doocummentt).rreaddy(funcctioon()) { tesstDiiv.iinneerHTTML = ""使用用动态创创建的$$(doocummentt).rreaddy(ffuncctioon)方方法";; });或者使用用简便语语法://jQQuerry 使使用$((funnctiion))方法$(funcctioon()) { tesstDiiv.iinneerHTTML += "使使用$((funnctiion))方法<""; }});使用$(()将我我们的函函数包装装起来即即可. 而且可可以在一一个页面面绑定多多个函数数, 如如果使用用传统的的winndoww.onnloaad则只只能调用用一个函函数.所以请大大家将修修改DOOM的函函数使用用此方法法调用.. 另外外还要注注意doocummentt.crreatteEllemeent和和innnerHHTMLL的区别别. 如如果可以以请尽量量使用ddocuumennt.ccreaateEElemmentt和$((""))的形式式创建对对象. 四.管理理jQuueryy包装集集元素既然学会会了动态态创建元元素, 接下来来就会想想要把这这些元素素放入我我们的jjQueery包包装集中中.我们可以以在jQQuerry包装装集上调调用下面面这些函函数, 用来改改变我们们的原始始jQuueryy包装集集, 并并且大部部分返回回的都是是过滤后后的jQQuerry包装装集.jQueery提提供了一一系列的的函数用用来管理理包装集集:1.过滤滤 Fiilteerinng名称说明举例eq( inddex )获取第NN个元素素获取匹配配的第二二个元素素: $$("pp")..eq((1)filtter(( exxpr )筛选出与与指定表表达式匹匹配的元元素集合合。

保留带有有sellectt类的元元素: $(""p")).fiilteer("".seelecctedd")filtter(( fnn )筛选出与与指定函函数返回回值匹配配的元素素集合这个函数数内部将将对每个个对象计计算一次次 (正正如 ''$.eeachh').. 如果果调用的的函数返返回faalsee则这个个元素被被删除，否否则就会会保留保留子元元素中不不含有ool的元元素: $("ddiv"").ffiltter((funnctiion((inddex)) {   rretuurn $(""ol"", tthiss).ssizee() == 0; });;is( exppr )) 注意:: 这个个函数返返回的不不是jQQuerry包装装集而是是Boooleaan值用一个表表达式来来检查当当前选择择的元素素集合，如如果其中中至少有有一个元元素符合合这个给给定的表表达式就就返回ttruee如果没有有元素符符合，或或者表达达式无效效，都返返回'ffalsse'.. 'ffiltter'' 内部部实际也也是在调调用这个个函数，所所以，ffiltter(()函数数原有的的规则在在这里也也适用。

由于innputt元素的的父元素素是一个个表单元元素，所所以返回回truue: $(""inpput[[typpe=''cheeckbbox'']")).paarennt()).iss("fformm")map(( caallbbackk )将一组元元素转换换成其他他数组（不不论是否否是元素素数组）你可以用用这个函函数来建建立一个个列表，不不论是值值、属性性还是CCSS样样式，或或者其他他特别形形式这这都可以以用'$$.maap())'来方方便的建建立把forrm中的的每个iinpuut元素素的值建建立一个个列表:: $("pp")..apppendd( $$("iinpuut")).maap(ffuncctioon()){    reeturrn $$(thhis)).vaal()); }}).gget(().jjoinn(",, ")) );;not(( exxpr )删除与指指定表达达式匹配配的元素素从p元素素中删除除带有 sellectt 的IID的元元素: $(""p")).noot( $(""#seelecctedd")[[0] )slicce( staart,, ennd ))选取一个个匹配的的子集选择第一一个p元元素: $(""p")).sllicee(0,, 1));2.查找找 Fiindiing名称说明举例add(( exxpr )把与表达达式匹配配的元素素添加到到jQuueryy对象中中。

这个个函数可可以用于于连接分分别与两两个表达达式匹配配的元素素结果集集动态生成成一个元元素并添添加至匹匹配的元元素中:: $(("p"").aadd(("Aggainn")) chilldreen( [exxpr]] )取得一个个包含匹匹配的元元素集合合中每一一个元素素的所有有子元素素的元素素集合可以通过过可选的的表达式式来过滤滤所匹配配的子元元素注注意：ppareentss()将将查找所所有祖辈辈元素，而而chiildrren(()只考考虑子元元素而不不考虑所所有后代代元素查找DIIV中的的每个子子元素:: $(("diiv")).chhilddrenn()clossestt( [[exppr] )取得与表表达式匹匹配的最最新的父父元素为事件源源最近的的父类lli对象象更换样样式:$(doocummentt).bbindd("cclicck",, fuuncttionn (ee) {{   $(ee.taargeet)..cloosesst(""li"").ttogggleCClasss(""hillighht")); }});conttentts( )查找匹配配元素内内部所有有的子节节点（包包括文本本节点）。

如如果元素素是一个个ifrramee，则查查找文档档内容查找所有有文本节节点并加加粗: $(""p")).coonteentss()..nott("[[noddeTyype==1]"").wwrapp("<>");;findd( eexprr )搜索所有有与指定定表达式式匹配的的元素这这个函数数是找出出正在处处理的元元素的后后代元素素的好方方法所有搜索索都依靠靠jQuueryy表达式式来完成成这个个表达式式可以使使用CSSS1--3的选选择器语语法来写写从所有的的段落开开始，进进一步搜搜索下面面的sppan元元素与与$(""p sspann")相相同: $(""p")).fiind(("sppan"")nextt( [[exppr] )取得一个个包含匹匹配的元元素集合合中每一一个元素素紧邻的的后面同同辈元素素的元素素集合这个函数数只返回回后面那那个紧邻邻的同辈辈元素，而而不是后后面所有有的同辈辈元素（可可以使用用nexxtAlll）可可以用一一个可选选的表达达式进行行筛选找到每个个段落的的后面紧紧邻的同同辈元素素: $$("pp")..nexxt())nexttAlll( [[exppr] )查找当前前元素之之后所有有的同辈辈元素。