表单对象属性过滤选择器 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()
                );

详细请看

©️2020 CSDN 皮肤主题: 创作都市 设计师:CSDN官方博客 返回首页