<!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>

    <title> 使用 jQuery 表单过滤选择器 </title>

    <script language="javascript" type="text/javascript" src="jquery-3.3.1.min.js"></script>

    <style type="text/css">

        body {

            font-size: 12px;

            text-align: center

        }

        form {

            width: 241px

        }

        textarea,

        select,

        input,

        span {

            display: none

        }

        .btn {

            border: #666 1px solid;

            padding: 2px;

            width: 60px;

            filter: progid:DXImageTransform.Microsoft. Gradient(GradientType=0, StartColorStr=#ffffff,

                EndColorStr=#ECE9D8);

        }

        .txt {

            border: #666 1px solid;

            padding: 3px

        }

        .img {

            padding: 2px;

            border: solid 1px #ccc

        }

        .div {

            border: solid 1px #ccc;

            background-color: #eee;

            padding: 5px

        }

    </style>

    <script type="text/javascript">

        $(function () {

            //重置页面

            $("#btn0").click(function () {

                window.location.reload();

            })

            // 显示 Input 类型元素的总数量

            $("#btn1").click(function () {

                $("#form1 div").html(" 表单共找出 Input 类型元素 :" + $("#form1 :input").length);

                $("#form1 div").addClass("div");

            })

            // 显示所有文本框对象

            $("#btn2").click(function () {

                $("#form1 :text").show(3000);

            })

            // 显示所有密码框对象

            $("#btn3").click(function () {

                $("#form1 :password").show(3000);

            })

            // 显示所有单选按钮对象

            $("#btn4").click(function () {

                $("#form1 :radio").show(3000);

                $("#form1 #Span1").show(3000);

            })

            // 显示所有复选框对象

            $("#btn5").click(function () {

                $("#form1 :checkbox").show(3000);

                $("#form1 #Span2").show(3000);

            })

            $("#btn6").click(function () {

                // 显示所有提交按钮对象

                $("#form1 :submit").show(3000);

            })

            $("#btn7").click(function () {

                // 显示所有图片域对象

                $("#form1 :image").show(3000);

            })

            $("#btn8").click(function () {

                // 显示所有重置按钮对象

                $("#form1 :reset").show(3000);

            })

            $("#btn9").click(function () {

                // 显示所有按钮对象

                $("#form1 :button").show(3000);

            })

            $("#btn10").click(function () {

                // 显示所有文件域对象

                $("#form1 :file").show(3000);

            })

        })

    </script>

</head>

<body>

    <form id="form1">

        <textarea class="txt"> TextArea</textarea>

        <select>

            <option value="0"> Item 0</option>

        </select>

        <input type="text" value="Text" class="txt" />

        <input type="password" value="PassWord" class="txt" />

        <input type="radio" /><span id="Span1"> Radio</span>

        <input type="checkbox" />

        <span id="Span2"> CheckBox</span>

        <input type="submit" value="Submit" class="btn" />

        <input type="image" title="Image" src="Images/logo.gif" class="img" />

        <input type="reset" value="Reset" class="btn" />

        <input type="button" value="Button" class="btn" />

        <input type="file" title="File" class="txt" />

        <div id="divShow"></div>

    </form>

    <button id="btn0">重置</button> <br/>

    <button id="btn1">显示 Input 类型元素的总数量<button> <br/>

    <button id="btn2">显示所有文本框对象</button> <br/>

    <button id="btn3">显示所有密码框对象</button> <br/>

    <button id="btn4">显示所有单选按钮对象</button> <br/>

    <button id="btn5">显示所有复选框对象</button> <br/>

    <button id="btn6">显示所有提交按钮对象<button> <br/>

    <button id="btn7">显示所有图片域对象</button> <br/>

    <button id="btn8">显示所有重置按钮对象</button> <br/>

    <button id="btn9">显示所有按钮对象</button> <br/>

    <button id="btn10">显示所有文件域对象 </button> <br/>

</body>

</html>

　　

Jquery | 基础 | 使用 jQuery 表单过滤选择器的更多相关文章

  1. jQuery中的表单过滤选择器（四、七）：:input、:text、:password、:radio、:checkbox、:file等

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <hea ...

  2. 雷林鹏分享：jQuery EasyUI 表单 - 过滤下拉数据网格

    jQuery EasyUI 表单 - 过滤下拉数据网格 下拉数据网格(Combogrid)组件和下拉框(Combobox)组件的共同点是,除了都具有下拉面板以外,它们都是基于数据网格(Datagrid ...

  3. jquery通过class验证表单不能为空

    在开发系统时,往往都有某些表单数据为必填项,若用jQuery通过ID去验证,不仅会影响效率,还会有所遗漏,不易于后期维护. 本章将介绍如何利用jQuery,通过为表单配置class进行统一验证.(ID ...

  4. 运用jQuery写的验证表单

    //运用jQuery写的验证表单 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h ...

  5. jquery.form.js 让表单提交更优雅

    jquery.form.js 让表单提交更优雅.可以页面不刷新提交表单,比jQuery的ajax提交要功能强大. 1.引入 <script src="/src/jquery-1.9.1 ...

  6. 基于jQuery商品分类选择提交表单代码

    分享一款基于jQuery商品分类选择提交表单代码.这是一款基于jQuery实现的商品信息选择列表表单提交代码. 在线预览   源码下载 实现的代码: <div class="yList ...

  7. 第二百二十一节，jQuery EasyUI，Form(表单)组件

    jQuery EasyUI,Form(表单)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 Form(表单)组件的使用方法,这个组件不依赖于 ...

  8. Jquery来对form表单提交（mvc方案）

    来自:http://www.cnblogs.com/lmfeng/archive/2011/06/18/2084325.html 我先说明一下,这是asp.net mvc 里面的用法, Jquery来 ...

  9. jquery.validate.js 验证表单时，在IE当中未验证就直接提交的原因

    jquery.validate.js 验证表单时,在IE当中未验证就直接提交的原因 今天利用了jquery.validate.js来验证表单,发现在火狐.谷歌浏览器当中都可以进行验证,但是在IE系列浏 ...

随机推荐

  1. 读写锁(pthread)

    读写锁: 用于对于某个给定资源的共享访问,而不是像互斥锁那样,将所有试图进入临界区的线程都阻塞住 相关内容: 线程互斥锁 分配规则:(写独占,读共享) 1.只要没有线程持有某个给定的读写锁用于写,那么 ...

  2. Quick-Cocos2d3.2RC1在Code IDE中实现代码提示

    之前写Lua最痛苦的就是代码提示问题,如今官方给了IDE很好用.以下说Quick使用IDE加入代码提示问题. 第一步:制作api提示压缩包. 须要使用控制台实现方法例如以下: 1.找到framewor ...

  3. 关于用HOOK拦截键盘的一些问题

    因为MSDN上说要这样做,所以我就这样做的,读懂MSDN是关键,下面来仔细阅读一下MSDN,看它到底是怎样描述的.阅读的时候我先给出原文,再进行自己的一些翻译或描述. 先看回调函数KeyboardPr ...

  4. MVC Hidden用法

    @Html.Hidden("DataSeriID",ViewBag.DataSeriID as string) 第一个参数相当于生成的ID值,后面的参数是String类型的数据,V ...

  5. spring-jar包详解整理（大合集）

    转:https://blog.csdn.net/weisong530624687/article/details/50888094 spring.jar 是包含有完整发布模块的单个jar 包.但是不包 ...

  6. miller_rabin模板

    miller_rabin素数测试法 #include <iostream> #include <cstdlib> #include <stdio.h> #inclu ...

  7. YTU 1055: 输入字符串以及输出

    1055: 输入字符串以及输出 时间限制: 1 Sec  内存限制: 128 MB 提交: 694  解决: 476 题目描述 编写一函数,由实参传来一个字符串,统计此字符串中字母.数字.空格和其它字 ...

  8. 书写优雅的shell脚本(三) - shell中exec解析

    参考:<linux命令.编辑器与shell编程> <unix环境高级编程> exec和source都属于bash内部命令(builtins commands),在bash下输入 ...

  9. JS两个数组比较，删除重复值巧妙方法

    //方法一 var arr1 = [1,2,3,4,5,6,7,8]; //数组A var arr2 = [1,2,3,11,12,13,14];//数组B var temp = []; //临时数组 ...

  10. 【旧文章搬运】Windows句柄分配算法(一)

    原文发表于百度空间,2009-04-04========================================================================== 分析了Wi ...