web基础学习笔记(十七)之jquery表单过滤选择器

最新推荐文章于 2021-07-22 09:25:35 发布

weixin_44014196

最新推荐文章于 2021-07-22 09:25:35 发布

阅读量82

点赞数

分类专栏： web学习文章标签： jquery

本文链接：https://blog.csdn.net/weixin_44014196/article/details/108715832

版权

web学习专栏收录该内容

21 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery/jquery-3.5.1.js"></script>

    <script type="text/javascript">
        $(function () {
            //1.对表单内可用input赋值操作
            $("#btn1").click(function () {
                /*css()方法可以设置和获取样式*/
                $(":text:enabled").val("New Value");  //赋值操作
            });
            //2.对表单内不可用input赋值操作
            $("#btn2").click(function () {
                $(":text:disabled").val("New Value");
            });
            //3.获取多选框选中的个数
            $("#btn3").click(function () {
                alert($(":checkbox:checked").length);
            });
            //4.获取多选框选中的内容
            $("#btn4").click(function () {

                /*var $checkboxs = $(":checkbox:checked");
                for (var i = 0; i < $checkboxs.length; i++) {
                    alert($checkboxs[i].value);
                    老式遍历
                }*/
                var $checkboxs = $(":checkbox:checked");
                $checkboxs.each(function () {
                    alert(this.value);
                });
            });
            //5.获取下拉框选中的内容
            $("#btn5").click(function () {
                var $selects = $("select option:selected")
                $selects.each(function () {
                    alert(this.value); /*this对象是当前的dom对象*/
                });
            });

        });


    </script>
</head>
<body>
<!--
        表单过滤器
        :input  匹配所有input textarea select 和button元素
        :text   匹配所有文本输入框
        :password   匹配所有的密码输入框
        :radio  匹配所有的单选框
        :checked    匹配所有的复选框
        :submit    匹配所有的提交按钮
        :image    匹配所有的图片域
        :reset    匹配所有的重置按钮
        :button    匹配所有的按钮
        :file   匹配所有的文件域
        :hidden    匹配所有的不可见元素，或者type为hidden的元素
        表单对象属性
        :enable
        :disable
        :checked

        -->
<input type="button" value="对表单内可用input赋值操作" id="btn1"/>
<input type="button" value="对表单内不可用input赋值操作" id="btn2"/>
<input type="button" value="获取多选框选中的个数" id="btn3" />
<input type="button" value="获取多选框选中的内容" id="btn4" />
<input type="button" value="获取下拉框选中的内容" id="btn5" />


<br>
<h1>表单对象属性过滤选择器</h1>
可用元素：<input type="text" value="可用文本框1"><br>
不可用元素：<input type="text" value="不可用文本框" disabled="disabled"><br>
可用元素：<input type="text" value="可用文本框2"><br>
不可用元素：<input type="text" value="不可用文本框" disabled="disabled"><br>
多选框：<br>
<input type="checkbox" value="test1">test1<input type="checkbox" value="test2">test2<input type="checkbox" value="test3">test3<input type="checkbox" value="test4">test4<br>
下拉列表1:<br>
<select name="test1" multiple="multiple">
    <option>浙江</option>
    <option selected="selected">辽宁</option>
    <option>北京</option>
    <option selected="selected">天津</option>
    <option>广州</option>
    <option>湖北</option>
</select> <br/>
下拉列表2:<br>
<select name="test2">
    <option>浙江</option>
    <option>辽宁</option>
    <option>北京</option>
    <option selected="selected">天津</option>
    <option>广州</option>
    <option>湖北</option>
</select> <br/>
</body>
</html>

weixin_44014196

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
web基础学习笔记(十七)之jquery表单过滤选择器

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery/jquery-3.5.1.js"></script> <script type="text/javascript"> $(function ()
复制链接

扫一扫