jquery表單選擇器

編程語言 jQuery JavaScript 技術 科技優家 2017-04-06

一 介紹

表單選擇器是匹配經常在表單內出現的元素。但是匹配的元素不一定在表單中。jQuery提供的表單選擇器如下表所示。

選擇器說明示例
:input 匹配所有的input元素

$(":input") //匹配所有的input元素

$("form :input") //匹配<form>標記中的所有input元素,需要注意,在form和:之間有一個空格

:button 匹配所有的普通按鈕,即type="button"的input元素 $(":button") //匹配所有的普通按鈕
:checkbox匹配所有的複選框 $(": checkbox") //匹配所有的複選框
:file匹配所有的文件域 $(": file") //匹配所有的文件域
:hidden 匹配所有的不可見元素,或者type為hidden的元素 $(": hidden") //匹配所有的隱藏域
:image匹配所有的圖像域 $(": image") //匹配所有的圖像域
:password匹配所有的密碼域

$(": password") //匹配所有的密碼域

:radio匹配所有的單選按鈕 $(": radio") //匹配所有的單選按鈕
:reset 匹配所有的重置按鈕,即type=" reset "的input元素 $(":reset") //匹配所有的重置按鈕
:submit 匹配所有的提交按鈕,即type=" submit "的input元素 $(":submit") //匹配所有的提交按鈕
:text匹配所有的單行文本框 $(":button") //匹配所有的單行文本框

二 應用

匹配表單中相應的元素並實現不同的操作

三 運行效果

jquery表單選擇器

四 代碼

<script language="javascript" src="JS/jquery-3.1.1.min.js"></script>
<form>
    複選框:<input type="checkbox"/>
    單選按鈕:<input type="radio"/>
    圖像域:<input type="image"/><br>
    文件域:<input type="file"/><br>
    密碼域:<input type="password" width="150px"/><br>
    文本框:<input type="text" width="150px"/><br>
    按  鈕:<input type="button" value="按鈕"/><br>
    重  置:<input type="reset" value=""/><br>
    提  交:<input type="submit" value=""><br>
    隱藏域: <input type="hidden" value="這是隱藏的元素">
   <div id="testDiv"><font color="blue">隱藏域的值:</font></div>
</form>
<script type="text/javascript">
      $(document).ready(function {
         $(":checkbox").attr("checked","checked");      //選中複選框
         $(":radio").attr("checked","true"); //選中單選框
         $(":image").attr("src","images/fish1.jpg");    //設置圖片路徑
         $(":file").hide; //隱藏文件域
         $(":password").val("123"); //設置密碼域的值
         $(":text").val("文本框"); //設置文本框的值
         $(":button").attr("disabled","disabled");      //設置按鈕不可用
         $(":reset").val("重置按鈕"); //設置重置按鈕的值
         $(":submit").val("提交按鈕"); //設置提交按鈕的值
         $("#testDiv").append($("input:hidden:eq(1)").val); //顯示隱藏域的值
       });
</script>

相關推薦

推薦中...