jq 选择器

以你之姓@ 2021-07-24 14:01 426阅读 0赞

**jQuery选择器返回的是数组对象**             
    	 .val()  是数组对象的方法，其他对象无法使用，直接使用返回数组中对一个对象的value
    	 .html() 返回数组对象的，直接使用返回数组中第一个对象的标签中的内容			
    	 				
    id选择器
    	$("#标签id");
    		var inp=$("#uname");
    		
    标签选择器
    	$("标签名");
    		var inps=$("input");
    		
    类选择器
    	$(".类名")
    		var cons=$(".common");
    		
    组合选择器
    	$("标签名,标签名..")
    		var all=$("hr,input");
    		
    子标签选择器
    	$("选择器>子选择器")
    		var inps=$("div>input");
    		var inps=$("#showdiv>input")
    		
    获取之前的所有指定标签
    	$("标签~标签");
    
    获取之后的所有指定标签
    	$("标签+标签");
    
    使用jQuery数组对象的val()方法返回其他对象的value值(本质上还是对数组对象操作)
    	first
    		返回第一个
    			$("input:first").val()  将第一个对象作为一个数组对象  
    	last
    		返回最后一个
    			$("input:last").val()  	将最后一个对象作为数组对象
    
    层级属性筛选
    	筛选指定标签以外的标签
    	$("标签:not(标签[标签属性])")
    	
    		$("td:not(td[width])")    返回td属性中没有width的数组对象
    	
    	筛选索引值匹配标签
    	$("标签:eq(索引值)")
    	
    		function t8(){
    			var tdd=$("td:eq(2)");
    			alert(tdd.html());
    		}
    	
    	筛选所有元素集合中从0开始大于指定索引值之后的所有元素
    	$("标签:gt(索引值)")
    	
    	筛选所有元素集合中从0开始小于指定索引值之前的所有元素
    	$("标签:lt(索引值)")
    	
    	筛选所有元素集合中从0开始,所有奇数序号的元素
    	$("标签:odd")
    	
    	筛选所有元素集合中从0开始,所有偶数序号的元素
    	$("标签:even")
    	
    	筛选所有标题元素(如h1、h2、h3)
    	$(":header")
    	
    	筛选某个标签包含指定内容的所有元素
    	$("标签:contains(内容)")
    			
    			function t10()
    		{
    			var ts=$("td:contains('1')");
    			alert(ts.length);
    		}
    	
    	筛选所有不包含子元素或者文本的空元素
    	$("标签:empty")
    		function t11(){
    			var em=$("td:empty");
    			alert(em.length)
    		}
    		
    	匹配所有不可见元素
    	$("标签:hidden")
    		会匹配有不可见元素的标签，包括其子标签
    		
    	匹配所有可见元素
    	$("标签:visible")
    	
    	属性查找
    		查找name属性以new开头的元素
    			$("input[name^='new']")
    	
    	属性选择器
    		查找具有指定属性的元素
    		 $('标签:属性名')
    		 		如$('input:checked')

代码示例;

<html>
    	<head>
    		<meta charset="utf-8">
    		<title>jQ 选择器</title>
    		
    		<script type="text/javascript" src="js/jquery.min.js" charset="utf-8"></script>
    
    
    		<script type="text/javascript">
    			/*id选择器*/
    			function t1(){ 
    				//jquery--id
    				var inp=$("#uname");
    				alert(inp.val());
    			}
    			/*标签选择器*/
    			function t2(){ 
    				var inps=$("input");
    				alert(inps.length);
    			}
    			/*类选择器*/
    			function t3(){ 
    			 var cons=$(".common");
    			 alert(cons.length)
    			}
    			/*组合选择器*/
    			function t4(){ 
    				var all=$("hr,input");
    				alert(all.length);
    			}
    			/*测试子标签选择器*/
    			function t5(){ 
    				var inps=$("div>input");
    				alert(inps.length);
    			}
    			
    			function t6(){ 
    				var inp=$("input:first");
    				alert(inp.val())
    			}
    			
    			function t7(){ 
    				var tds=$("td:not(td[width])");
    				alert(tds.length);
    			}
    			
    			function t8(){ 
    				var tdd=$("td:eq(2)");
    				alert(tdd.html());
    			}
    			function t9()
    			{ 
    				var hd=$(":header");
    				alert(hd.length);
    			}
    			function t10()
    			{ 
    				var ts=$("td:contains('1')");
    				alert(ts.length);
    			}
    			function t11(){ 
    				var em=$("td:empty");
    				alert(em.length)
    			}
    		</script>
    		<style type="text/css">	
    		   .common{ }
    	
    			#showdiv{ 
    				width:300px;
    				height:300px;
    				border:solid 2px orange;		
    			}
    			table{ 
    				height:200px;
    			}
    		</style>
    	</head>
    	<body>
    		<h1></h1>
    		<input type="button" name="" id="" value="测试id"  onclick="t1()" class="common"/>
    		<input type="button" value="测试标签选择器" onclick="t2()" class="common"/>
    		<input type="button" value="测试类选择器" onclick="t3()"/>
    		<input type="button" value="组合选择器" onclick="t4()"/>
    		<input type="button" value="子标签选择器" onclick="t5()" />
    		<input type="button" value="调用数组val()" onclick="t6()" />
    		<input type="button" value="层级筛选" onclick="t7()"/>
    		<input type="button" value="层级筛选eq" onclick="t8()" />
    		<input type="button" value="层级筛选标题元素" onclick="t9()" />
    		<input type="button" value="层级筛选内容元素" onclick="t10()" />
    		<input type="button" value="层级筛选内容元素" onclick="t11()" />
    		<hr />
    		<input type="text" name="uname" id="uname" value="张三" class="common"/>
    		<hr />
    		<div id="showdiv">
    				
    			<input type="button" value="张三"  />
    			<input type="button" value="张三"  />
    			<input type="button" value="张三"  />
    			<input type="button" value="张三"  />
    			
    		</div>
    		
    		<table border="1px">
    			<tr>
    				<td width="100px"></td>
    				<td width="100px"></td>
    				<td width="100px">5</td>
    			</tr>
    			<tr>
    				<td>2</td>
    				<td>1</td>
    				<td>1</td>
    			</tr>
    			<tr>
    				<td></td>
    				<td></td>
    				<td></td>
    			</tr>
    		</table>
    	</body>
    </html>