jQuery-Selectors(選擇器)的使用(八、表單篇)
系列文章導航：
jQuery-Selectors(選擇器)的使用(一、基本篇)
jQuery-Selectors(選擇器)的使用(二、層次篇)
jQuery-Selectors(選擇器)的使用(三、簡單篇)
jQuery-Selectors(選擇器)的使用(四--五、內容篇&可見性篇)
jQuery-Selectors(選擇器)的使用(六、屬性篇)
jQuery-Selectors(選擇器)的使用(七、子元素篇)
jQuery-Selectors(選擇器)的使用(八、表單篇)
jQuery-Selectors(選擇器)的使用(九、表單對象屬性篇)
1. :input用法
定 義：匹配所有 input, textarea, select 和 button 元素
返回值：Array
實 例：將ID為"div_a1"的DIV中所有的input元素的背景色改為紅色(radio,checkbox元素的狀態改為選中)
代 碼： $("#div_a1 :input").css("background-color","red");$("#div_a1 :input").attr("checked",true); //點擊按鈕一將執行這句代碼
定 義：匹配所有 input, textarea, select 和 button 元素
返回值：Array
實 例：將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"
注意：因radio,checkbox改變背景色在火狐中看不出效果，因為我用第二句代碼使這些元素的狀態改為選中。這樣做雖說不合理，但能說明:input可以選擇到這些元素。span ID="span_1"
2. :text用法
定 義：匹配所有的單行文本框
返回值：Array
實 例：將ID為"div_b1"的DIV中所有的文本框的背景色改為紅色
代 碼： $("#div_b1 :text").css("background-color","red"); //點擊按鈕二將執行這句代碼
DIV ID="div_b1"
span ID="span_1"
注意：password元素沒有被選擇！span ID="span_1"
3. :password用法
定 義：匹配所有密碼框
返回值：Array
實例：將ID為"div_c1"的DIV中所有的密碼框的背景色改為紅色
代碼： $("#div_c1 :password").css("background-color","red"); //點擊按鈕三將執行這句代碼
DIV ID="div_c1"
span ID="span_1"
span ID="span_1"
4. :radio用法
定義：匹配所有單選按鈕
返回值：Array
實例：將ID為"div_d1"的DIV中所有radio元素的狀態改為選中
代碼： $("#div_d1 :radio").attr("checked",true); //點擊按鈕四將執行這句代碼
定義：匹配所有單選按鈕
返回值：Array
實例：將ID為"div_d1"的DIV中所有radio元素的狀態改為選中
代碼： $("#div_d1 :radio").attr("checked",true); //點擊按鈕四將執行這句代碼
DIV ID="div_d1"
span ID="span_1"
span ID="span_1"
5. :checkbox用法
定 義：匹配所有復選框
返回值：Array
實 例：將ID為"div_e1"的DIV中所有checkbox元素的狀態改為選中
代碼： $("#div_e1 :checkbox").attr("checked",true); //點擊按鈕五將執行這句代碼
DIV ID="div_e1"
span ID="span_1"
span ID="span_1"
6. :submit用法
定 義：匹配所有提交按鈕
返回值：Array
實 例：將ID為"div_f1"的DIV中所有提交按鈕(submit)的背景色改為紅色
代 碼： $("#div_f1 :submit").css("background-color","red"); //點擊按鈕六將執行這句代碼
DIV ID="div_f1"
span ID="span_1"
span ID="span_1"
7. :image用法
定 義：匹配所有圖像域
返回值：Array
實 例：將ID為"div_g1"的DIV中所有圖片框元素的背景色改為紅色
代 碼： $("#div_g1 :image").css("background-color","red"); //點擊按鈕七將執行這句代碼
DIV ID="div_g1"
span ID="span_1"
span ID="span_1"
8. :reset用法
定 義：匹配所有重置按鈕
返回值：Array
實 例：將ID為"div_h1"的DIV中所有重置按鈕的背景色改為紅色
代 碼： $("#div_h1 :reset").css("background-color","red"); //點擊按鈕八將執行這句代碼
DIV ID="div_h1"
span ID="span_1"
span ID="span_1"
9. :button用法
定 義：匹配所有按鈕
返回值：Array
實 例：將ID為"div_i1"的DIV中所有按鈕的背景色改為紅色
代 碼： $("#div_i1 :button").css("background-color","red"); //點擊按鈕九將執行這句代碼
DIV ID="div_i1"
span ID="span_1"
注意：reset和submit沒有被選擇！span ID="span_1"
10. :file用法
定 義：匹配所有文件域
返回值：Array
實 例：將ID為"div_j1"的DIV中所有上傳文件元素的背景色改為紅色
代 碼： $("#div_j1 :file").css("background-color","red"); //點擊按鈕十將執行這句代碼
DIV ID="div_j1"
span ID="span_1"
span ID="span_1"
11. :hidden用法
定 義：匹配所有不可見元素，或者type為hidden的元素
返回值：Array
實 例：將ID為"div_k"的DIV中所有隱藏的元素顯示出來
代 碼： $("#div_k1 :hidden").css("display","block"); //點擊按鈕十一將執行這句代碼
DIV ID="div_k1"
注意：DIV中含有hidden元素，但這個元素不可能顯示出來，因為他本身就是隱藏的！
你可以下載這篇文章的HTML源文件：download
全站熱搜
留言列表
