DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery特效代碼 >> 跟著JQuery API學Jquery 之三 篩選
跟著JQuery API學Jquery 之三 篩選
編輯:JQuery特效代碼     
1.過濾
eq(index) 看這個函數和基礎裡的:eq貌似是一樣的(其實就是一樣的)
比如我們對<div>1</div><div>1</div>做選擇,那我們可以用$(“div”).eq(1)或$(“div:eq(1)”)
來選中第二個div效果是一樣的

hasClass(class) 用來判斷當前元素是否含有一個類 這個和is(“.”+class)是一樣的,我們來看一下is()這個函數用來干嗎的 ,它是用一個表達式來檢查當前選擇的元素的集合,如果其中至少有一個元素符合給定表達式就返回true。is(expr)裡面的參數就是選擇器的參數。

filter(expr) 用來選出帶有匹配表達式的元素的集合,這個和is有點類似,只不過is是返回的bool型,用於判斷,filter用來縮小范圍,filter中的參數可以是一個函數,函數的返回值為bool型,當返回的是真的時候就保留節點。其實就是對對象做一個循環,然後刪除不要的。比如有<p class="aa">asdf</p><p>2343</p>我們選擇class為aa的那個 把他的文本改成一段文字
$("p").filter(function() { return $(this).hasClass("aa") }).text("選擇的東西")

not(txpr) 用來刪除匹配的元素,這個又和前面有一個:not()一樣
slice(start,[end]) 選擇一個段 從start開始到end 結束 如果沒有end則到結尾
$("p").slice(0, 1),我總覺得這個函數的第二個變量該成num 要好一點 ,從哪一個開始,選擇前num個。

2 查找
add(expr) 把與表達式匹配的添加到原來的對象中,這個有點像多選擇器比如$(“#id,.cs”)
也可以寫成$(“#id”).add(“.cs”)效果一樣
Children([expr])得到所有子元素的集合
Contents() 查找匹配元素內部所有的子節點。如果是iframe則查找文檔的內容。這個可以很方便的用來變更iframe裡面的內容,比如文本編輯器。。
find(expr) 搜索與指定表達式匹配的內容,這個也可以用選擇器來實現 比如 $(“ul li”)可以寫成 $(“ul”).find(“li”)
next(expr) 搜索同輩元素中緊跟在後面的元素,這個有是 a+b的選擇器形式 比如我們要選擇div後面跟p標簽的$(“div+p”)當然也可以用$(“div”).next(“p”)
nextAll() 搜索後面所有的同輩元素 這個和 a~b是一樣的$(“div~p”)和$(“div”).nextAll(“p”)是一樣的
Prev([expr]) 取得緊鄰的同輩元素的前一個這個和next()剛好相反
PrevAll([expr])取得前面所有的元素這個和nextAll() 剛好相反
Siblings([expr]) 這個函數應該就是nextAll()和prevAll()的和了

offsetParent() 返回第一個元素的父節點,為什麼是第一個元素呢,這個用JavaScript來實現是Parent(),但是我們這個用的是jquery,操作的是jquery對象,在很多的教程上都在強調我們要分清JQuery對象和JS對象,其實Jquery對象就是一個array數組,就是要我們注意操作時要把數組的值取出來了在用想用第一個就在後面價格索引[0]來得到第一個對象。
Parent(expr)取得所有元素的都包含的父元素,我們已經知道jquery對象是一個數組,那麼裡面可能包含多個節點,那麼我們就要找出這多個節點共同的父節點,也就是找出一個能夠包含他們所有的一個節點,就像有兩個人一個是湖北一個是河南,你要找他的上一級,就是他們都是中國的。當然你也可以在裡面填一個參數parent(湖北)那麼最後我們得到了的節點是湖北。

3 串聯
串聯裡面只有兩個函數 andSelf() 和end()
andSelf() 加入先前所選的加入到當前的元素中,這個解釋讀起來有點繞口。這裡就要提一下Jquery的鏈式操作。比如你選擇了 中國-湖北 得到了湖北這個節點 然後你又用 andSelf()把中國在加進入,這個對你想操作你沒有篩選前的元素會很有用。
end() 回到最近一個有“破壞性”的操作之前,那什麼是破壞性呢,就是對一個集合做了在次的操作
比如前面我們說的next(),到這裡我們就知道為什麼我們能用$(“div+p”)完成的操作要寫成$(“div”).next(“p”)了。
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved