源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

juqery 学习之四 筛选过滤

  • 时间:2021-06-13 09:39 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:juqery 学习之四 筛选过滤

eq(index)

获取第N个元素
这个元素的位置是从0算起。

[h1]返回值[/h1] jQuery [h1]参数[/h1] [b]index [/b](Integer) :元素在jQuery对象中的索引 [h1]示例[/h1] 获取匹配的第二个元素 [b]HTML 代码:[/b]
<p> This is just a test.</p> <p> So is this</p>
[b]jQuery 代码:[/b]
$("p").eq(1)
[b]结果:[/b]
[ <p> So is this</p> ] --------------------------------------------------------------------------------------------------------------

hasClass(class)

检查当前的元素是否含有某个特定的类,如果有,则返回true。
这其实就是 is("." + class)。

[h1]返回值[/h1] Boolean [h1]参数[/h1] [b]class [/b](String) : 用于匹配的类名 [h1]示例[/h1] 给包含有某个类的元素进行一个动画。 [b]HTML 代码:[/b]
<div class="protected"></div><div></div>
[b]jQuery 代码:[/b]
$("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)

筛选出与指定表达式匹配的元素集合。
这个方法用于缩小匹配的范围。用逗号分隔多个表达式

[h1]返回值[/h1] jQuery [h1]参数[/h1] [b]expr [/b](Expression) : 表达式 [h1]示例[/h1] 保留带有select类的元素 [b]HTML 代码:[/b]
<p>Hello</p><p>Hello Again</p><p class="selected">And Again</p>
[b]jQuery 代码:[/b]
$("p").filter(".selected")
[b]结果:[/b]
[ <p class="selected">And Again</p> ]

保留第一个以及带有select类的元素 [b]HTML 代码:[/b]
<p>Hello</p><p>Hello Again</p><p class="selected">And Again</p>
[b]jQuery 代码:[/b]
$("p").filter(".selected, :first")
[b]结果:[/b]
[ <p>Hello</p>, <p class="selected">And Again</p> ]
--------------------------------------------------------------------------------------------------------------

filter(fn)

筛选出与指定函数返回值匹配的元素集合
这个函数内部将对每个对象计算一次 (正如 '$.each'). 如果调用的函数返回false则这个元素被删除,否则就会保留。

[h1]返回值[/h1] jQuery [h1]参数[/h1] [b]fn [/b](Function) : 传递进filter的函数 [h1]示例[/h1] 保留子元素中不含有ol的元素。 [b]HTML 代码:[/b]
<p><ol><li>Hello</li></ol></p><p>How are you?</p>
[b]jQuery 代码:[/b]
$("p").filter(function(index) {   return $("ol", this).length == 0; });
[b]结果:[/b]
[ <p>How are you?</p> ]
--------------------------------------------------------------------------------------------------------------

is(expr)

用一个表达式来检查当前选择的元素集合,如果其中至少有一个元素符合这个给定的表达式就返回true。
如果没有元素符合,或者表达式无效,都返回'false'. 'filter' 内部实际也是在调用这个函数,所以,filter()函数原有的规则在这里也适用。

[h1]返回值[/h1] Boolean [h1]参数[/h1] [b]expr [/b](String) :用于筛选的表达式 [h1]示例[/h1] 由于input元素的父元素是一个表单元素,所以返回true。 [b]HTML 代码:[/b]
<form><input type="checkbox" /></form>
[b]jQuery 代码:[/b]
$("input[type='checkbox']").parent().is("form")
[b]结果:[/b]
true
--------------------------------------------------------------------------------------------------------------

map(callback)

将一组元素转换成其他数组(不论是否是元素数组)
你可以用这个函数来建立一个列表,不论是值、属性还是CSS样式,或者其他特别形式。这都可以用'$.map()'来方便的建立。

[h1]返回值[/h1] jQuery [h1]参数[/h1] [b]callback [/b](Function) : 给每个元素执行的函数 [h1]示例[/h1] 把form中的每个input元素的值建立一个列表。 [b]HTML 代码:[/b]
<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>
[b]jQuery 代码:[/b]
$("p").append( $("input").map(function(){   return $(this).val(); }).get().join(", ") );
[b]结果:[/b]
[ <p>John, password, http://ejohn.org/</p> ]
--------------------------------------------------------------------------------------------------------------

not(expr)

删除与指定表达式匹配的元素

[h1]返回值[/h1] jQuery [h1]参数[/h1] [b]expr [/b](String, DOMElement, Array<DOMElement>) : 一个表达式、一个元素或者一组元素 [h1]示例[/h1] 从p元素中删除带有 select 的ID的元素 [b]HTML 代码:[/b]
<p>Hello</p><p id="selected">Hello Again</p>
[b]jQuery 代码:[/b]
$("p").not( $("#selected")[0] )
[b]结果:[/b]
[ <p>Hello</p> ]
-------------------------------------------------------------------------------------------------------------------------

slice(start,[end])

选取一个匹配的子集
与原来的slice方法类似

[h1]返回值[/h1] jQuery [h1]参数[/h1] [b]start [/b](Integer) :开始选取子集的位置。第一个元素是0.如果是负数,则可以从集合的尾部开始选起。 [b]end [/b](Integer) : (可选) 结束选取自己的位置,如果不指定,则就是本身的结尾。 [h1]示例[/h1] 选择第一个p元素 [b]HTML 代码:[/b]
<p>Hello</p><p>cruel</p><p>World</p>
[b]jQuery 代码:[/b]
$("p").slice(0, 1).wrapInner("<b></b>");
[b]结果:[/b]
[ <p><b>Hello</b></p> ]

选择前两个p元素 [b]HTML 代码:[/b]
<p>Hello</p><p>cruel</p><p>World</p>
[b]jQuery 代码:[/b]
$("p").slice(0, 2).wrapInner("<b></b>");
[b]结果:[/b]
[ <p><b>Hello</b></p>,<p><b>cruel</b></p> ]

只选取第二个p元素 [b]HTML 代码:[/b]
<p>Hello</p><p>cruel</p><p>World</p>
[b]jQuery 代码:[/b]
$("p").slice(1, 2).wrapInner("<b></b>");
[b]结果:[/b]
[ <p><b>cruel</b></p> ]

只选取第二第三个p元素 [b]HTML 代码:[/b]
<p>Hello</p><p>cruel</p><p>World</p>
[b]jQuery 代码:[/b]
$("p").slice(1).wrapInner("<b></b>");
[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. [b]HTML 代码:[/b]
<p>Hello</p><p>cruel</p><p>World</p>
[b]jQuery 代码:[/b]
$("p").slice(-1).wrapInner("<b></b>");
[b]结果:[/b]
[ <p><b>World</b></p> ]
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部