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--表单的过滤的更多相关文章

  1. JQuery表单元素过滤选择器

    此选择器主要是对所选择的表单元素进行过滤: 选择器 描述 返回 enabled 选择所有的可用的元素 集合元素 disabled 选择所有的不可用的元素 集合元素 checked 选择所有被选中的元素 ...

  2. jquery表单内容过滤

    效果:    输入筛选字段后显示效果: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http ...

  3. Jquery | 基础 | 使用 jQuery 表单过滤选择器

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. Jquery表单提交后获取返回Json值

    1.给form添加id值: <form action="/News/SaveMessage" method="post" accept-charset=& ...

  5. Jquery表单序列化和AJAX全局事件

    Jquery表单序列化 1.必须放在form标签内: 2.控件必须有name属性: 3.控件的value值会提交到服务器: 如: <form id="form1"> & ...

  6. 【jquery】Validform，一款不错的 jquery 表单验证插件

    关于 Validform 这是一款很不错的 jquery 表单验证插件,它几乎能够满足任何验证需求,仅仅一行代码就能搞定整站的表单验证. $('form').Validform(); 为什么能如此方便 ...

  7. 【jQuery基础学习】06 jQuery表单验证插件-Validation

    jQuery的基础部分前面都讲完了,那么就看插件了. 关于jQuery表单验证插件-Validation validation特点: 内置验证规则:拥有必填.数字.E-Mail.URL和信用卡号码等1 ...

  8. python_way day17 jQuery表单验证，事件绑定，插件，文本框架，正则表达式

    python_way day17 1.jQuery表单验证 dom事件绑定 jquery事件绑定 $.each return值的判断 jquery扩展方法 2.前段插件 3.jDango文本框架 4. ...

  9. jquery表单验证使用插件formValidator

    JQuery表单验证使用插件formValidator 作者: 字体:[增加 减小] 类型:转载 时间:2012-11-10我要评论 jquery表单验证使用插件formValidator,可供有需求 ...

  10. jQuery打造用户注册时获取焦点文本框出现提示jquery表单特效

    jQuery打造用户注册时获取焦点文本框出现提示效果的jquery表单特效 当获取焦点时,会分别的弹出相应的信息提示框,失去焦点就会隐藏提示信息. 效果兼容性很高,适用浏览器:IE6.IE7.IE8. ...

随机推荐

  1. 巧用 CSS 把图片马赛克化

    一.image-rendering 介绍 CSS 中有一个有趣的特性叫 image-rendering,它可以通过算法来更好地显示被缩放的图片. 假设我们有一张尺寸较小的二维码截图(下方左),将其放大 ...

  2. 网络测试技术——802.1X TLS认证（上篇）

    一.TLS认证简介 1.TLS认证 (1)认证过程 · 最安全认证技术 · 实施最复杂 (2)TLS双向证书认证 · 服务器对客户端进行认证 · 客户端对服务器进行认证 2.TLS认证过程 3.交换机 ...

  3. 习惯用excel却满足不了数据分析的需求怎么办？本文给您方法

    Excel 可以说是如今最常用的做分析统计的工具了,简单易用且功能强大,但是excel难以满足一些高端的数据分析需求,主要存在的问题体现在数据共享.数据权限.数据量等方面. 那如果有一款工具既不用你花 ...

  4. 为什么在数据驱动的路上，AB 实验值得信赖？

    在线AB实验成为当今互联网公司中必不可少的数据驱动的工具,很多公司把自己的应用来做一次AB实验作为数据驱动的试金石. 文 | 松宝 来自 字节跳动数据平台团队增长平台 在线AB实验成为当今互联网公司中 ...

  5. 【C# 线程】Thread类 以及使用案例

    System.Threading.Thread类 涉及到的类和枚举 Volatile 类Interlocked 类SpinLock 类SpinWait类Barrier 类ThreadLocal< ...

  6. Java 实现Https访问工具类 跳过ssl证书验证

    不多BB ,代码直接粘贴可用 import java.io.BufferedReader; import java.io.ByteArrayOutputStream; import java.io.F ...

  7. python 2.x 版本 pip 的使用

    看文档要使用 python2.7 的 pip 安装 TensorFlow, 因为有python3和pip3的缘故(pip2 和 /usr/bin/pip2看起来像是基于python2.x的,打个-V便 ...

  8. Qt：QDateTime

    0.说明 提供时间日期的表达和相关函数. QDateTime通过日期+时间来构造一个日期时间.它综合了QDate和QTime的所有特性. 它可以通过系统时钟来获取当前DateTime.它还提供了比较时 ...

  9. FaE：基于符号知识的适应性和可解释的神经记忆

    原创作者 | 朱林 论文解读: Facts as Experts: Adaptable and Interpretable Neural Memory over Symbolic Knowledge ...

  10. tensorflow源码解析之common_runtime拾遗

    把common_runtime中剩余的内容,按照文件名排序进行了简单的解析,时间原因写的很仓促,算是占个坑,后续有了新的理解再来补充. allocator_retry 有时候内存分配不可能一次完成,为 ...