jQuery中的表单过滤选择器（四、七）：:input、:text、:password、:radio、:checkbox、:file等...

最新推荐文章于 2020-10-22 18:38:26 发布

weixin_30561177

最新推荐文章于 2020-10-22 18:38:26 发布

阅读量235

点赞数

文章标签： javascript 移动开发 java ViewUI

原文链接：http://www.cnblogs.com/mzywucai/p/11053379.html

版权

<!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>

转载于:https://www.cnblogs.com/mzywucai/p/11053379.html

weixin_30561177

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
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/h...
复制链接

扫一扫