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 ...
随机推荐
- 记录一些css奇淫技巧
文本两端对齐 文字在固定宽度内两端对齐 text-align: justify; text-align-last: justify; 滤镜filter 元素(经常用作图片)置灰效果,类似disable ...
- python 连接mysql数据库操作
import pymysql.cursors # 连接数据库 connect = pymysql.Connect( host='localhost', port=3306, user='root', ...
- C语言学习（三）
一.数组.循环.判断条件 #include<stdio.h> int main(){ int a =100; int b =200; int i; int arr [5]; if (a ...
- n皇后问题（回溯法）——Python实现
八皇后问题 问题: 国际象棋棋盘是8 * 8的方格,每个方格里放一个棋子.皇后这种棋子可以攻击同一行或者同一列或者斜线(左上左下右上右下四个方向)上的棋子.在一个棋盘上如果要放八个皇后,使得她们互 ...
- 构建前端第9篇之(下)---vue3.0将template转化为render的过程
vue3.0将template转化为render的过程 这里是简单标记下,如何将.vue转换成js文件 具体的,先不研究了,太深,能力有限,达不到呢
- 监控实战之Prometheus
author:JevonWei 版权声明:原创作品 目录 一 背景 二 部署Prometheus Server Prometheus 主配置文件 targets 节点配置文件 rules 告警规则 运 ...
- 面试问题记录 三 (JavaWeb、JavaEE)
前言 这块还是比较关键的,考察你对整个业务流程的熟练度吧,虽然企业级的项目没有接触过,但像最基本的内容必须得融会贯通,这一点我感觉自己还是处于浅层,没有深入的去思考以及练习过,其实就像那句话,&quo ...
- 小程序中多个echarts折线图在同一个页面的使用
最近做小程序的业务中遇到一个页面要同时显示几个echarts图,刚开始遇到各种冲突,死数据可以,动态数据就报错的问题,折磨了一天,仔细看了官网和查在各种资料之后,终于解决了. 直接上代码: commi ...
- GooseFS助力大数据业务数倍提升计算能力
前言 GooseFS是由腾讯云推出的一款分布式缓存方案,主要针对包括需要缓存加速的数据湖业务场景,提供基于对象存储COS服务的近计算端数据加速层. GooseFS 基于开源大数据缓存方案 Alluxi ...
- appium自动化测试（3）-控件定位&中文输入
参考-控件定位 http://www.2cto.com/kf/201410/340345.html appium接口 http://appium.io/slate/en/master/?python# ...