<!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. postgres源码目录结构

    1.第一级目录介绍 |_postgres |_aclocal.m4------------config用的文件的一部分 |_config----------------config文件目录 |_con ...

  2. ssh原理【转】

    1 转自 http://www.ruanyifeng.com/blog/2011/12/ssh_remote_login.html 2 ssh远程登陆的原理 普通用户远程登陆 ssh jason@ho ...

  3. this that 时间戳转日期 小程序 列表 与 加载

    var gd = getApp().globalData; var imgUrlApp = gd.imgUrlApp; var localImgPath = gd.localImgPath; var ...

  4. WJC上学记

    WJC上学记题目描述:WJC为了追求YHY,决定考上树人,但是,愚蠢的他没有足够好的成绩,只能靠自己的亲戚来帮忙.但是由于他足够愚蠢,连自己的亲戚都不认识,仁慈而被树人优录的Geek_du决定帮助他. ...

  5. adb client, adb server, adbd原理浅析（附带我的操作过程）【转】

    本文转载自:http://blog.csdn.net/stpeace/article/details/24933813 adb是什么? adb就是Android调试桥,很形象啊. 先来看adb原理的逻 ...

  6. 修改u-boot的开机logo及显示过程【转】

    本文转载自;http://blog.csdn.net/voice_shen/article/details/6789424 [ u-boot: Git://git.denx.de/u-boot.git ...

  7. Codeforces Round #106 (Div. 2) D. Coloring Brackets —— 区间DP

    题目链接:https://vjudge.net/problem/CodeForces-149D D. Coloring Brackets time limit per test 2 seconds m ...

  8. 适配器、工厂模式、线程池、线程组、互斥锁、Timer类、Runtime类、单例设计模式(二十四)

    1.多线程方法 * Thread 里面的俩个方法* 1.yield让出CPU,又称为礼让线程* 2.setPriority()设置线程的优先级 * 优先级最大是10,Thread.MAX_PRIORI ...

  9. PHP Framework MVC Benchmark 基准测试

    身边有朋友在用yaf框架,讨论的也声音也比较多,今天没事看鸟哥的博客,看到一篇现在PHP主流的几个框架性能对比,比较有意思,给大家分享一下! Yaf是用PHP扩展的形式写的一个PHP框架,也就是以C语 ...

  10. UVA-11462 (计数排序)

    题意: 2e6个数,按从小到大的顺序输出; 思路: 计数排序; AC代码: #include <bits/stdc++.h> /* #include <vector> #inc ...