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 ...
随机推荐
- Redis学习——数据结构上
一.常用的全局命令 1.查看所有的键: KEYS * KEYS pattern:查找所有符合给定模式 pattern 的 key . KEYS 的速度非常快,但在一个大的数据库中使用它仍然可能造成性能 ...
- YARN学习总结之架构
一.yarn产生背景 1) 源于MRv1的缺陷:扩展性受限.单点故障.难以支持MR之外的计算框架: 2) 多计算框架各自为战,数据共享困难,资源利用率低: MR: 离线计算框架 Storm:实时计算框 ...
- jumpserver 用户,系统用户和管理用户 普通用户和特权用户 区别
前言 现在很多公司都有在用Jumpserver跳板机 有很多人一直对jumpserver的各种用户还不是很了解 当你了解了这几个概念了之后,就能更好的灵活的运用到分配权限当中去. 下面我们一个一个的说 ...
- 每天五分钟Go - Map
map的定义 var m map[type]type fmt.Println(m) 此种方法定义的m为nil //打印的结果为: map[] map的创建 1.使用make创建 var m1 = ma ...
- P4168-蒲公英-分块
蒲公英 暴力分块思想.分块的思想与莫队相同.它能将时间和空间复杂度均摊XD belong表示所属区块,num维护区间颜色出现次数,maxx维护区间max值.查询时只需要比较两端的区块即可. #incl ...
- 《手把手教你》系列技巧篇（十一）-java+ selenium自动化测试-元素定位大法之By tag name（详细教程）
1.简介 按宏哥计划,本文继续介绍WebDriver关于元素定位大法,这篇介绍By ClassName.看到ID,NAME这些方法的讲解,小伙伴们和童鞋们应该知道,要做好Web自动化测试,最好是需要了 ...
- 第二十九篇 -- UDP和TCP
最近在写WIFI模块,所以就想明确一些TCP和UDP的区别,发现以前的理解还是有点误区.现在重新学习. 相同点 UDP协议和TCP协议都是传输层协议 TCP(Transmission Control ...
- jvm源码解读--12 invokspecial指令的解读
先看代码 package com.zyt.jvmbook; public class Girl extends Person{ public Girl() { int a; } @Override p ...
- Hashtable 的实现原理
概述 和 HashMap 一样,Hashtable 也是一个散列表,它存储的内容是键值对. Hashtable 在 Java 中的定义为: public class Hashtable<K,V& ...
- 2019-07-06 sql 连续出现次数
由手机通讯记录界面想到的问题 SELECT CASE WHEN AA.num=1 THEN AA.Tel ELSE AA.Tel+'('+CASt(AA.num AS VARCHAR(4))+')' ...