表單物件屬性過濾選擇器 2020-09-28

wao小豬配齊發表於2020-09-28
物件

表單物件的屬性過濾器通過表單元素的狀態屬性（例如選中、不可用等狀態）匹配元素，包括 :checked 過濾器、 :disabled 過濾器、 :enabled 過濾器和 :selected 過濾器 4 種。

過濾器說明示例
:checked匹配所有選中的被選中元素$(“input:checked”) //匹配checked屬性為checked的input元素
–––
:disabled匹配所有不可用元素$(“input:disabled”) //匹配disabled屬性為disabled的input元素
–––
:enabled匹配所有可用的元素$("input:enabled ") //匹配enabled屬性為enabled的input元素
–––
:selected匹配所有選中的option元素 $(“select option:selected”)//匹配select元素中被選中的option

：checked它是用於radio,checkbox判斷選中
：selected它是用於select下拉框選中。

:enabled 可用
:disabled 不可用。 或 或
:checked 選中（單選框radio、核取方塊 checkbox）
:selected 選擇（下拉選單 select option）
在這裡插入圖片描述

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="Js/jquery-1.7.2.js"></script>
    <script type="text/javascript">

        $(function () {

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

                //獲取姓名
                var name = $(":text").val();
                //console.log(name);

                var name2 = $("#text_NC").val();
                console.log(name2);

                //獲取性別
                //console.log($(":radio"));
                var sex = $(":radio:checked").val();
                console.log(sex);
                //獲取密碼框的之

                var pws = $(":password").val();
                console.log(pws);
                console.log(pws);

                var realname = $("#text_realNmae").val();
                console.log(realname);

                var Emali = $("#text_Emali").val();
                console.log(Emali);
                var YZ = $("#text_YZ").val();
                console.log(YZ);

               alert(
                    "使用者名稱是：" + $(":text").val() + "\n" +
                    "暱稱是：" + $("#text_NC").val() + "\n" +
                    "使用者性別：" + $(":radio:checked").val() + "\n" +
                    "使用者名稱是：" + $("#text_realNmae").val() + "\n" +
                    "密碼：" + $(":password").val() + "\n" +
                    "確認密碼：" + $(":password").val() + "\n" +
                    "郵箱：" + $("#text_Emali").val() + "\n" +
                    "驗證碼：" + $("#text_YZ").val()
                );
            })
        })
    </script>
</head>
<body>
    <from id="myform">
        <table border="0">
            <tr>
                <th colspan="2">賬戶基本資訊</th>

            </tr>

            <tr>
                <td>登入賬戶：</td>
                <td><input type="text" name="text" id="text_name" value="" />5-10個字元</td>
                <td><div id="userTip"></div></td>
            </tr>
            <tr>
                <td>暱稱：</td>
                <td><input type="text" name="text" id="text_NC" value="" />至少四個字元</td>
                <td><div id="NCTip"></div></td>
            </tr>
            <tr>

                <td>性別：</td>
                <td>
                    <input type="radio" name="sex" id="woman" value="男" checked="checked" />帥哥
                    <input type="radio" name="sex" id="man" value="女" checked="checked" />美女
                    <input type="radio" name="sex" id="NO" value="不公佈" checked="checked" />不公佈

                </td>
            </tr>

            <tr>
                <th colspan="2">賬戶安全設定</th>

            </tr>
            <tr>
            <tr>
                <td>登入密碼：</td>
                <td><input type="password" name="password" id="text_pwd" value="" />至少六個字元</td>
                <td><div id="pwdTip"></div></td>
            </tr>
            <tr>
                <td>確認登入密碼：</td>
                <td><input type="password" name="password" id="text_pwd_2" value="" />再次輸入密碼</td>
                <td><div id="pwd_2Tip"></div></td>
            </tr>
            <tr>
                <td>真實姓名：</td>
                <td><input type="text" name="text" id="text_realNmae" value="" />至少四個字元</td>
                <td><div id="realNmaeTip"></div></td>
            </tr>
            <tr>
                <td>身份證號：</td>
                <td><input type="text" name="text" id="text_IDcar" value="" />15或16位的身份證</td>
                <td><div id="IDcarTip"></div></td>
            </tr>
            <tr>
                <td>郵箱地址：</td>
                <td><input type="text" name="text" id="text_Emali" value="" />6-100個字元</td>
                <td><div id="EmaliTip"></div></td>
            </tr>
            <tr>
                <td>驗證碼：</td>
                <td><input type="text" name="text" id="text_YZ" value="" /></td>
                <td><div id="YZTip"></div></td>
            </tr>
            <tr>
                <td colspan="2" style="text-align: center;">
                    <input type="submit" name="" id="rigist" value="免費登入" />
                    <input type="submit" id="rigist" value="註冊">
                </td>
            </tr>
        </table>
    </from>
</body>
</html>

**

表單物件屬性過濾選擇器

**
此選擇器主要對所選擇的表單元素進行過濾
1、:enabled
用法: $(”input:enabled”)
返回值 :集合元素
說明: 匹配所有可用元素.意思是查詢所有input中不帶有disabled=”disabled”的input.不為disabled,當然就為enabled啦.
2、:disabled
用法: $(”input:disabled”)
返回值 :集合元素
說明: 匹配所有不可用元素.與上面的那個是相對應的.
3、:checked
用法: $(”input:checked”)
返回值 :集合元素
說明: 匹配所有選中的被選中元素(核取方塊、單選框等，不包括select中的option).這話說起來有些繞口.
4、:selected
用法: $(”select option:selected”)
返回值 :集合元素
說明: 匹配所有選中的option元素.

—————————————分割線————————————————————

用alert()輸出時"\n"換行

        alert(
                    "使用者名稱是：" + $(":text").val() + "\n" +
                    "暱稱是：" + $("#text_NC").val() + "\n" +
                    "使用者性別：" + $(":radio:checked").val() + "\n" +
                    "使用者名稱是：" + $("#text_realNmae").val() + "\n" +
                    "密碼：" + $(":password").val() + "\n" +
                    "確認密碼：" + $(":password").val() + "\n" +
                    "郵箱：" + $("#text_Emali").val() + "\n" +
                    "驗證碼：" + $("#text_YZ").val()
                );

詳細請看

相關文章