jQuery中的表单过滤选择器（四、七）：:input、:text、:password、:radio、:checkbox、:file等
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>表单过滤选择器</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="js/jquery-1.11.3.js"></script>
<style type="text/css">
body{
font-family: "Microsoft YaHei"
}
.cGreen{background-color: #4CA902}
.cPink{background-color: #ED4A9F}
.cBlue{background-color: #0092E7}
.cCyan{background-color: #01A6A2}
.cYellow{background-color: #DCA112}
.cRed{background-color: #B7103B}
.cPurple{background-color: #792F7C}
.cBlack{background-color: #110F10}
.hide{display: none;}
</style>
<script type="text/javascript">
$(document).ready(function() {
// <input type="button" id="btn1" value=":input选取所有input元素">
/*
这里的input包括所有的input标签；
不管type是button、checkbox、
file、hidden、image、password、
radio、reset、submit、text。
以及几个特殊的：
<select><option></option></select>、
<textarea></textarea>、
<button></button>
*/
$("#btn1").click(function() {
console.log($(":input"));
$(":input").addClass("cBlack");
});
// <input type="button" id="btn2" value=":text选取单行文本框">
/*
所谓单行文本框，目前已知的是<input type="text">；
type为text的input文本框。
*/
$("#btn2").click(function() {
console.log($(":text"));
$(":text").addClass("cBlack");
});
// <input type="button" id="btn3" value=":password选取密码框">
/*
所谓单行文本框，目前已知的是<input type="password">；
type为password的input文本框。
*/
$("#btn3").click(function() {
console.log($(":password"));
$(":password").addClass("cBlack");
});
// <input type="button" id="btn4" value=":radio选取单选radio元素">
/*
type为radio的input文本框。
*/
$("#btn4").click(function() {
console.log($(":radio"));
$(":radio").addClass("cBlack");
});
// <input type="button" id="btn5" value=":checkbox选取复选checkbox元素">
/*
type为checkbox的input文本框。
*/
$("#btn5").click(function() {
console.log($(":checkbox"));
$(":checkbox").addClass("cBlack");
});
// <input type="button" id="btn6" value=":submit选取提交按钮submit元素">
/*
type为submit的input文本框。
*/
$("#btn6").click(function() {
console.log($(":submit"));
$(":submit").addClass("cBlack");
});
// <input type="button" id="btn7" value=":image选取图片image元素">
/*
只能是type为image的input文本框。
*/
$("#btn7").click(function() {
console.log($(":image"));
$(":image").addClass("cBlack");
});
// <input type="button" id="btn8" value=":reset选取重置按钮reset元素">
/*
只能是type为reset的input文本框。
*/
$("#btn8").click(function() {
console.log($(":reset"));
$(":reset").addClass("cBlack");
});
// <input type="button" id="btn9" value=":button选取按钮元素">
/*
可以是type为button的input文本框，也可以是<button></button>
*/
$("#btn9").click(function() {
console.log($(":button"));
$(":button").addClass("cBlack");
});
// <input type="button" id="btn10" value=":file选取文件元素">
/*
type为file的input文本框。
*/
$("#btn10").click(function() {
console.log($(":file"));
$(":file").addClass("cBlack");
});
// <input type="button" id="btn11" value=":hidden选取隐藏input元素，将隐藏div显示">
/*
这里的这个hidden其实和可见性选择器相同；
所以这里的hidden不仅可以显示隐藏的input标签，所有隐藏的标签，都能被选择出来！
*/
$("#btn11").click(function() {
/*
// 注意这个隐藏的值：
// 这个hidden会选择出所有没有在页面上显示出来的div元素。
console.log($(":hidden"));
$(":hidden").addClass("cBlack");
*/
//将隐藏div显示出来
$("div:hidden").show();//将隐藏显示出来
console.log($(":input:hidden").val());//selector连着使用表示是并且的过滤条件
});
});
</script>
</head>
<body>
<input type="text" name="text1" value="单行文本输入框">
<input type="password" value="密码输入框">
<textarea rows="3" cols="10">多行文本输入区域textarea</textarea>
<select>
<option>软件工程</option>
<option>编译原理</option>
<option>数据库原理</option>
</select>
<select multiple="multiple">
<option>软件工程</option>
<option>编译原理</option>
<option>数据库原理</option>
</select>
<br><br>
<input type="radio" name="country" value="chn">中国
<input type="radio" name="country" value="usa">美国
<input type="checkbox" name="language" value="Java">Java
<input type="checkbox" name="language" value="IOS">IOS
<input type="checkbox" name="language" value="Android">Android
<br><br>
<input type="submit" value="提交按钮">
<input type="image" src="logo.png">
<img alt="图片" src="logo.png">
<input type="reset" value="重置按钮">
<input type="file" name="file">
<button>button按钮</button>
<input type="hidden" name="hideInput" value="you found it">
<div style="display:none">隐藏div</div>
<br><br>
<hr>
<input type="button" id="btn1" value=":input选取所有input元素">
<input type="button" id="btn2" value=":text选取单行文本框">
<input type="button" id="btn3" value=":password选取密码框">
<input type="button" id="btn4" value=":radio选取单选radio元素">
<input type="button" id="btn5" value=":checkbox选取复选checkbox元素">
<input type="button" id="btn6" value=":submit选取提交按钮submit元素">
<input type="button" id="btn7" value=":image选取图片image元素">
<input type="button" id="btn8" value=":reset选取重置按钮reset元素">
<input type="button" id="btn9" value=":button选取按钮元素">
<input type="button" id="btn10" value=":file选取文件元素">
<input type="button" id="btn11" value=":hidden选取隐藏input元素，将隐藏div显示">
</body>
</html>
jQuery中的表单过滤选择器（四、七）：:input、:text、:password、:radio、:checkbox、:file等的更多相关文章
- Jquery | 基础 | 使用 jQuery 表单过滤选择器
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jQuery选择器之表单元素选择器
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content ...
- jQuery学习笔记（五）jQuery中的表单
目录 单行文本框的应用 表单验证 上次我们说完jQuery中的动画之后,我们再来看一种jQuery在Web网页应用最为广泛的一种形式,这就是jQuery对表单的操作,通过jQuery对表单的操作,可以 ...
- jQuery中防止表单提交两次的方法
遇到过表单提交两次的情况,做个记录: 解决场景:首先是表单验证,其次是防止多次提交表单: jQuery中插件:validate_submitHandler_plugin,具体的可以使用关键字搜索: 使 ...
- JQuery中的表单验证及相关的内容
前 言 JRedu Android应用开发中,经常要用到表单.既然用到了表单,那就不可避免的要用到表单的验证.但是,在提交表单时,但是,并不是,每次提交的表单内容都是正确的,如果 每次都将表单的 ...
- JQuery中根据表单元素动态拼接json 字符串
// <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.o ...
- jQuery星级评论表单美化代码
最近正在做php第二阶段的项目,由于我们小组做的是游戏评论网站,所以需要用到评分评论的页面,这里我做了个星级评论表单 1.首先,我们需要引入一个jQuery文件,代码如下: /*! * jQuery ...
- jQuery中的表单对象属性过滤选择器（四、八）：:enabled、:disabled、:checked、:selected
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <hea ...
- 雷林鹏分享：jQuery EasyUI 表单 - 过滤下拉数据网格
jQuery EasyUI 表单 - 过滤下拉数据网格 下拉数据网格(Combogrid)组件和下拉框(Combobox)组件的共同点是,除了都具有下拉面板以外,它们都是基于数据网格(Datagrid ...
随机推荐
- CF1025B题解
其他的几篇题解大多都是先求了 \(c_i \gets lcm(a_i,b_i)\) ,然后求全部 \(c_i\) 的最大公约数,但是对每一组数都求一下 \(lcm(a_i,b_i)\) 会增加时间复杂 ...
- Java集合中的可变参数
可变参数: 1.在JDK1.5之后,如果我们定义一个方法需要接收多个参数,并且多个参数类型一致,我们可以对其简化成如下格式: 修饰符 返回值类型 方法名(参数类型... 形参名){} 其实这个书写完全 ...
- vue 快速入门 系列 —— vue loader 扩展
其他章节请看: vue 快速入门 系列 vue loader 扩展 在vue loader一文中,我们学会了从零搭建一个简单的,用于单文件组件开发的脚手架.本篇将在此基础上继续引入一些常用的库:vue ...
- python3.7 jack棋牌11点实例
# -*- codeing: utf-8 -*- # Project: 棋牌游戏11点 # Author: jack # Version: 2.2 # Start Time: 2021-07-24 i ...
- PAT甲级：1036 Boys vs Girls (25分)
PAT甲级:1036 Boys vs Girls (25分) 题干 This time you are asked to tell the difference between the lowest ...
- Kafka之--python-kafka测试kafka集群的生产者与消费者
前面两篇博客已经完成了Kafka的搭建,今天再来点稍高难度的帖子. 测试一下kafka的消息消费行为.虽然,kafka有测试的shell脚本可以直接测试,但既然我最近在玩python,那还是用pyth ...
- POJ1456 Supermarket 题解
思维题. 关键在于如何想到用堆来维护贪心的策略. 首先肯定是卖出的利润越大的越好,但有可能当前这天选定了利润最大的很久才过期而利润第二大的第二天就过期,这时的策略就不优了. 所以我们必须动态改变策略, ...
- python内置函数--- hasattr、setattr、getattr
1.描述 hasattr() 函数用于判断对象是否包含对应的属性. 语法 hasattr 语法: hasattr(object, name) 2.描述 setattr() 函数对应函数 getattr ...
- Skywalking-04：扩展Metric监控信息
扩展 Metric 监控信息 官方文档 Source and Scope extension for new metrics 案例:JVM Thread 增加 Metrics 修改 Thread 的定 ...
- JS系统函数
1. parseInt--转为整型 2. parseFloat--转为浮点型 3. Number--转为数字型 4. isFinite()--检测一个值是否为有限值,如果是返回true,否则就是Inf ...