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 ...
随机推荐
- CRUD搬砖两三年了，怎么阅读Spring源码？
作者:小傅哥 博客:https://bugstack.cn 沉淀.分享.成长,让自己和他人都能有所收获! 连读同事写的代码都费劲,还读Spring? 咋的,Spring 很难读! 这个与我们码农朝夕 ...
- 以初学者的角度理解：SQL实现关系除法
以初学者的角度理解:SQL实现关系除法 相信各位在学习SQL的时候,由于没有一家SQL语言提供除法命令而只能自己写一个.而网上大多就是四步骤加一个模板: select distinct A.X fro ...
- Leetcode：1305. 两棵二叉搜索树中的所有元素
Leetcode:1305. 两棵二叉搜索树中的所有元素 Leetcode:1305. 两棵二叉搜索树中的所有元素 思路 BST树中序历遍有序. 利用双指针法可以在\(O(n)\)的复杂度内完成排序. ...
- Linux开机以root账户自动登录
最近我们的自动化测试平台需要支持中标麒麟系统,对于我们来说要让这个系统支持分布式自动化测试,最重要的一点就是虚拟机启动后自动以root账户登录系统,并且执行我们的环境配置脚本,那么如何能让它开启自动登 ...
- spring Data Rest 远程命令执行漏洞（CVE-2017-8046）
参考 文章https://blog.csdn.net/weixin_41438728/article/details/110425174 影响版本 Spring Framework 5.0 to 5. ...
- Adobe ColdFusion 文件读取漏洞（CVE-2010-2861）
影响范围 Adobe ColdFusion 8.9版本中存在一处目录穿越漏洞 poc http://192.168.49.2:8500/CFIDE/administrator/enter.cfm?lo ...
- friend靶机
仅供个人娱乐 靶机信息 https://www.vulnhub.com/entry/me-and-my-girlfriend-1,409/ 一.主机探测 二.信息收集 访问一下web站点,提示只能从本 ...
- 大数据学习（14）—— HBase进阶
HBase读写流程 在网上找了一张图,这个画的比较简单,就拿这个图来说吧. 写流程 1.当Client发起一个Put请求时,首先访问Zookeeper获取hbase:meta表. 2.从hbase:m ...
- 知乎1578赞：Android 中为什么需要 Handler?
要理解 Handler,就得先理解 Android 的 Message 机制. 这里以用户滑动微信朋友圈为例,讲解一下 Android 的 Message 机制是怎么运行的,Message 机制中的各 ...
- unserialize反序列化 安鸾 Writeup
关于php反序列化漏洞原理什么,可以看看前辈的文章: https://xz.aliyun.com/t/3674 https://chybeta.github.io/2017/06/17/浅谈php反序 ...