jQuery 选择器详解 超级详细

目录

元素

id

类

​

层级

最先最后

奇偶

可见性

属性

表单对象

表单对象属性

---

元素

$("tagName")
根据 标签名 选择所有该标签的元素

<script>
			$(function(){
				$("#b1").click(function(){
					$("button").addClass("pink");
				});
				$("#b2").click(function(){
					$("#d").toggleClass("pink");
				})
				$("#b3").click(function(){
					$("#d").css({"background-color":"red","color":"green","font-size":"40px"});
				})
			})
		</script>
		<style>
			.pink{
				background-color: pink;
			}
			.green{
				background-color:green;
			}
		</style>

<button id="b1">add</button>
		<button id="b2">remove</button>
		<button id="b3">css</button>
		
		
		<div id="d">测试数据！</div>

id

$("#id")
根据 id 选择元素
id应该是唯一的，如果id重复，则只会选择第一个。

<script src="https://how2j.cn/study/jquery.min.js"></script>
   
<script>
$(function(){
   $("#b1").click(function(){
      $("#d1").addClass("pink");
   });
    
});
    
</script>
  <button id="b1">给id=d1的div增加背景色</button>
<br>
<br>
   
<style>
.pink{
   background-color:pink;
}
</style>
    
<div id="d1">
Hello JQuery
</div>
  
<div id="d2" >
Hello JQuery
</div>
  
<div  id="d3">
Hello JQuery
</div>

类

$(".className")
根据 class 选择元素

<script src="https://how2j.cn/study/jquery.min.js"></script>
   
<script>
$(function(){
   $("#b1").click(function(){
      $(".d").addClass("pink");
   });
    
});
    
</script>
  <button id="b1">给class='d'的div增加背景色</button>
<br>
<br>
   
<style>
.pink{
   background-color:pink;
}
</style>
    
<div class="d">
Hello JQuery
</div>
  
<div class="d" >
Hello JQuery
</div>
  
<div  >
Hello JQuery
</div>

层级

 

$("selector1 selector2")
选择 selector1下的selector2元素 。
在本例中 选择id=d3的div下的span元素

<script src="https://how2j.cn/study/jquery.min.js"></script>
    
<script>
$(function(){
   $("#b1").click(function(){
      $("div#d3 span").addClass("pink");
   });
     
});
     
</script>
  <button id="b1">给id='d3'的div 下的 span 增加背景色</button>
<br>
<br>
    
<style>
.pink{
   background-color:pink;
}
</style>
     
<div class="d">
  <span>Hello JQuery</span>
    
</div>
   
<div class="d" >
  <span>Hello JQuery</span>
</div>
   
<div id="d3" >
  <span>Hello JQuery</span>
</div>

最先最后

 

$(selector:first) 满足选择器条件的第一个元素
$(selector:last) 满足选择器条件的最后一个元素

<script src="https://how2j.cn/study/jquery.min.js"></script>
     
<script>
$(function(){
   $("#b1").click(function(){
      $("div:first").addClass("pink");
   });
      
   $("#b2").click(function(){
      $("div:last").addClass("pink");
   });
 
});
      
</script>
  <button id="b1">第一个增加背景色</button>
  <button id="b2">最后一个增加背景色</button>
<br>
<br>
     
<style>
.pink{
   background-color:pink;
}
</style>
      
<div>
  <span>Hello JQuery</span>
     
</div>
    
<div >
  <span>Hello JQuery</span>
</div>
    
<div >
  <span>Hello JQuery</span>
</div>

奇偶

 

$(selector:odd) 满足选择器条件的奇数元素
$(selector:even) 满足选择器条件的偶数元素
因为是基零的，所以第一排的下标其实是0(是偶数)

<script src="https://how2j.cn/study/jquery.min.js"></script>
      
<script>
$(function(){
   $("#b1").click(function(){
      $("div:odd").toggleClass("pink");
   });
       
   $("#b2").click(function(){
      $("div:even").toggleClass("green");
   });
  
});
       
</script>
  <button id="b1">切换奇数背景色</button>
  <button id="b2">切换偶数背景色</button>
<br>
<br>
      
<style>
.pink{
   background-color:pink;
}
.green{
   background-color:green;
}
</style>
       
<div>
  <span>Hello JQuery 0</span>
      
</div>
 
<div>
  <span>Hello JQuery 1</span>
      
</div>
     
<div >
  <span>Hello JQuery 2</span>
</div>
     
<div >
  <span>Hello JQuery 3</span>
</div>
 
<div >
  <span>Hello JQuery 4</span>
</div>
 
</div>
     
<div >
  <span>Hello JQuery 5</span>
</div>
     
<div >
  <span>Hello JQuery 6</span>
</div>

可见性

$(selector:hidden) 满足选择器条件的不可见的元素
$(selector:visible) 满足选择器条件的可见的元素
注； div:visible 和div :visible(有空格)是不同的意思
div:visible 表示选中可见的div
div :visible(有空格) 表示选中div下可见的元素

<script src="https://how2j.cn/study/jquery.min.js"></script>
        
<script>
$(function(){
   $("#b1").click(function(){
     $("div:visible").hide();
   });
   $("#b2").click(function(){
      $("div:hidden").show();     
   });
});
         
</script>
  <button id="b1">隐藏可见的</button>
  <button id="b2">显示不可见的</button>
  
<br>
<br>
        
<style>
.pink{
   background-color:pink;
}
  
</style>
         
<div>
  <span>Hello JQuery 1</span>
        
</div>
       
<div >
  <span>Hello JQuery 2</span>
</div>
       
<div >
  <span>Hello JQuery 3</span>
</div>
   
<div >
  <span >Hello JQuery 4</span>
</div>
   
</div>
       
<div >
  <span>Hello JQuery 5</span>
</div>
       
<div >
  <span>Hello JQuery 6</span>
</div>

属性

$(selector[attribute]) 满足选择器条件的有某属性的元素
$(selector[attribute=value]) 满足选择器条件的属性等于value的元素
$(selector[attribute!=value]) 满足选择器条件的属性不等于value的元素
$(selector[attribute^=value]) 满足选择器条件的属性以value开头的元素
$(selector[attribute$=value]) 满足选择器条件的属性以value结尾的元素
$(selector[attribute*=value]) 满足选择器条件的属性包含value的元素

注： 一般不要使用[class=className] 而应该使用.className
因为使用$("[class='className']") .toggleClass("anotherClassName")
会导致class变成className anotherClassName,再次 使用 [class=className] 就无法选中了
而.className没有这个问题。

<script src="https://how2j.cn/study/jquery.min.js"></script>
       
<script>
$(function(){
   $("#b1").click(function(){
      $("div[id]").toggleClass("border");
   });
   $("#b2").click(function(){
      $("div[id='pink']").toggleClass("border");
   });
   $("#b3").click(function(){
      $("div[id!='pink']").toggleClass("border");
   });
   $("#b4").click(function(){
      $("div[id^='p']").toggleClass("border");
   });
   $("#b5").click(function(){
      $("div[id$='k']").toggleClass("border");
   });
   $("#b6").click(function(){
      $("div[id*='ee']").toggleClass("border");
   });
 
});
        
</script>
  <button id="b1">给有id属性的div切换边框</button>
  <button id="b2">给id=pink的div切换边框</button>
  <button id="b3">给有id!=pink属性的div切换边框</button>
  <button id="b4">给有id以p开头的div切换边框</button>
  <button id="b5">给有id以k结尾的div切换边框</button>
  <button id="b6">给有id包含ee的div切换边框</button>
 
<br>
<br>
       
<style>
.pink{
   background-color:pink;
}
.green{
   background-color:green;
}
.border{
   border: 1px blue solid;
    
}
 
button{
   margin-top:10px;
   display:block;
}
 
div{
  margin:10px;
}
</style>
        
<div id="pink">
    id=pink的div
</div>
      
<div id="green">
  id=green的div
</div>
      
<div >
   没有id的div
</div>

表单对象

 

表单对象选择器 指的是选中form下会出现的输入元素
:input 会选择所有的输入元素，不仅仅是input标签开始的那些，还包括textarea,select和button
:button 会选择type=button的input元素和button元素
:radio 会选择单选框
:checkbox会选择复选框
:text会选择文本框，但是不会选择文本域
:submit会选择提交按钮
:image会选择图片型提交按钮
:reset会选择重置按钮
注意: 第7行

$("td[rowspan!=13] "+value).toggle(500);
$("td[rowspan!=13] 后面有一个空格，表示层级选择器，如果没有就会出错
toggle(500) 表示在显示与隐藏之间来回切换，生效时间是500毫秒
注： :submit会把<button>元素选中，因为在一些浏览器中，<button>元素的type默认值是submit，所以会选中它。

表单对象属性

:enabled会选择可用的输入元素 注：输入元素的默认状态都是可用
:disabled会选择不可用的输入元素
:checked会选择被选中的单选框和复选框 注： checked在部分浏览器上(火狐,chrome)也可以选中selected的option
:selected会选择被选中的option元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="jquery.min.js"></script>
		<script>
			$(function(){
				$(".a").click(function(){
					var value=$(this).val();
					$("td[rowspan!=16] "+value).toggle(500);
				})
				$(".a2").click(function(){
					var value= $(this).val();
					var options =$("td[rowspan!=16] "+value);
					alert("选中了"+options.length+"条记录！");
				})
			})
		</script>
		<style>
			table{
				width: 80%;
				border-collapse:collapse;
				table-layout:fixed;
			}
			div button{
				display: block;
			}
			table td{
				border-bottom: 1px solid #D3D3D3;
				padding-bottom: 5px;
				padding-top: 5px;
			}
			
			
		</style>
	</head>
	<body>
		<table>
		    <tr>
		    	<td rowspan="16" width="150px" valign="top">
		    		<div>
		    			<button value=":input" class="a">切换到所有的：input</button>
			    		<button value=":button" class="a">切换到所有的：button</button>
			    		<button value=":radio" class="a">切换到所有的：radio</button>
			    		<button value=":checkbox" class="a">切换到所有的：</button>
			    		<button value=":text" class="a">切换到所有的：text</button>
			    		<button value=":password" class="a">切换到所有的：password</button>
			    		<button value=":file" class="a">切换到所有的：file</button>
			    		<button value=":submit" class="a">切换到所有的：submit</button>
			    		<button value=":image" class="a">切换到所有的：image</button>
			    		<button value=":reset" class="a">切换到所有的：reset</button>	
			    		<button value=":enabled" class="a">切换:enabled</button>
		                <button value=":disabled" class="a">切换:disabled</button>       
		                <button value=":checked" class="a">切换:checked</button>     
		                <button value=":selected" class="a2">:selected数量</button>     
		    		</div>
		    	</td>
		    	<td width="120px">说明</td>
		    	<td width="120px">表单对象</td>
		    	<td width="">示例</td>
		    </tr>
		    <tr>
		    	<td>input按钮</td>
		    	<td>:button</td>
		    	<td><input type="button" value="input按钮"/></td>
		    </tr>
		    <tr>
		    	<td>button按钮</td>
		    	<td>:button</td>
		    	<td><button >Button按钮</button></td>
		    </tr>
		    <tr>
		    	<td>单选框</td>
		    	<td>:checkbox</td>
		    	<td><input type="checkbox"/></td>
		    </tr>
		    <tr>
		    	<td>文本框</td>
		    	<td>:text</td>
		    	<td><intput type="text"></intput></td>
		    </tr>
		    <tr>
		    	<td>文本域</td>
		    	<td>:textaera</td>
		    	<td><textarea></textarea></td>
		    </tr>
		    <tr>
		    	<td>密码框</td>
		    	<td>:password</td>
		    	<td><input type="password"/></td>
		    </tr>
		    <tr>
		    	<td>下拉框</td>
		    	<td>:option</td>
		    	<td><select><option>option</option></select></td>
		    </tr>
		    <tr>
		    	<td>文件上传</td>
		    	<td>:file</td>
		    	<td><input type="file"/></td>
		    </tr>
		    <tr>
		    	<td>提交按钮</td>
		    	<td>:submit</td>
		    	<td><input type="submit" /></td>
		    </tr>
		    <tr>
		    	<td>图片型提交按钮</td>
		    	<td>:image</td>
		    	<td><input type="image" src="img/bg2.jpg" width="100px"/></td>
		    </tr>
		    <tr>
		    	<td>重置按钮</td>
		    	<td>:reset</td>
		    	<td><input type="reset"/></td>
		    </tr>
		    <tr>
				  <td >enabled的按钮</td>
				  <td >:enabled</td>
				  <td><input type="button" enabled="enabled" value="enabled的按钮"/></td>
				</tr>
				 
				<tr>
				  <td >disabled的按钮</td>
				  <td >:disabled</td>
				  <td><input type="button" disabled="disabled" value="disabled的按钮"/></td>
				</tr>
				 
				  <td >选中的复选框</td>
				  <td >:checked</td>
				  <td>
				     
				    <input type="radio" checked="checked" ><br>
				    <input type="radio" ><br>
				    <input type="checkbox" ><br>
				    <input type="checkbox" checked="checked" >
				  </td>
				 
				<tr>
				  <td>选中的下拉列表</td>
				  <td >:selected</td>
				  <td>
				    <select size="3" multiple="multiple">
				       <option >数据结构</option>
				       <option >计算机组成原理</option>
				       <option selected="selected">计算机网络</option>
				    </select>
				  </td>
		</table>
	</body>
</html>