jQuery表单过滤器

最新推荐文章于 2023-03-22 08:07:42 发布

darling.0

最新推荐文章于 2023-03-22 08:07:42 发布

阅读量585

点赞数 1

分类专栏： web前端文章标签： jquery 表单过滤器选择器

本文链接：https://blog.csdn.net/daliyuan350649623/article/details/53746680

版权

web前端专栏收录该内容

23 篇文章 0 订阅

订阅专栏

jQuery表单过滤器

: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="reset">
:file 文件上传 <input type="file">
:hidden 隐藏域 <input type="hidden"> ,还可以获得 <xxx style="display:none">
其他值： <br> <option> ,存在浏览器兼容问题
:button 所有普通按钮。 <button > 或 <input type="button">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>09-表单选择器.html</title>
 <!--   引入jQuery -->
 <script src="../js/jquery-1.8.3.js" type="text/javascript"></script>
  <script type="text/javascript">
  //<![CDATA[
  $(document).ready(function(){

    var $alltext = $("#form1 :text");
    var $allpassword= $("#form1 :password");
    var $allradio= $("#form1 :radio");
    var $allcheckbox= $("#form1 :checkbox");

    var $allsubmit= $("#form1 :submit");
    var $allimage= $("#form1 :image");
    var $allreset= $("#form1 :reset");
    var $allbutton= $("#form1 :button"); // <input type=button />  和 <button ></button>都可以匹配
    var $allfile= $("#form1 :file");
    var $allhidden= $("#form1 :hidden"); // <input type="hidden" />和<div style="display:none">test</div>都可以匹配.
    var $allselect = $("#form1 select");
    var $alltextarea = $("#form1 textarea");
    //获取id为form的元素下的所有表单元素
    var $AllInputs = $("#form1 :input");
    //获取id为form的元素下的所有input元素
    var $inputs = $("#form1 input");

    $("div").append(" 有" + $alltext.length + " 个（ :text 元素）<br/>")
            .append(" 有" + $allpassword.length + " 个（ :password 元素）<br/>")
            .append(" 有" + $allradio.length + " 个（ :radio 元素）<br/>")
            .append(" 有" + $allcheckbox.length + " 个（ :checkbox 元素）<br/>")
            .append(" 有" + $allsubmit.length + " 个（ :submit 元素）<br/>")
            .append(" 有" + $allimage.length + " 个（ :image 元素）<br/>")
            .append(" 有" + $allreset.length + " 个（ :reset 元素）<br/>")
            .append(" 有" + $allbutton.length + " 个（ :button 元素）<br/>")
            .append(" 有" + $allfile.length + " 个（ :file 元素）<br/>")
            .append(" 有" + $allhidden.length + " 个（ :hidden 元素）<br/>")
            .append(" 有" + $allselect.length + " 个（ select 元素）<br/>")
            .append(" 有" + $alltextarea.length + " 个（ textarea 元素）<br/>")
            .append(" 表单有 " + $inputs.length + " 个（input）元素。<br/>")
            .append(" 总共有 " + $AllInputs.length + " 个(:input)元素。<br/>")
            .css("color", "red")

    //显示所有的隐藏标签名称
    $allhidden.each(function(){
        $("div").append("<br/>").append($(this).get(0).nodeName);
    });

    $("form").submit(function () { return false; }); // return false;不能提交.

  });
  //]]>
  </script>
</head>
<body>
  <form id="form1" action="#">
    <input type="button" value="Button"/><br/>
    <input type="checkbox" name="c"/>1<input type="checkbox" name="c"/>2<input type="checkbox" name="c"/>3<br/>
    <input type="file" /><br/>
    <input type="hidden" /><div style="display:none">test</div><br/>
    <input type="image" /><br/>
    <input type="password" /><br/>
    <input type="radio" name="a"/>1<input type="radio" name="a"/>2<br/>
    <input type="reset" /><br/>
    <input type="submit" value="提交"/><br/>
    <input type="text" /><br/>
    <select><option>Option</option></select><br/>
    <textarea rows="5" cols="20"></textarea><br/>
    <button>Button</button><br/>
  </form>

  <div></div>
</body>
</html>

这里写图片描述

darling.0

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQuery表单过滤器

jQuery表单过滤器 :input 所有的表单元素。（input / select / textarea/ button） :text 文本框 <input type="text"> :password 密码框<input type=" password "> :radio 单选<input type="radio"> :che
复制链接

扫一扫

专栏目录