一個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()
更改為後代元素、祖先元素、兄弟元素的這些操作,會在原先元素以外選取元素。可用於將原先元素和更改操作選取的元素合並在一起
更改為部分元素集合
方法
描述
等價
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))
還原jQuery對象
方法
描述
end()
使執行更改jQuery對象操作後的選取元素還原到更改之前。若希望還原多個更改操作,則多次調用,直到最後會返回空集