jquery 表單選取器

 Jquery表單過濾選取器

表單對象屬性過濾選取器

選取器                 描述                                              返回                樣本

:enabled              選擇所有可用元素                          集合元素         $("#form1  :enabled");選取ID為"form1"的表單內的所有可用元素

:disabled             選取所有不可用元素                       集合元素         $(#form2   :disabled);選取id為"from2"的表單內的所有不可用元素

:checked             選取所有被選中的元素                   集合元素         $("input:checked")選取所有被選中的<input>元素

:selected            選取所有被選中的選項元素（下拉）集合元素        $("select:selected");選取所有被選中的選項元素

 

表單對象屬性過濾樣本：

作用                                                                                                       代碼

改變表單內可用<input>元素的值                                                            $("#form1  input:enabled")

                                                                                                                                       .val("這裡變化了");

改變表單內不可用<input>元素的值                                                         $("#form1  input:disabled")

                                                                                                                                       .val("這裡變化了");

擷取多選框選中的個數                                                                            $("input:checked").length;

擷取下拉框選中的內容                                                                            $("select  :selected").text();

 

表單對象屬性過濾樣本

選取器材             描述                                                 返回                樣本

:input                    選取所有的<input>,<textarea>         集合元素         $(":input")選取所有<input>,<textarea>.<select>和<button>元素

                             <select>和<button>元素

:text                      選取所有的單選文字框                     集合元素         $(":text")選取所有的單選文字框

:password            選取所有的密碼框                            集合元素          $(":password")選取所有的密碼框

：radio                選取所有的單選框                            集合元素          $(":radio")選取所有的單選框

:checkbox            選取所有的多選框                            集合元素          $(":checkbox");選取所有的複選框

:submit                選取所有的提交按鈕                         集合元素           $(":submit")選取所有的提交按鈕

:image                 選取所有的映像按鈕                         集合元素           $(":image");選取所有的映像按鈕

:reset                  選取所有的重設按鈕                         集合元素           $(":reset");選取所有的重設按鈕

:button                選取所有的按鈕                                集合元素            $(":button"); 選取所有的按鈕

：file                   選取所有的上傳域                             集合元素            $(":hidden")選取所有隱藏元素

下面把這些表單選取器運用到下面的表單中，對錶單進行操作

如果想得到表單內表單元素的個數，代碼如下：

$("#form1  :input").length;        //注意與$("#form1   input")的區別

如果想得到表單內單行文字框的個數，代碼如下：

$("#form1   :text").length;

如果想得到表單內密碼框的個數，代碼如下：

$("#form1   :password").length;

同理，其他表單選取器的操作與此類似

 

擷取頁面中的所有<p>元素，給每一個<p>元素添加onclick事件，例如：

$("p").click(function({

            //doing somethingr（操作）

})

 

擷取id為tb的元素，然後尋找它下面的tbody標籤，再尋找tbody下索引值是偶數的tr元素改變它的背景色(css("property","value");用來設定jQuery對象的樣式)例如：

$('#tb tbody tr:even').css("backgroundColor","#888");

先使用屬性選取器，然後用表單對象屬性過濾，最後擷取jQuery對象的長度,例如：

$('#btn').click(function(){

                  var   length=$("input[name='check']:checked").length;

                  alert("選中的個數為："+length);

})

清空所有input type="text" 文字框內容：$("input:text").val("");