DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery特效代碼 >> jQuery學習筆記 更改jQuery對象
jQuery學習筆記 更改jQuery對象
編輯: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()

更改為後代元素、祖先元素、兄弟元素的這些操作,會在原先元素以外選取元素。可用於將原先元素和更改操作選取的元素合並在一起

更改為部分元素集合

方法

描述

等價

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對象操作後的選取元素還原到更改之前。若希望還原多個更改操作,則多次調用,直到最後會返回空集

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved