10_JQuery选择器之表单过滤器

最新推荐文章于 2024-04-05 12:11:45 发布

l0510402015

最新推荐文章于 2024-04-05 12:11:45 发布

阅读量206

点赞数

分类专栏： 12_JQuery

本文链接：https://blog.csdn.net/l0510402015/article/details/105360996

版权

12_JQuery 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

本文介绍了JQuery中的表单过滤选择器，包括：:enabled用于选取可用元素，:disabled获取不可用元素，:checked获取选中的单选/复选框，:selected获取选中的下拉框选项。

摘要由CSDN通过智能技术生成

表单过滤选择器
    1. 可用元素选择器
        * 语法： :enabled 获得可用元素
    2. 不可用元素选择器
        * 语法： :disabled 获得不可用元素
    3. 选中选择器
        * 语法： :checked 获得单选/复选框选中的元素
    4. 选中选择器
        * 语法： :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  src="../js/jquery-3.3.1.min.js"></script>
	<style type="text/css">
		 	div,span{
			    width: 180px;
			    height: 180px;
			    margin: 20px;
			    background: #9999CC;
			    border: #000 1px solid;
				float:left;
			    font-size: 17px;
			    font-family:Roman;
			}
			
			div .mini{
			    width: 50px;
			    height: 50px;
			    background: #CC66FF;
			    border: #000 1px solid;
			    font-size: 12px;
			    font-family:Roman;
			}
			
			div .mini01{
			    width: 50px;
			    height: 50px;
			    background: #CC66FF;
			    border: #000 1px solid;
			    font-size: 12px;
			    font-family:Roman;
			}
			#job{
				margin: 20px;
			}
			#edu{
				margin-top:-70px;
			}
			
	 </style>
    <script type="text/javascript">
		$(function () {
            //利用 jQuery 对象的 val() 方法改变表单内可用 <input> 元素的值
			$("#b1").click(function () {
				$("input[type='text']:disabled").val("aaa")
            });

            //利用 jQuery 对象的 val() 方法改变表单内不可用 <input> 元素的值
            $("#b2").click(function () {
                $("input[type='text']:enabled").val("bbb")
            });

            //利用 jQuery 对象的 length 属性获取复选框选中的个数
            $("#b3").click(function () {
                var length = $("input[type='checkbox']:checked").length;
                alert(length);
            });

            //利用 jQuery 对象的 length 属性获取下拉框选中的个数
            $("#b4").click(function () {
                var length = $("#job>option:selected").length;
                alert(length);
            });
        })

        
	
	
	</script>
	</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 对象的 length 属性获取下拉框选中的个数"  id="b4"/>
 
 		<br><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><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><br>
		 
		  <input type="radio" name="sex" value="男" >男
		  <input type="radio" name="sex" value="女" >女
		  
         <br><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>
	   
	  		
	  	<br/>
	  		
		 <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>
	
	
   
</html>