jQuery-Selectors(選擇器)的使用(四-五、內容篇&可見性篇)
來源：程序員人生 發布時間：2013-11-26 03:52:46 閱讀次數：3925次
| 本系列文章主要講述jQuery框架的選擇器(Selectors)使用方法，我將以實例方式進行講述，以簡單，全面為基礎，不會涉及很深，我的學習方法：先入門，后進階！
本系列文章分為：基本篇、層次篇、簡單篇、內容篇、可見性篇、屬性篇、子元素篇、表單篇、表單對象屬性篇共9篇文章。
本篇講解：:contains(text),:empty,:has(selector),:parent,:hidden,:visible的用法。
您對本系列文章有任何建議或意見請發送到郵箱：sjzlgt@qq.com
由于是第一次寫技術性系列文章，難免會出錯或代碼BUG，歡迎指出，在此謝過！
您可以到jQuery官網來學習更多的有關jQuery知識。
版權所有：code-cat 博客:http://www.cnblogs.com/bynet/ 轉載請保留出處和版權信息！ 由于內容篇與可見性篇內容較少，因此我將兩篇文章合二為一，一起發布出來。 |
1. :contains(text)用法定義：匹配包含給定文本的元素
返回值：Array<Element>
參數：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<Element>
實例：將ID為"div_b1"的DIV中所有不包含子元素或者文本的空元素的背景色改為紅色
代碼： $("#div_b1 :empty").css("background-color","red"); //點擊按鈕二將執行這句代碼注意：input元素會被認會是空元素 3. :has(selector)用法定義：匹配含有選擇器所匹配的元素的元素
返回值：Array<Element>
參數：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<Element>
實例：將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(選擇器)的使用(五、可見性篇)
版權所有：code-cat 博客:http://www.cnblogs.com/bynet/ 轉載請保留出處和版權信息！ 1. :hidden用法定義：匹配所有的不可見元素，input 元素的 type 屬性為 "hidden" 的話也會被匹配到
返回值：Array<Element>
實例：將ID為"div_e1"的DIV中所有被隱藏的DIV顯示出來
代碼： $("#div_e1 div:hidden").css("display","block"); //點擊按鈕五將執行這句代碼DIV ID="div_e1"
DIV ID="div_e2"
被隱藏的DIV
被隱藏的DIV
DIV ID="div_e5"
2. :visible用法定義：匹配所有的可見元素
返回值：Array<Element>
實例：將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
被隱藏的DIV
DIV ID="div_f5"
文章導讀：
jQuery-Selectors(選擇器)的使用(一、基本篇)
jQuery-Selectors(選擇器)的使用(二、層次篇)
jQuery-Selectors(選擇器)的使用(三、簡單篇)
jQuery-Selectors(選擇器)的使用(四-五、內容篇&可見性篇)
jQuery-Selectors(選擇器)的使用(六、屬性篇)
jQuery-Selectors(選擇器)的使用(七、子元素篇)
生活不易，碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈
------分隔線----------------------------
------分隔線----------------------------
