jQuery-Selectors(選擇器)的使用(四--五、內容篇&可見性篇)

作者: code-cat 來源: 博客園發布時間: 2009-12-25 13:30 閱讀: 2466 次推薦: 1 原文鏈接 [收藏]

系列文章導航：

jQuery-Selectors(選擇器)的使用(一、基本篇)

jQuery-Selectors(選擇器)的使用(二、層次篇)

jQuery-Selectors(選擇器)的使用(三、簡單篇)

jQuery-Selectors(選擇器)的使用(四--五、內容篇&可見性篇)

jQuery-Selectors(選擇器)的使用(六、屬性篇)

jQuery-Selectors(選擇器)的使用(七、子元素篇)

jQuery-Selectors(選擇器)的使用(八、表單篇)

jQuery-Selectors(選擇器)的使用(九、表單對象屬性篇)

jQuery-Selectors(選擇器)的使用(五、可見性篇)

1. :contains(text)用法

定   義：匹配包含給定文本的元素
返回值：Array
參   數：text (String) : 一個用以查找的字符串
實   例：將ID為"div_a1"的DIV中含有'aaa'的DIV元素的背景色改為紅色
代   碼： $("#div_a1 :contains(aaa)").css("background-color","red"); //點擊按鈕一將執行這句代碼

DIV ID="div_a1"

DIV ID="div_a2" aaa

DIV ID="div_a3" bbb

DIV ID="div_a4" aaa

DIV ID="div_a5" aaa

2. :empty用法
定   義：匹配所有不包含子元素或者文本的空元素
返回值：Array
實   例：將ID為"div_b1"的DIV中所有不包含子元素或者文本的空元素的背景色改為紅色
代   碼： $("#div_b1 :empty").css("background-color","red"); //點擊按鈕二將執行這句代碼

DIV ID="div_b1"

DIV ID="div_b2"

DIV ID="div_b5"

注意：input元素會被認會是空元素

3. :has(selector)用法
定   義：匹配含有選擇器所匹配的元素的元素
返回值：Array
參   數：selector (Selector) : 一個用于篩選的選擇器
實   例：將ID為"div_c1"的DIV中所有包含span元素的元素的背景色改為紅色
代   碼： $("#div_c1 :has(span)").css("background-color","red"); //點擊按鈕三將執行這句代碼

DIV ID="div_c1"

DIV ID="div_c2" span

DIV ID="div_c3"

DIV ID="div_c4" span

span span

DIV ID="div_c5" span

4. :parent用法
定   義：匹配含有子元素或者文本的元素
返回值：Array
實   例：將ID為"div_d1"的DIV中所有包含子元素或者文本的元素的背景色改為紅色
代   碼： $("#div_d1 :parent").css("background-color","red"); //點擊按鈕四將執行這句代碼

DIV ID="div_d1"

DIV ID="div_d2"

DIV ID="div_d5"

jQuery-Selectors(選擇器)的使用(五、可見性篇)

1. :hidden用法
定   義：匹配所有的不可見元素，input 元素的 type 屬性為 "hidden" 的話也會被匹配到
返回值：Array
實   例：將ID為"div_e1"的DIV中所有被隱藏的DIV顯示出來
代   碼： $("#div_e1 div:hidden").css("display","block"); //點擊按鈕五將執行這句代碼

DIV ID="div_e1"

DIV ID="div_e2"

DIV ID="div_e5"

2. :visible用法
定   義：匹配所有的可見元素
返回值：Array
實   例：將ID為"div_f1"的DIV中所有可見的DIV的背景色改為紅色，并顯示被隱藏的DIV
代   碼： $("#div_f1 div:visible").css("background-color","red");$("#div_f1 div:hidden").css("display","block"); //點擊按鈕六將執行這句代碼

DIV ID="div_f1"

DIV ID="div_f2"

DIV ID="div_f5"

你可以下載這篇文章的HTML源文件：download