JQuery筛选.docx

jQuery代码:

$（"p"）.not（$（"#selected"）[0]）

结果:

[

Hello

10slice（start,[end]）

概述

选取一个匹配的子集

与原来的slice方法类似

参数

startIntegerV1.1.4

开始选取子集的位置。

第一个元素是0.如果是负数，则可以从集合的尾部开始选起。

endIntegerV1.1.4

结束选取自己的位置，如果不指定，则就是本身的结尾。

示例

描述:

选择第一个p元素

HTML代码:

Hello

cruel

World

jQuery代码:

$（"p"）.slice（0,1）.wrapInner（""）;

结果:

[

Hello

描述:

选择前两个p元素

HTML代码:

Hello

cruel

World

jQuery代码:

$（"p"）.slice（0,2）.wrapInner（""）;

结果:

[

Hello

cruel

描述:

只选取第二个p元素

HTML代码:

Hello

cruel

World

jQuery代码:

$（"p"）.slice（1,2）.wrapInner（""）;

结果:

[

cruel

描述:

只选取第二第三个p元素

HTML代码:

Hello

cruel

World

jQuery代码:

$（"p"）.slice

（1）.wrapInner（""）;

结果:

[

cruel

World

描述:

选取第最后一个p元素

HTML代码:

Hello

cruel

World

jQuery代码:

$（"p"）.slice（-1）.wrapInner（""）;

结果:

[

World

11children（[expr]）

概述

取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合。

可以通过可选的表达式来过滤所匹配的子元素。

注意：

parents（）将查找所有祖辈元素，而children（）只考虑子元素而不考虑所有后代元素。

参数

exprStringV1.0

用以过滤子元素的表达式

示例

描述:

查找DIV中的每个子元素。

HTML代码:

Hello

AndAgain

jQuery代码:

$（"div"）.children（）

结果:

[HelloAgain]

描述:

在每个div中查找.selected的类。

HTML代码:

jQuery代码:

$（"div"）.children（".selected"）

结果:

[HelloAgain

12closest（expr,[con]|obj|ele）

概述

jQuery1.3新增。

从元素本身开始，逐级向上级元素匹配，并返回最先匹配的元素。

。

closest会首先检查当前元素是否匹配，如果匹配则直接返回元素本身。

如果不匹配则向上查找父元素，一层一层往上，直到找到匹配选择器的元素。

如果什么都没找到则返回一个空的jQuery对象。

closest和parents的主要区别是：

1，前者从当前元素开始匹配寻找，后者从父元素开始匹配寻找；2，前者逐级向上查找，直到发现匹配的元素后就停止了，后者一直向上查找直到根元素，然后把这些元素放进一个临时集合中，再用给定的选择器表达式去过滤；3，前者返回0或1个元素，后者可能包含0个，1个，或者多个元素。

closest对于处理事件委托非常有用。

参数

exprString,ArrayV1.3

用以过滤元素的表达式。

jQuery1.4开始，也可以传递一个字符串数组，用于查找多个元素。

expr,[context]StringV1.4

expr：

用以过滤子元素的表达式

context：

DOM元素在其中一个匹配的元素可以被发现。

如果没有上下文在当时的情况下通过了jQuery设置将被使用。

jQueryobjectobjectV1.6

一个用于匹配元素的jQuery对象

elementDOMElementV1.6

一个用于匹配元素的DOM元素。

示例

描述:

展示如何使用clostest查找多个元素

HTML代码:

jQuery代码:

$（"li:

first"）.closest（["ul","body"]）;

结果:

[ul,body]

描述:

展示如何使用clostest来完成事件委托。

HTML代码:

• Clickme!

• YoucanalsoClickme!

jQuery代码:

$（document）.bind（"click",function（e）{

$（e.target）.closest（"li"）.toggleClass（"hilight"）;

}）;