DIV CSS 佈局教程網

3.6 表單偽類選擇器
編輯:jQuery基礎知識     

操作表單,在前端開發中是很常見的操作。jQuery為方便我們操作表單元素提供了完善的偽類選擇器。表單偽類選擇器,指的是根據“表單類型”來選擇的偽類選擇器。使用表單偽類選擇器,我們可以快速選取我們需要的表單元素,然後達到快速開發的目的,非常方便快捷。

在jQuery中,常用的表單偽類選擇器如下:

jQuery表單偽類選擇器 選擇器 說明 :input 選擇所有input元素 :button 選擇所有普通按鈕,即type="button"的input元素 :submit 選擇所有提交按鈕,即type="submit"的input元素 :reset 選擇所有重置按鈕,即type="reset"的input元素 :text 選擇所有單行文本框 :textarea 選擇所有多行文本框 :password 選擇所有密碼文本框 :radio 選擇所有單選按鈕 :checkbox 選擇所有復選框 :image 選擇所有圖像域 :hidden 選擇所有隱藏域 :file 選擇所有文件域

舉例:

在線測試
 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript" src="jquery-1.12.0.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("input:checkbox").attr("checked","checked");
        })
    </script>
</head>
<body>
    <p>喜歡的水果:
        <label><input type="checkbox"/>蘋果</label>
        <label><input type="checkbox"/>西瓜</label>
        <label><input type="checkbox"/>蜜桃</label>
        <label><input type="checkbox"/>梨子</label>
    </p>
    <p>性別:
        <label><input type="radio" name="gendar"/>男</label>
        <label><input type="radio" name="gendar"/>女</label>
    </p>
</body>
</html>

在浏覽器預覽效果如下:

分析:

$("input:checkbox")表示選擇所有復選框元素,attr("checked","checked")表示設置復選框的checked屬性值為checked。關於attr()方法,我們會在下一章中“jQuery屬性操作”這一節詳細給大家介紹。

對於其他表單偽類選擇器來說,它們的用法跟:checkbox選擇器是一模一樣的。大家參考一下:checkbox選擇器的實例,就能夠掌握其他表單偽類選擇器了。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved