趣图妹妹趣图妹妹04-16 09:22

jQuery中的表单对象属性过滤选择器(四、八)::enabled、:disabled、:checked、:selected

<!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">
    	/* 
    		所谓表单对象属性过滤选择器:
    		就是过滤表单对象的属性,例如:
    		
    		:enabled:选取所有可用元素。
    		<input name="id">一类的普通input标签;
    		就是可用的。
    		
    		:disabled:选取所有不可用的元素。
    		 <input name="email" disabled="disabled" />
    		被强制声明为不可用的input标签。
    		
    		:checked:选取所有被选中的元素框。
    		input:checked:
    		input所有type为type="checkbox";
    		并且已经被选中:checked="checked"
    		
    		:selected:选取所有被选中的选项列表。
    		<select>
    		  <option value="1">Flowers</option>
    		  <option value="2" selected="selected">Gardens</option>
    		  <option value="3">Trees</option>
    		</select>
    		|
    		<option value="2" selected="selected">Gardens</option>
    		   
    	*/
    	$(document).ready(function() {
    		// <input type="button" id="btn1" value=":enabled选取所有可用的单行文本input元素">
	    	/* 
	    	注意这里是过滤两次,才行!
	    	先从所有中过滤出text纯文本的单行框:text;
	    	再从其中过滤出所有的可用的enabled的元素。
	    	*/
    		$("#btn1").click(function() {
    			// 首先通过表单过滤选择,选择出type为text的input标签
				console.log($(":text:enabled"));
				$(":text:enabled").addClass("cBlack");
			});
	        
	    	// <input type="button" id="btn2" value=":disabled选取所有不可用的单行文本input元素">
	        /* 
	    	注意这里是过滤两次,才行!
	    	先从所有中过滤出text纯文本的单行框:text;
	    	再从其中过滤出所有的可用的disabled的元素。
	    	disabled其实很像readonly的元素。
	    	*/
	    	$("#btn2").click(function() {
	    		// 首先通过表单过滤选择,选择出type为text的input标签
				console.log($(":text:disabled"));
				$(":text:disabled").addClass("cBlack");
			});
	        
	        // <input type="button" id="btn3" value=":checked请先选择,然后选取所有被选中的单选、多选元素">
	        $("#btn3").click(function() {
				// 选中全篇所有checked。
	        	// console.log($(":checked"));
				// $(":checked").addClass("cBlack");
				
				// 通过基本选择出input然后通过表单对象属性过滤,只选中为input的checked。
				$("input:checked").each(function(index, obj) {
					// obj为DOM对象
					console.log("index = "+index+", 值为:"+$(obj).val());
				});
			});
	        
	        // <input type="button" id="btn4" value="设置 中国 被选中">
	        /* 
		         怎么设置一个值被选中呢?
		         如果是radio(单选框),则
		         只需要把radio的值设置为,
		         我们需要选中的属性就行了!
	        */
	        $("#btn4").click(function() {
	        	/* 
	        	注意:这里的值要设置为[]数组的形式;
	        	但是因为是radio单选框的原因,只能放
	        	一个值。
	        	
	        	$(":radio[name='country']").val(["chn", "usa"]);
	        	如果设置多个的话,单选框会选中数组中的
	        	最后一个值。
	        	<
	        	因为这里只有一个radio,所以可以使用:radio
	        	全篇查询。但是如果当前页面有多个单选框的话,
	        	可能就要用div来分块,通过#div1:radio来获得了!
	        	>
	        	*/
	        	// 首先通过表单对象属性过滤选择出radio
				$(":radio[name='country']").val(["chn"]);				
			});
	        
	        // <input type="button" id="btn5" value="设置第一个select选中  编译原理">
	       	/* 
	       	总结一下html中的三种选中框:
	       	标准单选框:input type="radio" name="" value="" 同一组name相同
	       	标准复选框:input type="checkbox" name="" value="" 同一组name相同
	       	
	       	
	       	select框:
	       	单选形式
	       	<select>
	       		<option></option>
	       		<option></option>
	       			... ...
	       	</select>
      		复选形式
   	       	<select multiple="multiple">
   	       		<option></option>
   	       		<option></option>
   	       			... ...
   	       	</select>	       
	       	select框没有特殊声明:multiple="multiple"的时候,
	       	都是单选框,特殊声明了之后才是复选框。
	       	选择都是[],但是select因为可以声明多选,单选。有区别
	       	所以其中单选的时候,[]可以省略,但是建议保留[]方便记忆。
	       	
	       	标准单选框,复选框都是选中都是:checked。
	       	select框选中是:selected。
	       	*/
	        $("#btn5").click(function() {
				// 首先先获取第一个select,因为整篇有多个select。
				// $("select:first").val("编译原理");
				// 首先通过基本选择出select
	        	$("select:first").val(["编译原理"]);
			});
	        
	        // <input type="button" id="btn6" value="设置第二个select选中  软件工程和数据库原理">
	        $("#btn6").click(function() {
				// 整篇只有两个select,选择最后一个select
				// 首先通过基本选择出select				
				$("select:last").val(["软件工程", "数据库原理"]);
			});
	        
	        // <input type="button" id="btn7" value="选取所有没有被选中的单选、多选元素">
	        $("#btn7").click(function() {
				// 获取没有被选中的单选、多选选项
				// 首先通过表单对象属性过滤选择出radio,通过表单对象属性过滤选择出checkbox
				$(":radio:not(:checked), :checkbox:not(:checked)").each(function(i, obj) {
					console.log($(this).val());
				});
			});
	        
	        // <input type="button" id="btn8" value=":selected选取所有被选中的select下拉列表的option选项元素">
	        $("#btn8").click(function() {
	        	// 因为是select下嵌套option,所以要后代选择或者使用子元素选择!
	        	// 首先通过基本选择出select,再通过层级选择出option,再通过基本过滤选择not(),再通过表单对象属性过滤选择出:checked
	        	$("select option:not(:selected)").each(function(i, obj) {
					console.log($(obj).val());
				});
			});
    	});
    	
        
    </script>
  </head>
  
  <body>
    <input type="text" name="text1" value="可用单行文本输入框">
    <input type="text" name="text2" value="不可用单行文本输入框" disabled="disabled">
    <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>
    <hr>
    <input type="button" id="btn1" value=":enabled选取所有可用的单行文本input元素">
    <input type="button" id="btn2" value=":disabled选取所有不可用的单行文本input元素">
    <input type="button" id="btn3" value=":checked请先选择,然后选取所有被选中的单选、多选元素">
    <input type="button" id="btn4" value="设置 中国 被选中">
    <input type="button" id="btn5" value="设置第一个select选中  编译原理">
    <input type="button" id="btn6" value="设置第二个select选中  软件工程和数据库原理">
    <input type="button" id="btn7" value="选取所有没有被选中的单选、多选元素">
    <input type="button" id="btn8" value=":selected选取所有被选中的select下拉列表的option选项元素">
  </body>
</html>

官场书屋二维码

000
评论