juqery 学习之四 筛选--<过滤>
2010-11-29 14:58
260 查看
eq(index)
获取第N个元素这个元素的位置是从0算起。
Reduce the set of matched elements to a single element.
The position of the element in the set of matched elements starts at 0 and goes to length - 1.
返回值
jQuery参数
index (Integer) :元素在jQuery对象中的索引示例
获取匹配的第二个元素HTML 代码:
<p> This is just a test.</p> <p> So is this</p>
jQuery 代码:
$("p").eq(1)
结果:
[ <p> So is this</p> ]
--------------------------------------------------------------------------------------------------------------
hasClass(class)
检查当前的元素是否含有某个特定的类,如果有,则返回true。这其实就是 is("." + class)。
Checks the current selection against a class and returns true, if at least one element of the selection has the given class.
This is an alternative to is("." + class).
返回值
Boolean参数
class (String) : 用于匹配的类名示例
给包含有某个类的元素进行一个动画。HTML 代码:
<div class="protected"></div><div></div>
jQuery 代码:
$("div").click(function(){
if ( $(this).hasClass("protected") )
$(this)
.animate({ left: -10 })
.animate({ left: 10 })
.animate({ left: -10 })
.animate({ left: 10 })
.animate({ left: 0 });
});
--------------------------------------------------------------------------------------------------------------
filter(expr)
筛选出与指定表达式匹配的元素集合。这个方法用于缩小匹配的范围。用逗号分隔多个表达式
Removes all elements from the set of matched elements that do not match the specified expression(s).
This method is used to narrow down the results of a search. Provide a comma-separated list of expressions to apply multiple filters at once.
返回值
jQuery参数
expr (Expression) : 表达式示例
保留带有select类的元素HTML 代码:
<p>Hello</p><p>Hello Again</p><p class="selected">And Again</p>
jQuery 代码:
$("p").filter(".selected")
结果:
[ <p class="selected">And Again</p> ]
保留第一个以及带有select类的元素
HTML 代码:
<p>Hello</p><p>Hello Again</p><p class="selected">And Again</p>
jQuery 代码:
$("p").filter(".selected, :first")
结果:
[ <p>Hello</p>, <p class="selected">And Again</p> ]
--------------------------------------------------------------------------------------------------------------
filter(fn)
筛选出与指定函数返回值匹配的元素集合这个函数内部将对每个对象计算一次 (正如 '$.each'). 如果调用的函数返回false则这个元素被删除,否则就会保留。
Removes all elements from the set of matched elements that does not match the specified function.
The function is called with a context equal to the current element (just like '$.each'). If the function returns false, then the element is removed - anything else and the element is kept.
返回值
jQuery参数
fn (Function) : 传递进filter的函数示例
保留子元素中不含有ol的元素。HTML 代码:
<p><ol><li>Hello</li></ol></p><p>How are you?</p>
jQuery 代码:
$("p").filter(function(index) {
return $("ol", this).length == 0;
});
结果:
[ <p>How are you?</p> ]
--------------------------------------------------------------------------------------------------------------
is(expr)
用一个表达式来检查当前选择的元素集合,如果其中至少有一个元素符合这个给定的表达式就返回true。如果没有元素符合,或者表达式无效,都返回'false'. 'filter' 内部实际也是在调用这个函数,所以,filter()函数原有的规则在这里也适用。
Checks the current selection against an expression and returns true, if at least one element of the selection fits the given expression.
If no element fits, or the expression is not valid, then the response will be 'false'. 'filter' is used internally, therefore all rules that apply there apply here, as well.
返回值
Boolean参数
expr (String) :用于筛选的表达式示例
由于input元素的父元素是一个表单元素,所以返回true。HTML 代码:
<form><input type="checkbox" /></form>
jQuery 代码:
$("input[type='checkbox']").parent().is("form")
结果:
true
--------------------------------------------------------------------------------------------------------------
map(callback)
将一组元素转换成其他数组(不论是否是元素数组)你可以用这个函数来建立一个列表,不论是值、属性还是CSS样式,或者其他特别形式。这都可以用'$.map()'来方便的建立。
Translate a set of elements into another set of values (which may, or may not, be elements).
You could use this to build lists of values, attributes, css values - or even perform special, custom, selector transformations. This is provided as a convenience method for using '$.map()'.
返回值
jQuery参数
callback (Function) : 给每个元素执行的函数示例
把form中的每个input元素的值建立一个列表。HTML 代码:
<p><b>Values: </b></p>
<form>
<input type="text" name="name" value="John"/>
<input type="text" name="password" value="password"/>
<input type="text" name="url" value="http://ejohn.org/"/>
</form>
jQuery 代码:
$("p").append( $("input").map(function(){
return $(this).val();
}).get().join(", ") );
结果:
[ <p>John, password, http://ejohn.org/</p> ]
--------------------------------------------------------------------------------------------------------------
not(expr)
删除与指定表达式匹配的元素Removes elements matching the specified expression from the set of matched elements.
返回值
jQuery参数
expr (String, DOMElement, Array<DOMElement>) : 一个表达式、一个元素或者一组元素示例
从p元素中删除带有 select 的ID的元素HTML 代码:
<p>Hello</p><p id="selected">Hello Again</p>
jQuery 代码:
$("p").not( $("#selected")[0] )
结果:
[ <p>Hello</p> ]
-------------------------------------------------------------------------------------------------------------------------
slice(start,[end])
选取一个匹配的子集与原来的slice方法类似
Selects a subset of the matched elements.
Behaves exactly like the built-in Array slice method.
返回值
jQuery参数
start (Integer) :开始选取子集的位置。第一个元素是0.如果是负数,则可以从集合的尾部开始选起。end (Integer) : (可选) 结束选取自己的位置,如果不指定,则就是本身的结尾。
示例
选择第一个p元素HTML 代码:
<p>Hello</p><p>cruel</p><p>World</p>
jQuery 代码:
$("p").slice(0, 1).wrapInner("<b></b>");
结果:
[ <p><b>Hello</b></p> ]
选择前两个p元素
HTML 代码:
<p>Hello</p><p>cruel</p><p>World</p>
jQuery 代码:
$("p").slice(0, 2).wrapInner("<b></b>");
结果:
[ <p><b>Hello</b></p>,<p><b>cruel</b></p> ]
只选取第二个p元素
HTML 代码:
<p>Hello</p><p>cruel</p><p>World</p>
jQuery 代码:
$("p").slice(1, 2).wrapInner("<b></b>");
结果:
[ <p><b>cruel</b></p> ]
只选取第二第三个p元素
HTML 代码:
<p>Hello</p><p>cruel</p><p>World</p>
jQuery 代码:
$("p").slice(1).wrapInner("<b></b>");
结果:
[ <p><b>cruel</b></p>, <p><b>World</b></p> ]
Selects all paragraphs, then slices the selection to include only the third element.
HTML 代码:
<p>Hello</p><p>cruel</p><p>World</p>
jQuery 代码:
$("p").slice(-1).wrapInner("<b></b>");
结果:
[ <p><b>World</b></p> ]
相关文章推荐
- juqery 学习之四 筛选--<查找>
- Java 8 stream()分组,过滤筛选 List<Object> 根据Object 中的某几个属性作为条件进行分组 去重过滤
- juqery 学习之五 文档处理--<插入>
- juqery 学习之四 筛选过滤
- juqery 学习之五 文档处理--<包裹、替换、删除、复制>
- juqery 学习之三 选择器--<简单><内容>
- juqery 学习之六 CSS--<css、位置、宽高>
- juqery 学习之三 选择器--<可见性><元素属性>
- rocketmq学习笔记 二 官方实例<消息过滤>
- juqery 学习之三 选择器--<层级><基本>
- 推荐引擎算法学习导论-(协同过滤、聚类、分类、模糊和精确k-means算法等)<转>
- juqery 学习之三 选择器--<子元素><表单>
- juqery 学习之四 筛选过滤
- OC学习--<猜拳游戏> 之 通过面向对象思想实现 2.0版本
- IOS cocos2d学习笔记-<五>CCAction精灵运动
- 冷热可观察量RxJava 学习笔记<二十二>
- <<The C Programming Language>>学习之路-练习题参考答案 1-11
- elasticsearch 学习博客系列<二> ES 中 index 设置 Mapping(表结构)
- java 从零开始,学习笔记之基础入门<Struts2_Spring_整合>(四十一)
- <学习笔记-杂>上传下 这20天的学习笔记以免以后丢失。。。