jQuery study notes change jQuery object_jquery

jQuery代码的任务就是生成jQuery对象A，操作jQuery对象A；生成jQuery对象B，操作jQuery对象B……但是若此过程中，对象A、B……之间有某种关系，那么完全没必要一个个去$(selector)，这很繁琐的。因此jQuery提供了一些方法，使流程变为生成jQuery对象A，操作jQuery对象A；更改为jQuery对象B，操作jQuery对象B……

　　一个jQuery对象，既要进行N次操作，又要进行M次更改。因此有必要将生成的jQuery对象存储在一个变量中，多次调用。然而，试想每进行一次操作和更改就得声明一个新变量，这也很繁琐啊。所以jQuery采取了链式操作的方法，即执行操作后返回操作对象本身，于是可以持续执行下一个操作，直到需要更改对象时方执行更改，然后返回更改后对象。这实际上就是一种函数式思维。

　　举个例子，左右对比一下：

一般调用	链式调用
a=$(“div”); a.addClass(“class”); b=a.children(“ul”); b.show();                          c=a.siblings(); c.removeClass(“class”);	$(“div”).addClass(“class”) .children(“ul”).show().end() .siblings().removeClass(“class”);

　　接下来就介绍一下更改jQuery对象的各种方法：

更改为后代元素集合

方法	描述	等价
children(selector)	在原先元素的后代元素中，选取匹配selector的元素。若不设置参数，children()等价于children(*)，选取原先元素的所有子元素	$(selector1).children(selector2)≡$(selector1>selector2)
find(selector)	在原先元素的后代元素中，选取匹配selector的元素。若不设置参数，find()等价于find(“:not(*)”)，不会选取原先元素的任何后代元素	$(selector1).find(selector2)≈$(selector1 selector2)。若参数使用基本过滤选择器，不是在全部后代元素中选取过滤匹配元素，而是在每一个后代元素中分别选取过滤匹配元素
contents()	选取原先元素的子元素或文本块

 

更改为祖先元素集合

方法	描述
parent(selector)	在原先元素的父元素中，选取匹配selector的元素。若不设置参数，parent()等价于parent(“*”)，选取原先元素的所有父元素
parents(selector)	在原先元素的祖先元素中，选取匹配selector的元素。若不设置参数，parents()等价于parents(“*”)，选取原先元素的所有祖先元素
parentsUntil(selector)	选取原先元素的祖先元素，直到遇到匹配selector的元素为止，且不包括该元素。若不设置参数，parentsUntil()等价于parents()，选取原先元素的所有祖先元素
offsetParents()	选取原先元素的最近祖先定位元素，且该元素CSS属性display不能为none。定位元素指CSS属性position
closest(selector)	在原先元素及其祖先元素中，选取匹配selector的最近元素

 

更改为兄弟元素集合

方法	描述	等价
next(selector)	在原先元素后面的第一个兄弟元素中，选取匹配selector的元素。若不设置参数，next()等价于next(“*”)，选取原先元素后面的第一个兄弟元素	$(selector1).next(selector2)≡$(selector1+selector2)
prev(selector)	在原先元素前面的第一个兄弟元素中，选取匹配selector的元素。若不设置参数，prev()等价于prev(“*”)，选取原先元素前面的第一个兄弟元素
nextAll(selector)	在原先元素后面的兄弟元素中，选取匹配selector的元素。若不设置参数，nextAll()等价于nextAll(“*”)，选取原先元素后面的所有兄弟元素	$(selector1).nextAll(selector2)≡$(selector1~selector2)
prevAll(selector)	在原先元素前面的兄弟元素中，选取匹配selector的元素。若不设置参数，prevAll()等价于prevAll(“*”)，选取原先元素前面的所有兄弟元素
siblings(selector)	在原先元素的兄弟元素中，选取匹配selector的元素。若不设置参数，siblings()等价于siblings(“*”)，选取原先元素的所有兄弟元素
nextUntil(selector)	选取原先元素后面的兄弟元素，直到遇到匹配selector的元素为止，且不包括该元素。若不设置参数，nextUntil()等价于nextAll()，选取原先元素后面的所有兄弟元素
prevUntil(selector)	选取原先元素前面的兄弟元素，直到遇到匹配selector的元素为止，且不包括该元素。若不设置参数，prevUntil()等价于prevAll()，选取原先元素前面的所有兄弟元素

 

更改为更多元素集合

方法	描述	等价
add(selector)	在原先元素的基础上添加选取匹配selector的元素	$(selector1).add(selector2)≡$(selector1,selector2)
andSelf()	更改为后代元素、祖先元素、兄弟元素的这些操作，会在原先元素以外选取元素。可用于将原先元素和更改操作选取的元素合并在一起

is changed to a collection of partial elements

方法	描述	等价
eq(index)	在原先元素中筛选索引值等于index的元素，索引值从0开始正数，也可以从-1开始倒数，但不能混用	$(selector).eq(index)≡$(selector:eq(index))
first()	在原先元素中筛选第一个元素，等同于eq(0)	$(selector).first()≡$(selector:first)
last()	在原先元素中筛选最后一个元素，等同于eq(-1)	$(selector).last()≡$(selector:last)
slice(start,[end])	在原先元素中筛选索引值从start到end-1的元素。若不传入end，则筛选索引值大于等于start的元素
filter(selector)	在原先元素中筛选匹配selector的元素
filter(fn(index))	使用函数筛选，对于索引值等于index的元素，若函数返回true，该元素包含在筛选集合中，否则排除在外	可实现$(selector:even(index))、$(selector:odd(index))、 $(selector:gt(index))、 $(selector:lt(index))等
not(selector)	在原先元素中筛选不匹配selector的元素	$(selector1).not(selector2)≡$(selector1:not(selector2))
not(fn(index))	使用函数筛选，对于索引值等于index的元素，若函数返回true，该元素排除在筛选集合外，否则包含在内	可实现$(selector:even(index))、$(selector:odd(index))、 $(selector:gt(index))、 $(selector:lt(index))等
has(selector)	在原先元素中筛选出拥有匹配selector后代元素的元素	$(selector1).has(selector2)≡$(selector1:has(selector2))

Method                                                       

Description

Equivalent

方法	描述
end()	使执行更改jQuery对象操作后的选取元素还原到更改之前。若希望还原多个更改操作，则多次调用，直到最后会返回空集

eq(index)

Select the elements whose index value is equal to index among the original elements. The index value starts from 0 as a positive number, or it can count down from -1, but it cannot be mixed

$(selector).eq(index)≡$(selector:eq(index))

first()

Select the first element among the original elements, which is equivalent to eq(0)

$(selector).first()≡$(selector:first)

last()

Select the last element among the original elements, which is equivalent to eq(-1)

$(selector).last()≡$(selector:last)

slice(start,[end])

Select elements with index values ​​from start to end-1 in the original elements. If end is not passed in, elements with index values ​​greater than or equal to start will be filtered

filter(selector)

Filter elements matching the selector from the original elements

filter(fn(index))

Use function filtering. For elements whose index value is equal to index, if the function returns true, the element is included in the filtered collection, otherwise it is excluded

Can realize $(selector:even(index)), $(selector:odd(index)), $(selector:gt(index))、 $(selector:lt(index)) etc.

not(selector)

Filter elements that do not match the selector from the original elements

$(selector1).not(selector2)≡$(selector1:not(selector2))

not(fn(index))

Use function filtering. For elements whose index value is equal to index, if the function returns true, the element will be excluded from the filtered collection, otherwise it will be included

Can realize $(selector:even(index)), $(selector:odd(index)), $(selector:gt(index))、 $(selector:lt(index)) etc.

has(selector)

Filter out elements that have descendant elements that match the selector from the original elements

$(selector1).has(selector2)≡$(selector1:has(selector2))

Restore jQueryObject

Method	Description
end()	Restore the selected elements after changing the jQuery object to before the change. If you want to restore multiple change operations, call it multiple times until an empty set is returned in the end