jq 选择器

最新推荐文章于 2024-04-07 21:05:29 发布

神奇大叔

最新推荐文章于 2024-04-07 21:05:29 发布

阅读量143

点赞数

分类专栏： jQuery 文章标签： jQuery

本文链接：https://blog.csdn.net/weixin_43294560/article/details/103020355

版权

jQuery 专栏收录该内容

34 篇文章 1 订阅

订阅专栏

**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>
		<!--引入jQuery文件-->
		<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>