jquery選擇器（原創）三 - caofangsheng－IT工程師數位筆記本

文章出處

現在來看看表單域選擇器

1.：input選擇器

：input選擇器，用于選擇所有Input，textarea,select和button元素，語法格式如下：

$(":input")

2.:text選擇器

:text選擇器用于選擇所有的單行文本框（<input type="text"/>）,語法格式如下。

$(":text")

3.:password選擇器

:password選擇器用于選擇所有密碼框（<input type="password"/>），語法格式如下：

$(":password")

4.:radio選擇器

:radio選擇器，用于選擇所有單選按鈕（<input type="radio"/>）,語法格式如下：

$(":radio")

5.:checkbox選擇器

:checkbox選擇器，用于選擇所有復選框（<input type="checkbox"/>）,語法格式如下。

$(":checkbox")

6.:file選擇器

:file選擇器,用于選擇所有文件域(<input type="file"/>),語法格式如下:

$(":file")

7.:image選擇器

:image選擇器，用于選擇所有圖像域(<input type="image"/>),語法格式如下。

$(":image")

8.:hidden選擇器

:hidden選擇器，用于選擇所有不可見的元素（CSS display屬性值為none）以及隱藏域（<input type="hidden"/>）,語法格式，如下：

$(":hidden")

9.:button選擇器

:button選擇器，用于選擇所有按鈕（<input type="button"/>）和<button></button>,，語法格式如下：

$("button")

10.:submit選擇器

:submit選擇器，用于選擇所有提交按鈕(<input type="submit"/>)和<button></button>

$(":submit")

11.:reset選擇器

:reset選擇器，用于選擇所有重置按鈕（<input type="reset"/>）,語法格式如下：

$(":reset")

注意：<button></button>元素，屬于同時用$(":button")和$(":submit")返回的元素數組。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>表單域選擇器</title>
    <script type="text/javascript" src="js/jquery-1.11.0.js"></script>
    <script type="text/javascript">

        //文本框被點擊的時候，設置其背景色為黃色
        $(function () {

            $(":text").click(function () {
                $(this).css("background-color", "yellow");

            });

        });

        //鼠標移到密碼框上面的時候，顯示：“你輸入的密碼是加密的！”
        $(document).ready(function () {
            $(":password").mouseover(function () {
                alert("你輸入的密碼是加密的！")
            });

        });

        //點擊男的時候，選擇女，點擊女的時候，選擇男
        $(document).ready(function () {

            $(":radio").eq(0).click(function () {

                $(":radio").eq(1).attr("checked", "true");
            });

            $(":radio").eq(1).click(function () {

                $(":radio").eq(0).attr("checked", "true");
            });

        });

        //點擊復選框的時候，彈出我是復選框
        $(function () {

            $(":checkbox").click(function () {

                alert("我是復選框");

            });

        });
      

        //點擊文件域的時候，顯示，我是文件域
        $(function () {

            $(":file").click(function () {

                alert("我是文件域");
            });

        });
      

    </script>
</head>
<body>
    <table width="645" height="145" border="1">
        <tr>
            <td width="89" height="23">文本框</td>
            <td width="194"><input type="text"/></td>
            <td width="74">密碼框</td>
            <td width="260"><input type="password"/></td>
        </tr>
        <tr>
            <td height="24">單選按鈕</td>
            <td><input type="radio" name="groupName"/>男<input type="radio" name="groupName" />女</td>
            <td>復選框</td>
            <td><input type="checkbox"/><input type="checkbox"/></td>
        </tr>
        <tr>
            <td width="36">圖像</td>
            <td><input type="image"/></td>
            <td>文件域</td>
            <td><input type="file"/></td>
        </tr>
        <tr>
            <td width="23">隱藏域</td>
            <td><input type="hidden"/>(不可見)</td>
            <td>下拉列表</td>
            <td>
                <select>
                      <option>選項一</option>
                      <option>選項二</option>
                      <option>選項三</option>
                </select>
            </td>
        </tr>
        <tr>
            <td height="25">提交按鈕</td>
            <td><input type="submit"/></td>
            <td>重置按鈕</td>
            <td><input type="reset"/></td>
        </tr>
        <tr>
            <td valign="top">文本區域</td>
            <td colspan="3"><textarea cols="70" rows="3"></textarea></td>
        </tr>
    </table>
</body>
</html>