<!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">美国

    &nbsp;&nbsp;

    <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等的更多相关文章

  1. Jquery | 基础 | 使用 jQuery 表单过滤选择器

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. jQuery选择器之表单元素选择器

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content ...

  3. jQuery学习笔记（五）jQuery中的表单

    目录 单行文本框的应用 表单验证 上次我们说完jQuery中的动画之后,我们再来看一种jQuery在Web网页应用最为广泛的一种形式,这就是jQuery对表单的操作,通过jQuery对表单的操作,可以 ...

  4. jQuery中防止表单提交两次的方法

    遇到过表单提交两次的情况,做个记录: 解决场景:首先是表单验证,其次是防止多次提交表单: jQuery中插件:validate_submitHandler_plugin,具体的可以使用关键字搜索: 使 ...

  5. JQuery中的表单验证及相关的内容

      前  言 JRedu Android应用开发中,经常要用到表单.既然用到了表单,那就不可避免的要用到表单的验证.但是,在提交表单时,但是,并不是,每次提交的表单内容都是正确的,如果 每次都将表单的 ...

  6. JQuery中根据表单元素动态拼接json 字符串

    // <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.o ...

  7. jQuery星级评论表单美化代码

    最近正在做php第二阶段的项目,由于我们小组做的是游戏评论网站,所以需要用到评分评论的页面,这里我做了个星级评论表单 1.首先,我们需要引入一个jQuery文件,代码如下: /*! * jQuery ...

  8. jQuery中的表单对象属性过滤选择器（四、八）：:enabled、:disabled、:checked、:selected

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <hea ...

  9. 雷林鹏分享：jQuery EasyUI 表单 - 过滤下拉数据网格

    jQuery EasyUI 表单 - 过滤下拉数据网格 下拉数据网格(Combogrid)组件和下拉框(Combobox)组件的共同点是,除了都具有下拉面板以外,它们都是基于数据网格(Datagrid ...

随机推荐

  1. HelloWord！

    HelloWorld 1.新建一个文件夹,存放代码 2.新建一个java文件后缀为.java Hello.java (注意后缀 如系统没打开显示后缀需要打开) 3.编写HelloWorld代码 (建议 ...

  2. python基础之文件的读取

    #文件名 txt文件的读取#文件的读取 open("文件","读写方法") with open("文件","读写方法") ...

  3. python + mysql 实现查询表数据

    实例如下: import pymysqldef select_form(): # 打开数据库连接 db = pymysql.connect("localhost", "r ...

  4. 手机端web网页布局经验总结（持续更新中）

    1. 首先,在网页代码的头部,加入一行viewport元标签,我们一般是不让用户手动的去改变页面的大小的. <meta name="viewport" content=&qu ...

  5. 【贪心】数列分段Section I luogu-1181

    题目描述 对于给定的一个长度为\(N\)的正整数数列\(A_i\),现要将其分成连续的若干段,并且每段和不超过\(M\)(可以等于\(M\)),问最少能将其分成多少段使得满足要求. 分析 简单思考一下 ...

  6. 利用C++11可变模板，封装调用dll导出函数

    起因 开发中经常需要动态调用一些导出函数,试着利用C++11特性封装一下 尝试 常规使用 typedef int WINAPI (*TMessageBoxA)(HWND hWnd,LPCSTR lpT ...

  7. HCNA Routing&Switching之二层交换技术VLAN基础

    前文我们主要聊了下交换机的工作原理和以太网接口的速率和双工相关话题,回顾请参考https://www.cnblogs.com/qiuhom-1874/p/15088183.html:今天我们主要来聊一 ...

  8. SpringBoot数据访问之Druid启动器的使用

    数据访问之Druid启动器的使用 承接上文:SpringBoot数据访问之Druid数据源的自定义使用 官方文档: Druid Spring Boot Starter 首先在在 Spring Boot ...

  9. ICCV2021 | 重新思考视觉transformers的空间维度

    ​ 论文:Rethinking Spatial Dimensions of Vision Transformers 代码:https://github.com/naver-ai/pit 获取:在CV技 ...

  10. CRT（中国剩余定理）学习笔记

    先扔个模板题.链接. 简化题意:他让我求 \(x \equiv a_i \pmod{m_i}\) 的解. 例如,\( \begin{cases} x \equiv 1 \pmod{3} \\ x \e ...