在使用jQuery选择器获取到jQuery包装集后, 我们需要对其进行操作. 本章首先讲解如何动态的创建元素, 接着学习如何管理jQuery包装集, 比如添加,删除,切片等.
二.前言
本系列的2,3篇上面列举了太多的API相信大家看着眼晕. 不过这些基础还必须要讲, 基础要扎实.其实对于这些列表大家可以跳过, 等以后用到时再回头看或者查询官方的API说明.
本章内容很少, 主要讲解动态创建元素和操作jQuery包装集的各个函数.
三.动态创建元素
1.错误的编程方法
我们经常使用javascript动态的创建元素, 有很多程序员通过直接更改某一个容器的HTML内容.比如:
我们主要使用jQuery核心类库中的一个方法:
jQuery( html, ownerDocument )
Returns: jQuery
根据HTML原始字符串动态创建Dom元素.
其中html参数是一个HTML字符串, 在jQuery1.3.2中对此函数做了改进:
当HTML字符串是没有属性的元素是, 内部使用document.createElement创建元素, 比如:
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] ) |
|
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) { |
| 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/