DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> jQuery基礎知識 >> 3.8 表單屬性偽類選擇器
3.8 表單屬性偽類選擇器
編輯:jQuery基礎知識     

除了表單偽類選擇器,jQuery為了更加方便開發者快速選擇表單元素進行操作,還提供了一系列的表單屬性偽類選擇器。表單屬性偽類選擇器,就是根據表單元素的標簽屬性來選取某一類表單元素。

在jQuery中,表單屬性偽類選擇器如下:

jQuery表單屬性偽類選擇器 選擇器 說明 :checked 選擇所有被選中的表單元素,一般用於radio和checkbox option:selected 選擇所有被選中的option元素 :enabled 選擇所有可用元素,一般用於input、select和textarea :disabled 選擇所有不可用元素,一般用於input、select和textarea :read-only 選擇所有只讀元素,一般用於input和textarea :focus 選擇獲得焦點的元素,常用於input和textarea

舉例:

在線測試
 
<!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 () {
            var a = $("input:checked").val();
            alert(a);
        })
    </script>
</head>
<body>
    <p>喜歡的水果:
        <label><input type="checkbox" value="蘋果"/>蘋果</label>
        <label><input type="checkbox" value="西瓜" checked="checked"/>西瓜</label>
        <label><input type="checkbox" value="蜜桃"/>蜜桃</label>
        <label><input type="checkbox" value="梨子"/>梨子</label>
    </p>
</body>
</html>

在浏覽器預覽效果如下:

分析:

$("input:checked").val()表示選擇“被選中”的單選框或復選框(因為只有單選框和復選框有checked屬性),並且獲取表單元素的value值。val()方法用於獲取表單元素的value值,我們在下一章的“jQuery內容操作”這一節會詳細講解。

對於其他表單屬性偽類選擇器用法跟:checked一樣,在此不再累贅說明。不過我們可以參考一下CSS3教程中“UI元素狀態偽類選擇器”這一章,因為jQuery這些選擇器就是參考CSS3選擇器來的。

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