jquery表單選擇器
一 介紹
表單選擇器是匹配經常在表單內出現的元素。但是匹配的元素不一定在表單中。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") //匹配所有的單行文本框 |
二 應用
匹配表單中相應的元素並實現不同的操作
三 運行效果
四 代碼
<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>
相關推薦
推薦中...