JQuery 04 選擇器3
阿新 • • 發佈：2020-08-01
示例9:
表單物件
表單物件選擇器 指的是選中form下會出現的輸入元素
:input會選擇所有的輸入元素，不僅僅是input標籤開始的那些，還包括textarea,select和button
:button會選擇type=button的input元素和button元素
:radio會選擇單選框
:checkbox會選擇複選框
:text會選擇文字框，但是不會選擇文字域
:submit會選擇提交按鈕
:image會選擇圖片型提交按鈕
:reset會選擇重置按鈕
注意:第7行
$("td[rowspan!=13]後面有一個空格，表示層級選擇器，如果沒有就會出錯 toggle(500)表示在顯示與隱藏之間來回切換，生效時間是500毫秒
注：:submit會把<button>元素選中，因為在一些瀏覽器中，<button>元素的type預設值是submit，所以會選中它。 關於這個問題，請移步參考：使用button元素提交資料
<script src="https://how2j.cn/study/jquery.min.js"></script> <script> $(function(){ $(".b").click(function(){ var value = $(this).val(); $("td[rowspan!=13] "+value).toggle(500); }); }); </script> <style> table{ border-collapse:collapse; table-layout:fixed; width:80%; } table td{ border-bottom: 1px solid #ddd; padding-bottom: 5px; padding-top: 5px; } div button{ display:block; } </style> <table> <tr> <td rowspan="13" valign="top" width="150px"> <div > <button value=":input" class="b">切換所有的:input</button> <button value=":button" class="b">切換:button</button> <button value=":radio" class="b">切換:radio</button> <button value=":checkbox" class="b">切換:checkbox</button> <button value=":text" class="b">切換:text</button> <button value=":password" class="b">切換:password</button> <button value=":file" class="b">切換:file</button> <button value=":submit" class="b">切換:submit</button> <button value=":image" class="b">切換:image</button> <button value=":reset" class="b">切換:reset</button> </div> </td> <td width="120px">說明</td> <td width="120px">表單物件</td> <td width="">示例</td> </tr> <tr> <td >input按鈕</td> <td >:button</td> <td><input type="button" value="input按鈕"/></td> </tr> <tr> <td>button按鈕</td> <td >:button</td> <td><button>Button按鈕</button></td> </tr> <tr> <td>單選框</td> <td >:radio</td> <td><input type="radio" ></td> </tr> <tr> <td>複選框</td> <td >:checkbox</td> <td><input type="checkbox" ></td> </tr> <tr> <td>文字框</td> <td >:text</td> <td><input type="text" /></td> </tr> <tr> <td>文字域</td> <td ></td> <td><textarea></textarea></td> </tr> <tr> <td>密碼框</td> <td >:password</td> <td><input type="password" /></td> </tr> <tr> <td>下拉框</td> <td ></td> <td><select><option>Option</option></select></td> </tr> <tr> <td>檔案上傳</td> <td >:file</td> <td> <input type="file" /></td> </tr> <tr> <td>提交按鈕</td> <td >:submit</td> <td><input type="submit" /></td> </tr> <tr> <td>圖片型提交按鈕</td> <td >:image</td> <td><input type="image" src="https://how2j.cn/example.gif" /></td> </tr> <tr> <td>重置按鈕</td> <td >:reset</td> <td><input type="reset" /></td> </tr> </table>
示例10:
表單物件屬性
:enabled會選擇可用的輸入元素注：輸入元素的預設狀態都是可用
:disabled會選擇不可用的輸入元素
:checked會選擇被選中的單選框和複選框注：checked在部分瀏覽器上(火狐,chrome)也可以選中selected的option
:selected會選擇被選中的option元素
<head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> </head> <script src="https://how2j.cn/study/jquery.min.js"></script> <script> $(function(){ $(".b").click(function(){ var value = $(this).val(); $("td[rowspan!=13] "+value).toggle(500); }); $(".b2").click(function(){ var value = $(this).val(); var options = $("td[rowspan!=13] "+value); alert("選中了"+options.length+"條記錄！"); }); }); </script> <style> table{ border-collapse:collapse; table-layout:fixed; width:80%; } table td{ border-bottom: 1px solid #ddd; padding-bottom: 5px; padding-top: 5px; } div button{ display:block; } .border{ border: 1px blue solid; } </style> <table> <tr> <td rowspan="13" valign="top" width="120"> <div > <button value=":enabled" class="b">切換:enabled</button> <button value=":disabled" class="b">切換:disabled</button> <button value=":checked" class="b">切換:checked</button> <button value=":selected" class="b2">:selected數量</button> </div> </td> <td width="120">說明</td> <td width="120">表單物件屬性</td> <td width="100px">示例</td> </tr> <tr> <td >enabled的按鈕</td> <td >:enabled</td> <td><input type="button" enabled="enabled" value="enabled的按鈕"/></td> </tr> <tr> <td >disabled的按鈕</td> <td >:disabled</td> <td><input type="button" disabled="disabled" value="disabled的按鈕"/></td> </tr> <td >選中的複選框</td> <td >:checked</td> <td> <input type="radio" checked="checked" ><br> <input type="radio" ><br> <input type="checkbox" ><br> <input type="checkbox" checked="checked" > </td> <tr> <td>選中的下拉列表</td> <td >:selected</td> <td> <select size="3" multiple="multiple"> <option selected="selected">蒼老師</option> <option >高樹瑪利亞</option> <option selected="selected">遙美</option> </select> </td> </table> <form> </form>
示例11:
當前元素
在監聽函式中使用$(this)，即表示觸發該事件的元件。
<script src="https://how2j.cn/study/jquery.min.js"></script> <script> $(function(){ $("#b1").click(function(){ $(this).hide(); }); }); </script> <button id="b1">點選隱藏</button>