jQuery选择器——表单过滤器

最新推荐文章于 2022-06-15 11:45:41 发布
最新推荐文章于 2022-06-15 11:45:41 发布
阅读量299 收藏
点赞数
分类专栏： jquery 文章标签： 十一的博客 jQuery选择器——表单过滤器
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sinat_40900884/article/details/80726617
版权


实例：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style>
       


  #dv-2 {
              width: 200px;
              height: 230px;
              margin: 5px;
              background: #aaa;
              border: #000 1px solid;
              float: left;
              font-size: 17px; 
              font-family: Arial;
              font-family: Verdana;
          }
   
    </style>
    <script src="Scripts/jquery-1.11.3.js"></script>
    <script type="text/javascript">
        $(function () {
            //对表单内可用的input元素赋值操作
        $("#Button2").on("click", function () {
            $(":text:enabled").val("可用");
        });
            //对表单内不可用的input元素赋值操作
        $("#Button3").click(function () {
            $(":text:disabled").val("不可用");
        });
            //计算有多少个多选框被选中，并显示在div中
        $(":checkbox").change(function () {
          
              var cher=  $(":checkbox:checked").length
              $("#dv-2").text("有"+cher+"个多选框被选中了");
           
        });
            //在div中显示选择的下拉框中的选项
        $("select").change(function () {
          
                var sele = "";
                $("select option:selected").each(function (index, docxml) {
                 sele += $(docxml).text();
                 $(".one").html ("<p>你选中的人是" + sele + "，</p>");
                             
                }) 
        });
        });
    </script> 
	<meta charset="utf-8" />
</head>
<body>
    <div> 
            <p>表单对象属性过滤选择器</p><br />
            <input id="Button1" type="button" value="重置所有表单元素" /><br />
            <input id="Button2" type="button" value="对表单内可用的input元素赋值操作" />
            <input id="Button3" type="button" value="对表单内不可用的input元素赋值操作" /><br />
            可用元素：<input id="Text1" type="text" value="可用文本框" /><br />
            不可用元素：<input id="Text2" type="text" value="不可用文本框" disabled="disabled" /><br />
            可用元素：<input id="Text3" type="text" value="可用文本框" /><br />
            不可用元素：<input id="Text4" type="text" value="不可用文本框"  disabled="disabled"/> <br />
            多选框：
            <div >
            <table>
                <tr>
                    <td><div id="dv-2"></div></td>
                    <td>
                        <input id="Checkbox1" type="checkbox" value="ADC" />ADC
                        <input id="Checkbox2" type="checkbox"  value="辅助"/>辅助
                        <input id="Checkbox3" type="checkbox"  value="法师"/>法师
                        <input id="Checkbox4" type="checkbox"  value="打野"/>打野
                        <input id="Checkbox5" type="checkbox"  value="战士"/>战士
                        <br />
                        下拉列表：<br />
                        <select id="Select1" multziple style="max-height:100px;">
                            <option>女警</option>
                            <option>金克斯</option>
                            <option>E2</option>
                            <option>奥巴马</option>
                            <option>飞机</option>
                            <option>寒冰</option>
                        </select><br />
                        下拉列表辅助：<br />
                        <select id="Select2">
                            <option>机器人</option>
                            <option>机器人1</option>
                            <option>机器人2</option>
                            <option>机器人3</option>
                            <option>机器人4</option>
                          
                        </select><br />
                    </td>
                </tr>
                <tr>
                    <td><div id="dv-2" class="one"></div></td>
                    <td></td>
                </tr>
            </table>
            </div>
        </form>
    </div>
</body>
</html>
李_lym
关注
专栏目录
jquery表单对象属性过滤选择器实例分析
10-24
在本例中，我们关注的是jQuery中的表单对象属性过滤选择器，这些选择器专门用于筛选表单元素，如输入(input)、复选框(checkbox)、单选按钮(radio)以及下拉列表(select)的选项(option)。以下是对这些选择器的详细说明...
jQuery选择器之基本过滤选择器用法实例分析
10-17
基本过滤选择器是jQuery选择器的重要组成部分，它能帮助我们根据特定的规则来筛选出所需的DOM元素。在本文中，我们将重点介绍基本过滤选择器，并通过实例来分析其用法。 首先，我们来了解基本过滤选择器的含义。...
jquery表单过滤选择器
boss_way的博客
11-01 334
1.1． 表单过滤选择器 表单过滤选择器是用于选取表单中的元素     :input 所有的表单元素。 :text 文本框 :password 密码框 :radio 单选 :checkbox 复选框 :submit 提交按钮 :image 图片按钮 :reset 重置按钮 :file 文件上传     方法总结 1. trim()它是去掉字符串左右空格
jQuery表单过滤选择器
jeo_chow的博客
08-14 329
表单过滤选择器 body{ font-family: "Microsoft YaHei" } .cGreen{background-color: #4CA902} .cPink{background-color: #ED4A9F} .cBlue{background-color: #0092E7}
JQuery中的表单过滤器
qq_32077521的博客
10-21 184
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <meta charset="utf-8" /> <scrip...
JQuery 选择器、过滤器
dn_lw的博客
04-16 205
引用自https://www.cnblogs.com/yangjunwl/archive/2011/02/14/1954075.html JQuery 选择器、过滤器 使用过AJAX技术的人都知道大名鼎鼎的JQuery。虽然我来学习之前有看过AJAX的视频，但那时对WEB应用这个东西还比较模糊，不清楚HTML、JSP与Servlet是怎么工作的，甚至不知道JQuery包装的是什么东西。今日的学...
jQuery表单元素过滤选择器用法实例分析
10-17
在处理网页中的表单元素时，jQuery 提供了一系列的过滤选择器，使得我们可以更加方便地选取特定状态的表单元素。本文将深入探讨 jQuery 的表单元素过滤选择器，通过实例来解析它们的用法和应用场景。 一、:enabled ...
JQuery 选择器、过滤器介绍
10-28
在深入探讨jQuery选择器和过滤器之前，先让我们回顾一下jQuery的基本概念。jQuery是一个流行的JavaScript库，它的核心理念是“write less, do more.”，即用更少的代码实现更多的功能。它简化了DOM（Document Object...
尚硅谷：jQuery的表单对象属性过滤选择器
piao317110771的博客
11-27 195
1、jQuery的表单对象属性过滤选择器  2、代码 &lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt; &lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" con
jquery过滤选择器-----------（表单对象属性过滤选择器 与 表单选择器）
weixin_33946605的博客
07-31 141
1.表单对象属性选择器 　　   2.程序  1 &lt;!DOCTYPE html&gt; 2 &lt;html&gt; 3 &lt;head&gt; 4 &lt;meta charset="UTF-8"&gt; 5 &lt;title&gt;Insert title here&lt;/title&gt; 6 &lt;script type="text/jav
3.jquery（过滤器）
weixin_59334478的博客
06-15 142
3.定义 js 函数 2.3.2 表单对象属性过滤器js 函数
jquery表单元素过滤选择器
天空守护云
03-01 186
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
jQuery表单过滤器
dly的博客
12-19 591
jQuery表单过滤器 :input 所有的表单元素。（input / select / textarea/ button） :text 文本框 <input type="text"> :password 密码框<input type=" password "> :radio 单选<input type="radio"> :che
jQuery表单过滤器------jQuery学习之路5
dragoned_123的博客
07-29 312
文章目录jQuery表单过滤器效果$(":text:enabled")$(":text:disabled")$(":checkbox:checked")$("select>option:selected")完整源码 jQuery表单过滤器 jQuery表单过滤器主要是对form表单里面的inpu标签的过滤 <input type="text" value="文本框1"> <input type="text" value="文本框2" disabled> <input ty
JQuery表单元素过滤选择器
weixin_30814319的博客
10-06 159
　　此选择器主要是对所选择的表单元素进行过滤： 选择器 描述 返回 enabled 选择所有的可用的元素 集合元素 disabled 选择所有的不可用的元素 集合元素 checked 选择所有被选中的元素（单选框，复选框） 集合元素 selected 选择所有被选中选项元素（下拉列表） 集合元素 <!...
JQuery基本过滤选择器与表单对象过滤器
萌萌的It人 www.itmmd.com
04-28 893
1、基本过滤选择器 html xmlns="http://www.w3.org/1999/xhtml"> head>     title >过滤选择器 title>     style type="text/css">     table{ border-collapse:collapse ;}    #tbMy td{ width :122px; height:36px ; border
(10)JQuery - 表单过滤选择器
魚
12-09 562
表单对象属性过滤选择器 此选择器主要对所选择的表单元素进行过滤 表单选择器 &lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt; &lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Ty...
jquery-210812-02---jquery表单过滤器
白光一的博客
08-12 219
jquery-210812-02—jquery表单过滤器 jquery表单过滤器介绍 演示案例 jquery表单过滤器介绍 1. 选择可用的文本框 $(":text:enabled") enabled：可用状态 disabled：不可用状态 2. 选择不可用的文本框 $(":text:disabled") 3. 复选框选中的元素 $(":checkbox:checked") 4. 选择指定下拉列表的被选中元素 选择器>option:selected 演示案例 &l
史上最全JQuery选择器与过滤器教程
10. **表单过滤器**： - `.input()`：选取所有的表单输入元素，如`<input>`, `<select>`, `<textarea>`。 - `.button()`：选取所有`<button>`元素。 - `.checked()`：选取被选中的复选框或单选按钮。 以上只是...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值