jQuery表单过滤选择器

最新推荐文章于 2023-05-23 11:06:30 发布

jeo_chow

最新推荐文章于 2023-05-23 11:06:30 发布

阅读量373

点赞数

CC 4.0 BY-SA版权

分类专栏： jQuery 文章标签：表单 jquery

本文链接：https://blog.youkuaiyun.com/jeo_chow/article/details/52206117

jQuery 专栏收录该内容

16 篇文章

订阅专栏

<!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">
    <!-- 记得引入jquery-1.11.3.js文件到js目录下 -->
    <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(){
    		$("#btn1").click(function(){
    			console.log($(":input"));
    			console.log($(":input").length);
    			
    			//$(":input").val("测试");
    		});
    		$("#btn2").click(function(){
    			console.log($(":text").length);
    		});
    		$("#btn3").click(function(){
    			console.log($(":password"));
    		});
    		$("#btn4").click(function(){
    			console.log($(":radio"));
    			
    		});
    		$("#btn5").click(function(){
    			console.log($(":checkbox"));
    		});
    		$("#btn6").click(function(){
    			console.log($(":submit"));
    		});
    		$("#btn7").click(function(){
    			console.log($(":image"));
    		});
    		$("#btn8").click(function(){
    			console.log($(":reset"));
    		});
    		$("#btn9").click(function(){
    			console.log($(":button"));
    		});
    		$("#btn10").click(function(){
    			console.log($(":file"));
    		});
    		$("#btn11").click(function(){
    			//:hidden选取隐藏input元素，将隐藏div的文本显示出来
    			console.log( $("input:hidden").val() );
    			$("div:hidden").show();  // 显示div
    		});
    	});
    </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>