<!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. Material Design （四），AppBarLayout的使用

    前言  AppBarLayout,顾名知意.就是用来给AppBar布局的容器,是LinearLayout的子类.而AppBar就包括我们通常所知道的ActionBar,Toolbar. AppBarL ...

  2. VUE 之 路由 VueRouter

    1.VueRouter的安装 1.1.https://unpkg.com/vue-router/dist/vue-router.js下载安装. 1.2.<script src="./s ...

  3. nginx搭建支持http和rtmp协议的流媒体server之中的一个

    实验目的:让Nginx支持flv和mp4格式文件,支持RTMP协议的直播和点播:同一时候打开RTMP的HLS功能 ​资料:HTTP Live Streaming(缩写是 HLS)是一个由苹果公司提出的 ...

  4. Java异步套接字实例

    服务端 package com.test.server; import java.io.IOException; import java.net.InetSocketAddress; import j ...

  5. 对soc-audio体系snd_soc_machine和snd_soc_dai_link简单理解

    ASOC (ALSA system on chip)              // 主要为嵌入式系统专门开发的sound管理体系结构[luther.gliethttp].Digital Audio ...

  6. Getting Started with xUnit.net (desktop)

    https://xunit.github.io/docs/getting-started-desktop.html In this article, we will demonstrate getti ...

  7. YTU 2802: 判断字符串是否为回文

    2802: 判断字符串是否为回文 时间限制: 1 Sec  内存限制: 128 MB 提交: 348  解决: 246 题目描述 编写程序,判断输入的一个字符串是否为回文.若是则输出"Yes ...

  8. Scrapy运行报错：ModuleNotFoundError: No module named 'douban.douban'

    运行scrapy爬虫报错: from douban.douban.items import DoubanItem ModuleNotFoundError: No module named 'douba ...

  9. linux初级学习笔记六：linux用户及权限详解！(视频序号：03_4)

    本节学习的命令:/etc/passwd,/etc/shadow,/etc/group文件详解 本节学习的技能: 安全上下文 文件与目录的权限管理 影子命令 用户,用户组类别详解 /etc/passwd ...

  10. macbook pro 配置jdk,maven环境变量

    https://blog.csdn.net/vvv_110/article/details/72897142(1)下载jdk安装包,进行安装,maven安装包,进行解压 (2)改写环境变量的配置文件/ ...