Home > Web Front-end > JS Tutorial > Juqery Learning 4 Filtering_jquery

Juqery Learning 4 Filtering_jquery

WBOY
Release: 2016-05-16 18:15:04
Original
967 people have browsed it

eq(index)

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

返回值

jQuery

参数

index (Integer) :元素在jQuery对象中的索引

示例

获取匹配的第二个元素

HTML 代码:

This is just a test.

So is this

jQuery 代码:

$("p").eq(1)

结果:

[

So is this

]
--------------------------------------------------------------------------------------------------------------

hasClass(class)

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

返回值

Boolean

参数

class (String) : 用于匹配的类名

示例

给包含有某个类的元素进行一个动画。

HTML 代码:

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)

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

返回值

jQuery

参数

expr (Expression) : 表达式

示例

保留带有select类的元素

HTML 代码:

Hello

Hello Again

And Again

jQuery 代码:

$("p").filter(".selected")

结果:

[

And Again

]

保留第一个以及带有select类的元素

HTML 代码:

Hello

Hello Again

And Again

jQuery 代码:

$("p").filter(".selected, :first")

结果:

[

Hello

,

And Again

]

--------------------------------------------------------------------------------------------------------------

filter(fn)

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

返回值

jQuery

参数

fn (Function) : 传递进filter的函数

示例

保留子元素中不含有ol的元素。

HTML 代码:

  1. Hello

How are you?

jQuery 代码:

$("p").filter(function(index) {
  return $("ol", this).length == 0;
});

结果:

[

How are you?

]

--------------------------------------------------------------------------------------------------------------

is(expr)

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

返回值

Boolean

参数

expr (String) :用于筛选的表达式

示例

由于input元素的父元素是一个表单元素,所以返回true。

HTML 代码:

jQuery 代码:

$("input[type='checkbox']").parent().is("form")

结果:

true

--------------------------------------------------------------------------------------------------------------

map(callback)

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

返回值

jQuery

参数

callback (Function) : 给每个元素执行的函数

示例

把form中的每个input元素的值建立一个列表。

HTML 代码:

Values:



 
 
 

jQuery 代码:

$("p").append( $("input").map(function(){
  return $(this).val();
}).get().join(", ") );

结果:

[

John, password, http://ejohn.org/

]

--------------------------------------------------------------------------------------------------------------

not(expr)

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

Return value

jQuery

Parameters

expr (String, DOMElement, Array) : an expression, an element or a group of elements

Example

Remove the element with the ID of select from the p element

HTML code:

Hello

Hello Again

jQuery code:

$("p").not( $("#selected")[0] )

Result:

[

Hello

]
--------------------------------- -------------------------------------------------- ----------------------------------------

slice(start,[end])

Select a matching subset
Similar to the original slice method

Return value

jQuery

Parameters

start (Integer): Start selecting the position of the subset. The first element is 0. If it is a negative number, you can start from the end of the set.

end (Integer): (Optional) End the selected position. If not specified, it will be the end of itself.

Example

Select the first p element

HTML code:

Hello

cruel

World

jQuery code:

$("p").slice(0, 1).wrapInner("");

Result:

[

Hello

]

Select the first two p elements

HTML code:

Hello

cruel

World

jQuery code:

$("p").slice(0, 2).wrapInner("");

Result:

[

Hello

,

cruel

]

Select only the second p element

HTML code:

Hello

cruel

World

jQuery code:

$("p").slice(1, 2).wrapInner("");

Result:

[

cruel

]

Select only the second and third p elements

HTML code:

Hello

cruel

World

jQuery code:

$("p").slice(1).wrapInner("");

Result:

[

cruel

,

World

]

Selects all paragraphs, then slices the selection to include only the third element.

HTML code:

Hello

cruel

World

jQuery code:

$("p").slice(-1).wrapInner("");

Result:

[

World

]
Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template