<!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. CXF发布在Web服务

    1.下载apache-cxf-3.1.4,将jar引入新工程中. 2.People.java package com.soap.server; import java.util.Date; impor ...

  2. 在git push前怎样遗弃掉历史commit

    今天写了一天代码,然后 git hub commit 了 多达 7 次. 可是都没有把改动正式推送上去. 结果最后要推送的时候发现中间有一个提交文件超过了100M. 是 vs 的代码性能分析报告 .v ...

  3. HDU 6058 Kanade's sum 二分，链表

    Kanade's sum Problem Description Give you an array A[1..n]of length n. Let f(l,r,k) be the k-th larg ...

  4. apache benchmark

    1 ab是什么 是一个web高并发测试工具,可以发送get.put.post请求. 2 ab -n和-c共存 -c是concurrency的缩写,即同一时间发送多个请求. -n是指本次总共发送多少个请 ...

  5. HDFS vs. MongoDB

    HDFS MongoDB 共同点 http://www.mongoing.com/wp-content/uploads/2016/08/MDBSH2016/TJ_MongoDB+Spark.pdf 横 ...

  6. Ruby中任务构建工具rake的入门

    不同的rake文件当中不要定义重名的方法,不然没法调用 参考:http://www.jb51.net/article/81476.htm Rake简介 Rake的意思是Ruby Make,一个用rub ...

  7. ajax访问json文件缓存问题

    ajax访问json文件,json文件改动,访问的时候也不能及时看到改动后的内容. 这是因为浏览器缓存的原因. 在这时候就需要清除浏览器的缓存或者加上一个标记,让ajax访问文件的时候知道这是一个新的 ...

  8. POJ2752 Seek the Name, Seek the Fame —— KMP next数组

    题目链接:https://vjudge.net/problem/POJ-2752 Seek the Name, Seek the Fame Time Limit: 2000MS   Memory Li ...

  9. Java中文&编码问题小结

    转自:http://www.blogjava.net/zhugf000/archive/2005/10/09/15068.html Java字符编码转换过程说明 常见问题 JVM JVM启动后,JVM ...

  10. setTimeout的第三个参数

    最熟悉的地方,往往会忽略一些细节.就比如 setTimeout 函数,做前端开发的同学都会很熟悉这个函数,经常使用这个函数,但是知道这个函数还有第三个参数的小伙伴可能就不多了.起码我在阅读阮老师的 e ...