关闭

黑马day16 子jquery&子元素过滤选择器

标签: jquery
646人阅读 评论(1) 收藏 举报
分类:

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

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.

l10: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>





0
1

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:189755次
    • 积分:4285
    • 等级:
    • 排名:第7980名
    • 原创:242篇
    • 转载:4篇
    • 译文:0篇
    • 评论:37条
    友情链接