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

我不是女神ヾ 2022-05-15 03:34 362阅读 0赞

## 一.摘要 ##

在使用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函数的使用..csharpcode, .csharpcode pre \{ font-size: small; color: black; font-family: consolas,"Courier New",courier,monospace; background-color: rgb(255, 255, 255); \}.csharpcode pre \{ margin: 0em; \}.csharpcode .rem \{ color: rgb(0, 128, 0); \}.csharpcode .kwrd \{ color: rgb(0, 0, 255); \}.csharpcode .str \{ color: rgb(0, 96, 128); \}.csharpcode .op \{ color: rgb(0, 0, 192); \}.csharpcode .preproc \{ color: rgb(204, 102, 51); \}.csharpcode .asp \{ background-color: rgb(255, 255, 0); \}.csharpcode .html \{ color: rgb(128, 0, 0); \}.csharpcode .attr \{ color: rgb(255, 0, 0); \}.csharpcode .alt \{ background-color: rgb(244, 244, 244); width: 100%; margin: 0em; \}.csharpcode .lnum \{ color: rgb(96, 96, 96); \}

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

### 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);

.csharpcode, .csharpcode pre \{ font-size: small; color: black; font-family: consolas,"Courier New",courier,monospace; background-color: rgb(255, 255, 255); \}.csharpcode pre \{ margin: 0em; \}.csharpcode .rem \{ color: rgb(0, 128, 0); \}.csharpcode .kwrd \{ color: rgb(0, 0, 255); \}.csharpcode .str \{ color: rgb(0, 96, 128); \}.csharpcode .op \{ color: rgb(0, 0, 192); \}.csharpcode .preproc \{ color: rgb(204, 102, 51); \}.csharpcode .asp \{ background-color: rgb(255, 255, 0); \}.csharpcode .html \{ color: rgb(128, 0, 0); \}.csharpcode .attr \{ color: rgb(255, 0, 0); \}.csharpcode .alt \{ background-color: rgb(244, 244, 244); width: 100%; margin: 0em; \}.csharpcode .lnum \{ color: rgb(96, 96, 96); \}

通过使用 document.createElement 方法我们可以创建Dom元素, 然后通过appendChild方法为添加到指定对象上.

#### (2) 使用jQuery函数创建元素 ####

在jQuery中创建对象更加简单, 比如创建一个Div元素:

$("<div style=\"border:solid 1px #FF0000\">动态创建的div</div>"
 )
 .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas,"Courier New",courier,monospace; background-color: rgb(255, 255, 255); }.csharpcode pre { margin: 0em; }.csharpcode .rem { color: rgb(0, 128, 0); }.csharpcode .kwrd { color: rgb(0, 0, 255); }.csharpcode .str { color: rgb(0, 96, 128); }.csharpcode .op { color: rgb(0, 0, 192); }.csharpcode .preproc { color: rgb(204, 102, 51); }.csharpcode .asp { background-color: rgb(255, 255, 0); }.csharpcode .html { color: rgb(128, 0, 0); }.csharpcode .attr { color: rgb(255, 0, 0); }.csharpcode .alt { background-color: rgb(244, 244, 244); width: 100%; margin: 0em; }.csharpcode .lnum { color: rgb(96, 96, 96); }

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

**[jQuery( html, ownerDocument )][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 ###

<table> 
 <tbody> 
 <tr> 
 <td> 名称 </td> 
 <td> 说明 </td> 
 <td> 举例 </td> 
 </tr> 
 <tr> 
 <td> <a href="http://docs.jquery.com/Traversing/eq#index" rel="nofollow">eq( index )</a> </td> 
 <td>获取第N个元素</td> 
 <td>获取匹配的第二个元素: $("p").eq(1)</td> 
 </tr> 
 <tr> 
 <td> <a href="http://docs.jquery.com/Traversing/filter#expr" rel="nofollow">filter( expr )</a> </td> 
 <td> 筛选出与指定表达式匹配的元素集合。 </td> 
 <td>保留带有select类的元素: $("p").filter(".selected")</td> 
 </tr> 
 <tr> 
 <td> <a href="http://docs.jquery.com/Traversing/filter#fn" rel="nofollow">filter( fn )</a> </td> 
 <td> 筛选出与指定函数返回值匹配的元素集合 这个函数内部将对每个对象计算一次 (正如 '$.each'). 如果调用的函数返回false则这个元素被删除，否则就会保留。 </td> 
 <td>保留子元素中不含有ol的元素: $("div").filter(function(index) { &nbsp; return $("ol", this).size() == 0; }); </td> 
 </tr> 
 <tr> 
 <td> <a href="http://docs.jquery.com/Traversing/is#expr" rel="nofollow">is( expr )</a> 注意: 这个函数返回的不是jQuery包装集而是Boolean值 </td> 
 <td> 用一个表达式来检查当前选择的元素集合，如果其中至少有一个元素符合这个给定的表达式就返回true。 如果没有元素符合，或者表达式无效，都返回'false'. 'filter' 内部实际也是在调用这个函数，所以，filter()函数原有的规则在这里也适用。 </td> 
 <td>由于input元素的父元素是一个表单元素，所以返回true: $("input[type='checkbox']").parent().is("form")</td> 
 </tr> 
 <tr> 
 <td> <a href="http://docs.jquery.com/Traversing/map#callback" rel="nofollow">map( callback )</a> </td> 
 <td> 将一组元素转换成其他数组（不论是否是元素数组） 你可以用这个函数来建立一个列表，不论是值、属性还是CSS样式，或者其他特别形式。这都可以用'$.map()'来方便的建立 </td> 
 <td>把form中的每个input元素的值建立一个列表: $("p").append( $("input").map(function(){ &nbsp; return $(this).val(); }).get().join(", ") ); </td> 
 </tr> 
 <tr> 
 <td> <a href="http://docs.jquery.com/Traversing/not#expr" rel="nofollow">not( expr )</a> </td> 
 <td>删除与指定表达式匹配的元素</td> 
 <td>从p元素中删除带有 select 的ID的元素: $("p").not( $("#selected")[0] )</td> 
 </tr> 
 <tr> 
 <td> <a href="http://docs.jquery.com/Traversing/slice#startend" rel="nofollow">slice( start, end )</a> </td> 
 <td>选取一个匹配的子集</td> 
 <td>选择第一个p元素: $("p").slice(0, 1);</td> 
 </tr> 
 </tbody> 
</table>

### 2.查找 Finding ###

<table> 
 <tbody> 
 <tr> 
 <td> 名称 </td> 
 <td> 说明 </td> 
 <td> 举例 </td> 
 </tr> 
 <tr> 
 <td> <a href="http://docs.jquery.com/Traversing/add#expr" rel="nofollow">add( expr )</a> </td> 
 <td> 把与表达式匹配的元素添加到jQuery对象中。这个函数可以用于连接分别与两个表达式匹配的元素结果集。 </td> 
 <td>动态生成一个元素并添加至匹配的元素中: $("p").add("&lt;span&gt;Again&lt;/span&gt;") </td> 
 </tr> 
 <tr> 
 <td> <a href="http://docs.jquery.com/Traversing/children#expr" rel="nofollow">children( [expr] )</a> </td> 
 <td> 取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合。 可以通过可选的表达式来过滤所匹配的子元素。注意：parents()将查找所有祖辈元素，而children()只考虑子元素而不考虑所有后代元素。 </td> 
 <td>查找DIV中的每个子元素: $("div").children()</td> 
 </tr> 
 <tr> 
 <td> <a href="http://docs.jquery.com/Traversing/closest#expr" rel="nofollow">closest( [expr] )</a> </td> 
 <td>取得与表达式匹配的最新的父元素</td> 
 <td> 为事件源最近的父类li对象更换样式: $(document).bind("click", function (e) { &nbsp; $(e.target).closest("li").toggleClass("hilight"); }); </td> 
 </tr> 
 <tr> 
 <td> <a href="http://docs.jquery.com/Traversing/contents" rel="nofollow">contents( )</a> </td> 
 <td>查找匹配元素内部所有的子节点（包括文本节点）。如果元素是一个iframe，则查找文档内容</td> 
 <td>查找所有文本节点并加粗: $("p").contents().not("[nodeType=1]").wrap("&lt;b/&gt;");</td> 
 </tr> 
 <tr> 
 <td> <a href="http://docs.jquery.com/Traversing/find#expr" rel="nofollow">find( expr )</a> </td> 
 <td> 搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。 所有搜索都依靠jQuery表达式来完成。这个表达式可以使用CSS1-3的选择器语法来写。 </td> 
 <td>从所有的段落开始，进一步搜索下面的span元素。与$("p span")相同: $("p").find("span")</td> 
 </tr> 
 <tr> 
 <td> <a href="http://docs.jquery.com/Traversing/next#expr" rel="nofollow">next( [expr] )</a> </td> 
 <td> 取得一个包含匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合。 这个函数只返回后面那个紧邻的同辈元素，而不是后面所有的同辈元素（可以使用nextAll）。可以用一个可选的表达式进行筛选。 </td> 
 <td>找到每个段落的后面紧邻的同辈元素: $("p").next()</td> 
 </tr> 
 <tr> 
 <td> <a href="http://docs.jquery.com/Traversing/nextAll#expr" rel="nofollow">nextAll( [expr] )</a> </td> 
 <td> 查找当前元素之后所有的同辈元素。 可以用表达式过滤 </td> 
 <td>给第一个div之后的所有元素加个类: $("div:first").nextAll().addClass("after");</td> 
 </tr> 
 <tr> 
 <td> <a href="http://docs.jquery.com/Traversing/offsetParent" rel="nofollow">offsetParent( )</a> </td> 
 <td>返回第一个有定位的父类(比如(relative或absolute)). </td> 
 <td>&nbsp;</td> 
 </tr> 
 <tr> 
 <td> <a href="http://docs.jquery.com/Traversing/parent#expr" rel="nofollow">parent( [expr] )</a> </td> 
 <td> 取得一个包含着所有匹配元素的唯一父元素的元素集合。 你可以使用可选的表达式来筛选。 </td> 
 <td>查找每个段落的父元素: $("p").parent()</td> 
 </tr> 
 <tr> 
 <td> <a href="http://docs.jquery.com/Traversing/parents#expr" rel="nofollow">parents( [expr] )</a> </td> 
 <td>取得一个包含着所有匹配元素的祖先元素的元素集合（不包含根元素）。可以通过一个可选的表达式进行筛选。</td> 
 <td>找到每个span元素的所有祖先元素: $("span").parents()</td> 
 </tr> 
 <tr> 
 <td> <a href="http://docs.jquery.com/Traversing/prev#expr" rel="nofollow">prev( [expr] )</a> </td> 
 <td> 取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合。 可以用一个可选的表达式进行筛选。只有紧邻的同辈元素会被匹配到，而不是前面所有的同辈元素。 </td> 
 <td>找到每个段落紧邻的前一个同辈元素: $("p").prev()</td> 
 </tr> 
 <tr> 
 <td> <a href="http://docs.jquery.com/Traversing/prevAll#expr" rel="nofollow">prevAll( [expr] )</a> </td> 
 <td> 查找当前元素之前所有的同辈元素 可以用表达式过滤。 </td> 
 <td>给最后一个之前的所有div加上一个类: $("div:last").prevAll().addClass("before");</td> 
 </tr> 
 <tr> 
 <td> <a href="http://docs.jquery.com/Traversing/siblings#expr" rel="nofollow">siblings( [expr] )</a> </td> 
 <td>取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合。可以用可选的表达式进行筛选。</td> 
 <td>找到每个div的所有同辈元素: $("div").siblings()</td> 
 </tr> 
 </tbody> 
</table>

3.串联 Chaining

## 五.常用函数举例 ##

\[待续\]

## 六.总结 ##

本篇文章内容较少, 主要讲解如何动态创建元素以及管理jQuery包装集, 接口文档列举了太多,  实例部分还没来得及写. 因为要睡觉明天还要上班, 所以请各位见谅, 等以后有空的时候补上!

[XML DOM]: http://www.w3school.com.cn/xmldom/index.asp
[jQuery_ html_ ownerDocument]: http://docs.jquery.com/Core/jQuery#htmlownerDocument