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 ...
随机推荐
- Spring Boot的MyBatis注解：@MapperScan和@Mapper（十七）
1.Spring Boot与MyBatis融合的矛盾问题: Spring家族的使命就是为了简化而生,但是随着Spring的发展壮大,有点事与愿违了.为了坚持初心,Spring家族祭出了一大杀器---S ...
- 第1天 Mark Down 学习及DOS命令
Markdown学习 标题 "#加空格"几个#就表示几级标题 字体 helloworld!一两个两个*号 helloworld!一边一个*号 helloworld! 一边三个号 h ...
- 解决pip下载速度慢的问题
解决链接:https://blog.csdn.net/u013901768/article/details/82343512 感谢这位博主的分享. 博客内容如下: 1. 安装时强制使用国内源进行安装, ...
- 2021最新Java基础知总结，助力大厂offer
本文是我花了三周时间整理出来的,希望对Java初学者有帮助~ Java概述 Java的特点 Java是一门面向对象的编程语言.面向对象和面向过程是一种软件开发思想. 面向过程就是分析出解决问题所需要的 ...
- ts 学习笔记-基础篇
目录 基础 原始数据类型 布尔值 数字 字符串 空值 Null 和 Undefined 任意值 类型推论 联合类型 接口 数组 函数 类型断言 申明文件 什么是申明文件 三斜线指令 第三方声明文件 内 ...
- 🔥 LeetCode 热题 HOT 100（81-90）
337. 打家劫舍 III 思路:后序遍历 + 动态规划 推荐题解:树形 dp 入门问题(理解「无后效性」和「后序遍历」) /** * Definition for a binary tree nod ...
- QML用Instantiator动态创建顶级窗口
关键点 使用Model驱动Instantiator QML里面的hashmap: QQmlPropertyMap 上一次说到用 QQmlApplicationEngine 多次load的方式创建多个一 ...
- SpringCloud升级之路2020.0.x版-6.微服务特性相关的依赖说明
本系列代码地址:https://github.com/HashZhang/spring-cloud-scaffold/tree/master/spring-cloud-iiford spring-cl ...
- 在Mac上安装Istio并使用，有丰富的监控Kiali、Grafana、Jaeger
我最新最全的文章都在南瓜慢说 www.pkslow.com,文章更新也只在官网,欢迎大家来喝茶~~ 1 简介 之前在文章<服务网格Istio入门-详细记录Kubernetes安装Istio并使用 ...
- 如何区别php，jsp，asp，aspx随笔
PHP是一种跨平台的服务器端的嵌入式脚本语言.它大量地借用C.Java 和 Perl 语言的语法,并耦合PHP自己的特性,使WEB开发者能够快速地写出动态产生页面.它支持目前绝大多数数据库.还有一点, ...