<!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. iOS多线程编程（四）------ GCD（Grand Central Dispatch）

    一.简单介绍 是基于C语言开发的一套多线程开发机制.也是眼下苹果官方推荐的多线程开发方法.用起来也最简单.仅仅是它基于C语言开发,并不像NSOperation是面向对象的开发.而是全然面向过程的.假设 ...

  2. VS2005断点失效的问题

    VS2005下使用VC,部分断点无效,显示『当前不会命中断点.还没有为该文档加载任何符号』. 试过以下一些方法: 1.无效断点所在的项目和启动项目的设置:项目->属性->配置属性-> ...

  3. UR#34. 多项式乘法

    #34. 多项式乘法 统计 描述 提交 自定义测试 这是一道模板题. 给你两个多项式,请输出乘起来后的多项式. 输入格式 第一行两个整数 nn 和 mm,分别表示两个多项式的次数. 第二行 n+1n+ ...

  4. 理解yarn平台，理解万岁，肤浅理解也万岁~

    从Hadoop1到Hadoop2很大程度上解放了Jobtracker资源调度的问题,这就得多亏了yarn平台了.我知道的,除了我们的大豆瓣用的是Mesos,咱们国家可以说应该是99.99%都使用的是y ...

  5. 关于yum的一些基本的东西

    1 sqlite数据库的使用 第一,某个centos版本的包相关的信息都放在一个服务器端的sqlite数据库文件中,yum会下载到本地,进行包安装的时候用. 第二,安装的历史记录放在sqlite数据库 ...

  6. Android 的assets文件资源与raw文件资源读取

    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/zpf8861/article/details/34504183   res/raw和assets的同 ...

  7. iOS 设置TextView控件内容行间距

    - (BOOL)textViewShouldBeginEditing:(UITextView *)textView { if (textView.text.length < 1) { textV ...

  8. UIActivityIndicatorView控件的属性和方法

    对于UIActivityIndicatorView的使用,我们一般会创建一个背景View,设置一定的透明度,然后将UIActivityIndicatorView贴在背景View上,在我们需要的时候将这 ...

  9. poj2761静态区间第k大

    例题:poj2761 题目要求:给定一个长度为n的序列,给定m个询问,每次询问求[l,r]区间内的第k大: 对于这道题目来说,很多算法都可以使用,比如说树套树(一个负责划分区间,一个负责维护这段区间内 ...

  10. javascript:;用法集锦

    如果是个# ,就会出现跳到顶部的情况,个人收藏的几种解决方法:1:<a href="####"></a> 2:<a href="javasc ...