多多色-多人伦交性欧美在线观看-多人伦精品一区二区三区视频-多色视频-免费黄色视屏网站-免费黄色在线

^{<noscript id="dmtj1"></noscript>}

國內最全IT社區平臺聯系我們 | 收藏本站

您當前位置：首頁 > web前端 > jquery > jQuery-Selectors(選擇器)的使用(八、表單篇)

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

來源：程序員人生發布時間：2014-05-07 06:55:44 閱讀次數：3075次

本系列文章主要講述jQuery框架的選擇器(Selectors)使用方法，我將以實例方式進行講述，以簡單，全面為基礎，不會涉及很深，我的學習方法：先入門，后進階！
本系列文章分為：基本篇、層次篇、簡單篇、內容篇、可見性篇、屬性篇、子元素篇、表單篇、表單對象屬性篇共9篇文章。
本篇講解：:input,:text,:password,:radio,:checkbox,:submit,:image,:reset,:button,:file,:hidden的用法。
您對本系列文章有任何建議或意見請發送到郵箱：sjzlgt@qq.com
由于是第一次寫技術性系列文章，難免會出錯或代碼BUG，歡迎指出，在此謝過！
在IE6/7/8、火狐下測試過了，效果都能實現。
您可以到jQuery官網來學習更多的有關jQuery知識。
版權所有：code-cat 博客:http://www.cnblogs.com/bynet 轉載請保留原作者、出處和版權信息！

1. :input用法
定義：匹配所有 input, textarea, select 和 button 元素
返回值：Array<Element>
實例：將ID為"div_a1"的DIV中所有的input元素的背景色改為紅色(radio,checkbox元素的狀態改為選中)
代碼： $("#div_a1 :input").css("background-color","red");$("#div_a1 :input").attr("checked",true); //點擊按鈕一將執行這句代碼

DIV ID="div_a1"
span ID="span_1"

label

注意：因radio,checkbox改變背景色在火狐中看不出效果，因為我用第二句代碼使這些元素的狀態改為選中。這樣做雖說不合理，但能說明:input可以選擇到這些元素。

2. :text用法
定義：匹配所有的單行文本框
返回值：Array<Element>
實例：將ID為"div_b1"的DIV中所有的文本框的背景色改為紅色
代碼： $("#div_b1 :text").css("background-color","red"); //點擊按鈕二將執行這句代碼

DIV ID="div_b1"
span ID="span_1"

label

注意：password元素沒有被選擇！

3. :password用法
定義：匹配所有密碼框
返回值：Array<Element>
實例：將ID為"div_c1"的DIV中所有的密碼框的背景色改為紅色
代碼： $("#div_c1 :password").css("background-color","red"); //點擊按鈕三將執行這句代碼

DIV ID="div_c1"
span ID="span_1"

label

4. :radio用法
定義：匹配所有單選按鈕
返回值：Array<Element>
實例：將ID為"div_d1"的DIV中所有radio元素的狀態改為選中
代碼： $("#div_d1 :radio").attr("checked",true); //點擊按鈕四將執行這句代碼

5. :checkbox用法
定義：匹配所有復選框
返回值：Array<Element>
實例：將ID為"div_e1"的DIV中所有checkbox元素的狀態改為選中
代碼： $("#div_e1 :checkbox").attr("checked",true); //點擊按鈕五將執行這句代碼

6. :submit用法
定義：匹配所有提交按鈕
返回值：Array<Element>
實例：將ID為"div_f1"的DIV中所有提交按鈕(submit)的背景色改為紅色
代碼： $("#div_f1 :submit").css("background-color","red"); //點擊按鈕六將執行這句代碼

DIV ID="div_f1"
span ID="span_1"

label

7. :image用法
定義：匹配所有圖像域
返回值：Array<Element>
實例：將ID為"div_g1"的DIV中所有圖片框元素的背景色改為紅色
代碼： $("#div_g1 :image").css("background-color","red"); //點擊按鈕七將執行這句代碼

DIV ID="div_g1"
span ID="span_1"

label

8. :reset用法
定義：匹配所有重置按鈕
返回值：Array<Element>
實例：將ID為"div_h1"的DIV中所有重置按鈕的背景色改為紅色
代碼： $("#div_h1 :reset").css("background-color","red"); //點擊按鈕八將執行這句代碼

DIV ID="div_h1"
span ID="span_1"

label

9. :button用法
定義：匹配所有按鈕
返回值：Array<Element>
實例：將ID為"div_i1"的DIV中所有按鈕的背景色改為紅色
代碼： $("#div_i1 :button").css("background-color","red"); //點擊按鈕九將執行這句代碼

DIV ID="div_i1"
span ID="span_1"

label

注意：reset和submit沒有被選擇！

10. :file用法
定義：匹配所有文件域
返回值：Array<Element>
實例：將ID為"div_j1"的DIV中所有上傳文件元素的背景色改為紅色
代碼： $("#div_j1 :file").css("background-color","red"); //點擊按鈕十將執行這句代碼

DIV ID="div_j1"
span ID="span_1"

label

11. :hidden用法
定義：匹配所有不可見元素，或者type為hidden的元素
返回值：Array<Element>
實例：將ID為"div_k"的DIV中所有隱藏的元素顯示出來
代碼： $("#div_k1 :hidden").css("display","block"); //點擊按鈕十一將執行這句代碼