jQuery--表单的过滤
1.表单过滤器的介绍
- :input 所有表单元素(<input>/<select>/<textarea>/<button>)
- :text 文本框<input type='text'>
- :password 密码框<input type='password'>
- :radio 单选框<input type='radio'>
- :checkbox 复选框<input type='checkbox'>
- :submit 提交按钮<input type='submit'>
- :image 图片按钮<input type='image' src=''>
- :reset 重置按钮<input type='text'>
- :file 文本上传<input type='file'>
- :hidden 隐藏域<input type='hidden'> <xxx style='display:none'>
- :button 所有普通按钮 或者<input type='button'/>
- :enabled 可用
- :disabled 不可用
- :checked 选中（单选框redio，复选框checkbox）
- :selected 选择（下拉列表 select option）
2.代码实例1
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>09-表单选择器.html</title>
6 <!-- 引入jQuery -->
7 <script src="../js/jquery-1.8.3.js" type="text/javascript"></script>
8 <script type="text/javascript">
9 //<![CDATA[
10 $(document).ready(function(){
11
12 var $alltext = $("#form1 :text");
13 var $allpassword= $("#form1 :password");
14 var $allradio= $("#form1 :radio");
15 var $allcheckbox= $("#form1 :checkbox");
16
17 var $allsubmit= $("#form1 :submit");
18 var $allimage= $("#form1 :image");
19 var $allreset= $("#form1 :reset");
20 var $allbutton= $("#form1 :button"); // <input type=button /> 和 <button ></button>都可以匹配
21 var $allfile= $("#form1 :file");
22 var $allhidden= $("#form1 :hidden"); // <input type="hidden" />和<div style="display:none">test</div>都可以匹配.
23 var $allselect = $("#form1 select");
24 var $alltextarea = $("#form1 textarea");
25
26 var $AllInputs = $("#form1 :input");
27 var $inputs = $("#form1 input");
28
29 $("div").append(" 有" + $alltext.length + " 个（ :text 元素）<br/>")
30 .append(" 有" + $allpassword.length + " 个（ :password 元素）<br/>")
31 .append(" 有" + $allradio.length + " 个（ :radio 元素）<br/>")
32 .append(" 有" + $allcheckbox.length + " 个（ :checkbox 元素）<br/>")
33 .append(" 有" + $allsubmit.length + " 个（ :submit 元素）<br/>")
34 .append(" 有" + $allimage.length + " 个（ :image 元素）<br/>")
35 .append(" 有" + $allreset.length + " 个（ :reset 元素）<br/>")
36 .append(" 有" + $allbutton.length + " 个（ :button 元素）<br/>")
37 .append(" 有" + $allfile.length + " 个（ :file 元素）<br/>")
38 .append(" 有" + $allhidden.length + " 个（ :hidden 元素）<br/>")
39 .append(" 有" + $allselect.length + " 个（ select 元素）<br/>")
40 .append(" 有" + $alltextarea.length + " 个（ textarea 元素）<br/>")
41 .append(" 表单有 " + $inputs.length + " 个（input）元素。<br/>")
42 .append(" 总共有 " + $AllInputs.length + " 个(:input)元素。<br/>")
43 .css("color", "red")
44
45 //显示所有的隐藏标签名称
46 $allhidden.each(function(){
47 $("div").append("<br/>").append($(this).get(0).nodeName);
48 });
49
50 $("form").submit(function () { return false; }); // return false;不能提交.
51
52 });
53 //]]>
54 </script>
55 </head>
56 <body>
57 <form id="form1" action="#">
58 <input type="button" value="Button"/><br/>
59 <input type="checkbox" name="c"/>1<input type="checkbox" name="c"/>2<input type="checkbox" name="c"/>3<br/>
60 <input type="file" /><br/>
61 <input type="hidden" /><div style="display:none">test</div><br/>
62 <input type="image" /><br/>
63 <input type="password" /><br/>
64 <input type="radio" name="a"/>1<input type="radio" name="a"/>2<br/>
65 <input type="reset" /><br/>
66 <input type="submit" value="提交"/><br/>
67 <input type="text" /><br/>
68 <select><option>Option</option></select><br/>
69 <textarea rows="5" cols="20"></textarea><br/>
70 <button>Button</button><br/>
71 </form>
72
73 <div></div>
74 </body>
75 </html>
2.代码实例2
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>08-表单对象属性过滤选择器.html</title>
6 <!-- 引入jQuery -->
7 <script src="../js/jquery-1.8.3.js" type="text/javascript"></script>
8 <script src="./script/assist.js" type="text/javascript"></script>
9 <link rel="stylesheet" type="text/css" href="./css/style.css" />
10
11 <script type="text/javascript">
12 $(function(){
13 // <button id="btn1">对表单内 可用input 赋值操作.</button>
14 $("#btn1").click(function(){
15 $("input:enabled").val("可用的");
16 });
17 // <button id="btn2">对表单内 不可用input 赋值操作.</button>
18 $("#btn2").click(function(){
19 $("input:disabled").val("不可用");
20 });
21 // <button id="btn3">获取多选框选中的个数.</button>
22 $("#btn3").click(function(){
23 var count = $("input[type='checkbox'][name='newsletter']:checked").length;
24 alert(count);
25 });
26 // <button id="btn4">获取下拉框选中的内容.</button>
27 $("#btn4").click(function(){
28 //如果有value值，val()函数就获得value的值，如果没有就获得text的值
29 $(":selected").each(function(){
30 var text = $(this).val();
31 alert(text);
32 });
33 });
34 })
35 </script>
36
37 </head>
38 <body>
39 <h3> 表单对象属性过滤选择器.</h3>
40 <button type="reset">重置所有表单元素</button>
41 <input type="checkbox" id="isreset" checked="checked"/><label for="isreset">点击下列按钮时先自动重置页面</label>
42 <br /><br />
43 <button id="btn1">对表单内 可用input 赋值操作.</button>
44 <button id="btn2">对表单内 不可用input 赋值操作.</button>
45 <button id="btn3">获取多选框选中的个数.</button>
46 <button id="btn4">获取下拉框选中的内容.</button>
47
48 <br /><br />
49
50 可用元素：<input name="add" value="可用文本框"/> <br/>
51 不可用元素：<input name="email" disabled="disabled" value="不可用文本框"/><br/>
52 可用元素： <input name="che" value="可用文本框" /><br/>
53 不可用元素：<input name="name" disabled="disabled" value="不可用文本框"/><br/>
54 <br/>
55 多选框：<br/>
56 <input type="checkbox" name="newsletter" checked="checked" value="test1" />test1
57 <input type="checkbox" name="newsletter" value="test2" />test2
58 <input type="checkbox" name="newsletter" value="test3" />test3
59 <input type="checkbox" name="newsletter" checked="checked" value="test4" />test4
60 <input type="checkbox" name="newsletter" value="test5" />test5
61 <div id="checkboxDivId"></div>
62
63 <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
64 下拉列表1：<br/>
65 <select name="test" multiple="multiple" style="height:100px">
66 <option>浙江</option>
67 <option selected="selected">湖南</option>
68 <option>北京</option>
69 <option selected="selected">天津</option>
70 <option>广州</option>
71 <option>湖北</option>
72 </select>
73
74 <br/><br/>
75 下拉列表2：<br/>
76 <select name="test2" >
77 <option>浙江</option>
78 <option>湖南</option>
79 <option selected="selected">北京</option>
80 <option>天津</option>
81 <option>广州</option>
82 <option>湖北</option>
83 </select>
84 <br/><br/>
85
86 <div id="selectDivId"></div>
87
88
89
90 </body>
91 </html>
jQuery--表单的过滤的更多相关文章
- JQuery表单元素过滤选择器
此选择器主要是对所选择的表单元素进行过滤: 选择器 描述 返回 enabled 选择所有的可用的元素 集合元素 disabled 选择所有的不可用的元素 集合元素 checked 选择所有被选中的元素 ...
- jquery表单内容过滤
效果: 输入筛选字段后显示效果: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http ...
- Jquery | 基础 | 使用 jQuery 表单过滤选择器
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- Jquery表单提交后获取返回Json值
1.给form添加id值: <form action="/News/SaveMessage" method="post" accept-charset=& ...
- Jquery表单序列化和AJAX全局事件
Jquery表单序列化 1.必须放在form标签内: 2.控件必须有name属性: 3.控件的value值会提交到服务器: 如: <form id="form1"> & ...
- 【jquery】Validform，一款不错的 jquery 表单验证插件
关于 Validform 这是一款很不错的 jquery 表单验证插件,它几乎能够满足任何验证需求,仅仅一行代码就能搞定整站的表单验证. $('form').Validform(); 为什么能如此方便 ...
- 【jQuery基础学习】06 jQuery表单验证插件-Validation
jQuery的基础部分前面都讲完了,那么就看插件了. 关于jQuery表单验证插件-Validation validation特点: 内置验证规则:拥有必填.数字.E-Mail.URL和信用卡号码等1 ...
- python_way day17 jQuery表单验证，事件绑定，插件，文本框架，正则表达式
python_way day17 1.jQuery表单验证 dom事件绑定 jquery事件绑定 $.each return值的判断 jquery扩展方法 2.前段插件 3.jDango文本框架 4. ...
- jquery表单验证使用插件formValidator
JQuery表单验证使用插件formValidator 作者: 字体:[增加 减小] 类型:转载 时间:2012-11-10我要评论 jquery表单验证使用插件formValidator,可供有需求 ...
- jQuery打造用户注册时获取焦点文本框出现提示jquery表单特效
jQuery打造用户注册时获取焦点文本框出现提示效果的jquery表单特效 当获取焦点时,会分别的弹出相应的信息提示框,失去焦点就会隐藏提示信息. 效果兼容性很高,适用浏览器:IE6.IE7.IE8. ...
随机推荐
- Smartbi权限安全管理系统_保障数据权限安全
思迈特软件Smartbi具有完善的安全管理体系,Smartbi权限安全管理系统它可以控制用户功能权限.数据访问权限.资源访问权限.Smartbi权限安全管理系统支持按用户.用户组.角色进行管理:支持多 ...
- 学习Spring5必知必会（7）~Spring tx
一.spring的事务管理 1.引出事务的经典例子:银行转账发生异常 ✿ 解决:把转出钱和转入钱的业务放到同一个事务空间. ■ 分析转账过程流程: ① 首先,获取 DataSource 对象: ② 其 ...
- 【C#基础概念】Ineterface 接口的设计原则
接口设计方式 自顶向下 (如图所示),自底向上(发现类需要结构了就声明一个接口). 接口的作用 用来解耦.继承 接口的本质
- Linux中查看进程与日志
转至:https://www.cnblogs.com/dengxiaoning/p/13336778.html Linux尽管使用频繁,仍然每次都还是需要到处去找相关的命令,如进程,日志之类的,既然这 ...
- Leaflet：Event与Layer类属性、方法
Event 之所以要说Event,是因为很多类都是继承自Layer--Marker.Popup.Tooltip.Path以及继承自Path的Circle.Polyline.Polygon...:而La ...
- JZ-018-二叉树的镜像
二叉树的镜像 题目描述 操作给定的二叉树,将其变换为源二叉树的镜像. 题目链接: 二叉树的镜像 代码 /** * 标题:二叉树的镜像 * 题目描述 * 操作给定的二叉树,将其变换为源二叉树的镜像. * ...
- JZ-013-调整数组顺序使奇数位于偶数前面
调整数组顺序使奇数位于偶数前面 题目描述 输入一个整数数组,实现一个函数来调整该数组中数字的顺序,使得所有的奇数位于数组的前半部分,所有的偶数位于数组的后半部分,并保证奇数和奇数,偶数和偶数之间的相对 ...
- LeetCode-081-搜索旋转排序数组 II
搜索旋转排序数组 II 题目描述:已知存在一个按非降序排列的整数数组 nums ,数组中的值不必互不相同. 在传递给函数之前,nums 在预先未知的某个下标 k(0 <= k < nums ...
- Azure DevOps (三) 实现和Jenkins的联动
上一篇文章中,我们通过azure 的webhook实现了和钉钉机器人的联动,实现了通过钉钉机器人告知大家刚才谁动了仓库. 在文章开篇的时候我们举例说了jenkins也可以实现和azure联动,今天我们 ...
- GAN实战笔记——第七章半监督生成对抗网络（SGAN）
半监督生成对抗网络 一.SGAN简介 半监督学习(semi-supervised learning)是GAN在实际应用中最有前途的领域之一,与监督学习(数据集中的每个样本有一个标签)和无监督学习(不使 ...