<!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开发之-实现点击单行View显示和隐藏Cell

    李洪强iOS开发之-实现点击单行View显示和隐藏Cell 实现的效果:  .... ....

  2. CSS transform旋转问题

    我们都知道css的transform可以让旋转多少角度:transform:rotate(90deg),但是设置后只能旋转一次,如何想让它一直旋转下去怎么办?一种是使用matrix属性获取当前tran ...

  3. linux 输入子系统(1) -Event types

    输入系统协议用类型types和编码codecs来表示输入设备的值并用此来通知用户空间的应用程序. input协议是一个基于状态的协议,只有当相应事件编码对应的参数值发生变化时才会发送该事件.不过,状态 ...

  4. 对 block 内存管理的一些看法

    首先交代一下retain cycle ,和 产生retain cycle后我们应该怎么处理. 1.retain cycle在block中是极易产生,block就是一段可以灵活使用的代码,你可以把它当做 ...

  5. 通过xmanager连接Linux图形界面

    今天要在linux下安装数据库,用的是xmanager:之前自己也用过该工具在OUI下做过安装,还很顺利. 但是,今天连接后,运行命令,等了有5分钟,没有出现OUI界面. linux版本: [root ...

  6. Linux系统CentOS下mysql的安装日志

    今天自己捣鼓了一下,在linux系统CentOs6.5下使用源码方式安装和配置mysql,这里记录一下步骤. a) 下载mysql,source版本.Mysql-5.6.20.tar.gz b) 安装 ...

  7. [Java] String类, StringBuffer类

    1. String 类 1. 创建: String s1 = new String; s1 = "abc"; String s2 = new String("abc&qu ...

  8. BZOJ_1915_[Usaco2010 Open]奶牛的跳格子游戏_DP+单调队列

    BZOJ_1915_[Usaco2010 Open]奶牛的跳格子游戏_DP+单调队列 Description 奶牛们正在回味童年,玩一个类似跳格子的游戏,在这个游戏里,奶牛们在草地上画了一行N个格子, ...

  9. Name That Number

    链接 分析:找出每一个字母对应的数字,然后看字典里面那个与其匹配 /* ID: **** PROG: namenum LANG: C++ */ #include<iostream> #in ...

  10. 【hdu 5418】 Victor and world

    [题目链接] 点击打开链接 [算法] 状压DP f[i][S]表示走的最后一步在i,状态为S 于是我们可以用最短路径 + 状压DP解决此题,由于不存在负边,所以可以用dijkstra+堆优化 [代码] ...