JQ之小白计划二（选择器）

待我称王封你为后i 2022-05-03 04:28 260阅读 0赞

> 参考《锋利的jQuery》

### 1：基本选择器 ###

### 2：层次选择器 ###

### 3：基本过滤选择器 ###

### 4:内容过滤选择器 ###

### 5：可见性过滤选择器 ###

### 6：属性选择器 ###

### 7：子元素过滤选择器 ###

### 8：表单对象属性过滤选择器 ###

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     <title>表单对象属性过滤选择器</title>
     
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
      <script type="text/javascript">
      $(document).ready(function(){
          //重置表单元素
    	  $(":reset").click(function(){
    		  setTimeout(function() {
    			countChecked();
    		    $("select").change();
    		  },0);
    	  });
    
    	  
    	  //对表单内 可用input 赋值操作.
             $('#btn1').click(function(){
    		 $("#form1 input:enabled").val("这里变化了！");  
    		  return false;
    	  })
    	  //对表单内 不可用input 赋值操作.
    	   $('#btn2').click(function(){
    		  $("#form1 input:disabled").val("这里变化了！");
    		  return false;
    	  })
    	  //使用:checked选择器，来操作多选框.
    	  $(":checkbox").click(countChecked);
    
    	  function countChecked() {
    		  var n = $("input:checked").length;
    		  $("div").eq(0).html("<strong>有"+n+" 个被选中!</strong>");
              }
    
    	  countChecked();//进入页面就调用.
    
    	 //使用:selected选择器，来操作下拉列表.
    	  $("select").change(function () {
    			  var str = "";
    			  $("select :selected").each(function () {
    					str += $(this).text() + ",";
    			  });
    			  $("div").eq(1).html("<strong>你选中的是："+str+"</strong>");
               }).trigger('change');
    		// trigger('change') 在这里的意思是：
    		// select加载后，马上执行onchange.
    		// 也可以用.change()代替.
      });
      </script>
    
    </head>
    <body>
       <h3> 表单对象属性过滤选择器.</h3>
       <form id="form1" action="#">
    		<button type="reset">重置所有表单元素</button>
    		<br /><br />
      		<button id="btn1">对表单内 可用input 赋值操作.</button>
      		<button id="btn2">对表单内 不可用input 赋值操作.</button>
      
      		<br /><br />
      
    		
         	        可用元素：<input name="add" value="可用文本框"/>  <br/>
        		不可用元素：<input name="email" disabled="disabled" value="不可用文本框"/><br/>
         	        可用元素： <input name="che" value="可用文本框" /><br/>
    	 	不可用元素：<input name="name" disabled="disabled"  value="不可用文本框"/><br/>
    	 	<br/>
        	 	多选框：<br/>
    	 	<input type="checkbox" name="newsletter" checked="checked" value="test1" />test1
         	        <input type="checkbox" name="newsletter" value="test2" />test2
         	        <input type="checkbox" name="newsletter" value="test3" />test3
         	        <input type="checkbox" name="newsletter" checked="checked" value="test4" />test4    
         	        <input type="checkbox" name="newsletter" value="test5" />test5
    		<div></div>
    
    	 	<br/><br/>
         	        下拉列表1：<br/>
    		<select name="test" multiple="multiple" style="height:100px">
    			<option>浙江</option>
    			<option selected="selected">湖南</option>
    			<option>北京</option>
    			<option selected="selected">天津</option>
    			<option>广州</option>
    			<option>湖北</option>
        		</select>
        
        	 	<br/><br/>
        		下拉列表2：<br/>
    		<select name="test2" >
    		    <option>浙江</option>
    		    <option>湖南</option>
    		    <option selected="selected">北京</option>
    		    <option>天津</option>
    		    <option>广州</option>
    		    <option>湖北</option>
        		</select>
    		<br/><br/>
    
         	<div></div>
      </form>
    
    
    
    </body>
    </html>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1lVX01fSw_size_27_color_FFFFFF_t_70][]

### 9：表单选择器 ###

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     <title>表单选择器</title>
     
      <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
      <script type="text/javascript">
      //<![CDATA[
      $(document).ready(function(){
    
            var $alltext = $("#form1 :text");
            var $allpassword= $("#form1 :password");
            var $allradio= $("#form1 :radio");
            var $allcheckbox= $("#form1 :checkbox");
    
    	var $allsubmit= $("#form1 :submit");
    	var $allimage= $("#form1 :image");
    	var $allreset= $("#form1 :reset");
    	var $allbutton= $("#form1 :button"); // <input type=button />  和 <button ></button>都可以匹配
    	var $allfile= $("#form1 :file");
            var $allhidden= $("#form1 :hidden"); // <input type="hidden" />和<div style="display:none">test</div>都可以匹配.
            var $allselect = $("#form1 select");
            var $alltextarea = $("#form1 textarea");
        
    	var $AllInputs = $("#form1 :input");
    	var $inputs = $("#form1 input");
    
            $("div").append(" 有" + $alltext.length + " 个（ :text 元素）<br/>")
    	                .append(" 有" + $allpassword.length + " 个（ :password 元素）<br/>")
    			.append(" 有" + $allradio.length + " 个（ :radio 元素）<br/>")
                            .append(" 有" + $allcheckbox.length + " 个（ :checkbox 元素）<br/>")
    			.append(" 有" + $allsubmit.length + " 个（ :submit 元素）<br/>")
                            .append(" 有" + $allimage.length + " 个（ :image 元素）<br/>")
    			.append(" 有" + $allreset.length + " 个（ :reset 元素）<br/>")
    			.append(" 有" + $allbutton.length + " 个（ :button 元素）<br/>")
    			.append(" 有" + $allfile.length + " 个（ :file 元素）<br/>")
    			.append(" 有" + $allhidden.length + " 个（ :hidden 元素）<br/>")
    			.append(" 有" + $allselect.length + " 个（ select 元素）<br/>")
    			.append(" 有" + $alltextarea.length + " 个（ textarea 元素）<br/>")
    			.append(" 表单有 " + $inputs.length + " 个（input）元素。<br/>")
    			.append(" 总共有 " + $AllInputs.length + " 个(:input)元素。<br/>")
    			.css("color", "red")
    
               $("form").submit(function () { return false; }); // return false;不能提交.
    
      });
      //]]>
      </script>
    </head>
    <body>
      <form id="form1" action="#">
        <input type="button" value="Button"/><br/>
        <input type="checkbox" name="c"/>1<input type="checkbox" name="c"/>2<input type="checkbox" name="c"/>3<br/>
        <input type="file" /><br/>
        <input type="hidden" /><div style="display:none">test</div><br/>
        <input type="image" /><br/>
        <input type="password" /><br/>
        <input type="radio" name="a"/>1<input type="radio" name="a"/>2<br/>
        <input type="reset" /><br/>
        <input type="submit" value="提交"/><br/>
        <input type="text" /><br/>
        <select><option>Option</option></select><br/>
        <textarea rows="5" cols="20"></textarea><br/>
        <button>Button</button><br/>
      </form>
     
      <div></div>
    </body>
    </html>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1lVX01fSw_size_27_color_FFFFFF_t_70]: /images/20220503/9e91f1f1092f445388e14a277a009013.png