jquery子元素过滤选择器

最新推荐文章于 2022-01-08 09:51:56 发布

李卫康的博客

最新推荐文章于 2022-01-08 09:51:56 发布

阅读量1k

点赞数

分类专栏： JAVA 进阶之路文章标签： jquery

本文链接：https://blog.csdn.net/u014010769/article/details/46834161

版权

JAVA 进阶之路专栏收录该内容

90 篇文章 0 订阅

订阅专栏

此选择器主要对所选择的表单元素进行过滤

1、:enabled
用法: $(”input:enabled”) 返回值集合元素

说明:匹配所有可用元素.意思是查找所有input中不带有disabled=”disabled”的input.不为disabled,当然就为enabled啦.

2、:disabled
用法: $(”input:disabled”) 返回值集合元素

说明:匹配所有不可用元素.与上面的那个是相对应的.

3、:checked
用法: $(”input:checked”) 返回值集合元素

说明:匹配所有选中的被选中元素(复选框、单选框等，不包括select中的option).这话说起来有些绕口.

4、:selected
用法: $(”select option:selected”) 返回值集合元素

说明:匹配所有选中的option元素.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>ddd</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<script language="JavaScript" src="../js/jquery-1.4.2.js"></script>
	<style type="text/css">
		 	div,span{
			    width: 140px;
			    height: 140px;
			    margin: 20px;
			    background: #9999CC;
			    border: #000 1px solid;
				float:left;
			    font-size: 17px;
			    font-family:Roman;
			}
			
			div.mini{
			    width: 30px;
			    height: 30px;
			    background: #CC66FF;
			    border: #000 1px solid;
			    font-size: 12px;
			    font-family:Roman;
			}
	 </style>
	 <!--引入jquery的js库-->
    
	</head>
	 
	<body>
				
		 <input type="button" value="保存"  class="mini" name="ok"  class="mini" />
		 <input type="button" value=" 利用 jQuery 对象的 val() 方法改变表单内可用 <input> 元素的值"  id="b1"/>
		 <input type="button" value=" 利用 jQuery 对象的 val() 方法改变表单内不可用 <input> 元素的值"  id="b2"/>
		 <input type="button" value=" 利用 jQuery 对象的 length 属性获取多选框选中的个数"  id="b3"/>
		 <input type="button" value=" 利用 jQuery 对象的 text() 方法获取下拉框选中的内容"  id="b4"/>
 
 
         <input type="text" value="不可用值1" disabled="disabled"> 
		 <input type="text" value="可用值1" >
		 <input type="text" value="不可用值2" disabled="disabled">
		 <input type="text" value="可用值2" >
		 
		 <br>
		 <input type="checkbox" name="items" value="美容" >美容
		 <input type="checkbox" name="items" value="IT" >IT
		 <input type="checkbox" name="items" value="金融" >金融
		 <input type="checkbox" name="items" value="管理" >管理
		 
		 <br>
		  <input type="radio" name="sex" value="男" >男
		  <input type="radio" name="sex" value="女" >女
         <br>
		 
		  <select name="job" id="job" multiple="multiple" size=4>
          	<option>程序员</option>
			<option>中级程序员</option>
			<option>高级程序员</option>
			<option>系统分析师</option>
          </select>
		    
          <select name="edu" id="edu">
          	<option>本科</option>
			<option>博士</option>
			<option>硕士</option>
			<option>大专</option>
          </select>
	   
	  		
		 <div id="two" class="mini" >
	    	   id为two   class是 mini  div
		       <div  class="mini" >class是 mini</div>
		</div>
		
		 <div class="one" >
		 	    class是 one 
		       <div  class="mini" >class是 mini</div>
			   <div  class="mini" >class是 mini</div>
		 </div>
		 <div class="one" >
		 	  class是 one 
		       <div  class="mini01" >class是 mini01</div>
			   <div  class="mini" >class是 mini</div>
		</div>
		
	</body>
<script language="JavaScript">
//<input type="button" value=" 利用 jQuery 对象的 val() 方法改变表单内可用 <input> 元素的值"  id="b1"/>
	$("#b1").click(function(){
		$("input[type='text']:enabled").val("李卫康")
	});
//<input type="button" value=" 利用 jQuery 对象的 val() 方法改变表单内不可用 <input> 元素的值"  id="b2"/>
	$("#b2").click(function(){
		$("input[type='text']:disabled").val("李卫康")
	});
//<input type="button" value=" 利用 jQuery 对象的 length 属性获取多选框选中的个数"  id="b3"/>
	$("#b3").click(function(){
		var $length=$("input[type='checkbox']:checked").length;
		alert($length);
	});
//<input type="button" value=" 利用 jQuery 对象的 text() 方法获取下拉框选中的内容"  id="b4"/>
	$("#b4").click(function(){
		$("select option:selected").each(function(i,obj){
			var text=$(obj).text();
			alert(text);
		});
	});
</script>
   
</html>

1 、 :input
用法 :$(”:input”) ; 返回值集合元素

说明:匹配所有 input, textarea, select 和 button 元素

2 、 :text
用法 :$(”:text”) ; 返回值集合元素

说明: 匹配所有的单行文本框.

3 、 :password
用法 :$(”:password”) ; 返回值集合元素

说明: 匹配所有密码框.

4 、 :radio
用法 :$(”:radio”) ; 返回值集合元素

说明: 匹配所有单选按钮.

5 、 :checkbox
用法 :$(”:checkbox”) ; 返回值集合元素

说明: 匹配所有复选框

6 、 :submit
用法 :$(”:submit”) ; 返回值集合元素

7 、 :image
用法 :$(”:image”) 返回值集合元素

说明: 匹配所有图像域.

8 、 :reset
用法 :$(”:reset”) ; 返回值集合元素

说明: 匹配所有重置按钮.

9 、 :button
用法 :$(”:button”) ; 返回值集合元素

说明: 匹配所有按钮.这个包括直接写的元素button.

l 10 、 :file
用法 :$(”:file”) ; 返回值集合元素

说明: 匹配所有文件域.

11 、 :hidden
用法 :$(”input:hidden”) ; 返回值集合元素

说明: 匹配所有不可见元素，或者type为hidden的元素.这个选择器就不仅限于表单了,除了匹配input中的hidden外,那些style为hidden的也会被匹配.

注意: 要选取input中为hidden值的方法就是上面例子的用法,但是直接使用 “:hidden” 的话就是匹配页面中所有的不可见元素,包括宽度或高度为0的,

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>ddd</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<script language="JavaScript" src="../js/jquery-1.4.2.js"></script>
	<style type="text/css">
		 	div,span{
			    width: 140px;
			    height: 140px;
			    margin: 20px;
			    background: #9999CC;
			    border: #000 1px solid;
				float:left;
			    font-size: 17px;
			    font-family:Roman;
			}
			
			div.mini{
			    width: 30px;
			    height: 30px;
			    background: #CC66FF;
			    border: #000 1px solid;
			    font-size: 12px;
			    font-family:Roman;
			}
	 </style>
	 <!--引入jquery的js库-->
    
	</head>
	 
	<body>
				
		 <input type="button" value="保存"  class="mini" name="ok"  class="mini" id="ok"/>
		 <input type="button" value=" 利用 jQuery 对象的 val()方法改变表单内可用<input>元素的值"  id="b1"/>
		 <input type="button" value=" 利用 jQuery 对象的 val()方法改变表单内不可用<input>元素的值"  id="b2"/>
		 <input type="button" value=" 利用 jQuery 对象的 length 属性获取多选框选中的个数"  id="b3"/>
		 <input type="button" value=" 利用 jQuery 对象的 text() 方法获取下拉框选中的内容"  id="b4"/>
 
 		<br>
         <input type="text" value="不可用值1" disabled="disabled"> 
		 <input type="text" value="可用值1" >
		 <input type="text" value="不可用值2" disabled="disabled">
		 <input type="text" value="可用值2" >
		 
		 <br>
		 <input type="checkbox" name="items" value="美容">美容
		 <input type="checkbox" name="items" value="IT" >IT
		 <input type="checkbox" name="items" value="金融" >金融
		 <input type="checkbox" name="items" value="管理" >管理
		 
		 <br>
		  <input type="radio" name="sex" value="男" checked="checked" >男
		  <input type="radio" name="sex" value="女" >女
         <br>
		 
		  <select name="job" id="job" multiple="multiple" size=4>
          	<option value="程序员" selected="selected" >程序员</option>
			<option value="中级程序员" >中级程序员</option>
			<option value="高级程序员">高级程序员</option>
			<option value="系统分析师">系统分析师</option>
          </select>
		    
		 
		 

          <select name="edu" id="edu">
          	<option value="本科">本科</option>
			<option value="博士">博士</option>
			<option value="硕士">硕士</option>
			<option value="大专">大专</option>
          </select>
	   
	  	 <textarea cols=4 rows=4>textarea</textarea>
			
		 <button value="确定">确定</button>	
		 
			
		 <div id="two" class="mini" >
	    	   id为two   class是 mini  div
		       <div  class="mini" >class是 mini</div>
		</div>
		
		 <div class="one" >
		 	    class是 one 
		       <div  class="mini" >class是 mini</div>
			   <div  class="mini" >class是 mini</div>
		 </div>
		 <div class="one" >
		 	  class是 one 
		       <div  class="mini01" >class是 mini01</div>
			   <div  class="mini" >class是 mini</div>
		</div>
		
	</body>
<script language="JavaScript">
	//	<input type="button" value="保存"  class="mini" name="ok"  class="mini" id="ok" />
	// 点击OK时他，出所有输入框信息
//	$("#ok").click(function(){
//		$(":input").each(function(index, domEle){
//			alert(domEle.value);
//		});
//	});
//<input type="button" value=" 利用 jQuery 对象的 val()方法改变表单内可用<input>元素的值"  id="b1"/>
	$("#ok").click(function(){
		$(":input").each(function(i,obj){
			alert($(obj).val())
			
		});
		
	});
//<input type="button" value=" 利用 jQuery 对象的 val()方法改变表单内不可用<input>元素的值"  id="b2"/>
//<input type="button" value=" 利用 jQuery 对象的 length 属性获取多选框选中的个数"  id="b3"/>
//<input type="button" value=" 利用 jQuery 对象的 text() 方法获取下拉框选中的内容"  id="b4"/>
	
</script>
   
</html>