jquery位置选择器

最新推荐文章于 2023-05-23 11:02:55 发布

scau_11jkx

最新推荐文章于 2023-05-23 11:02:55 发布

阅读量677

点赞数

分类专栏： jQuery

本文链接：https://blog.csdn.net/scau_11jkx/article/details/31796331

版权

jQuery 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

一、内容

讲述一些常用的位置选择器，如:nth-child(n), :nth-child(even), :gt(n)等等,并用一些具体例子实现其效果

二、例子

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Insert title here</title>
	<script type="text/javascript" src="JS/jquery.min.js"></script>
	<script type="text/javascript">
		$(function(){
			//一、取class为.myList这个标签的下一级标签li的下一级标签为a的节点
				/*$(".myList > li > a").css("color","red") ;*/
			//二、取li的节点其中li的href属性是以http://为开头
				/*$("a[href^='http://']").css("color","red") ;*/
			//三、取.myList的ul中的包含有a标签的li节点
				/*$(".myList ul li:has('a')").css("background","red") ;*/
			//四、获取页面中所有以pdf结尾的超级链接
				/*$("a[href$='pdf']").css("color","red") ;*/
			//五、取id为li1的下一个兄弟节点li，仅仅只会取一个节点，且必须是相邻的节点，如果相邻的节点不是li就什么都取不出去
				/*$("#li1+li").css("background","yellow");*/
			//六、取id为li1的下面的所有满足条件的兄弟节点
				/*$("#li1~li").css("background","red") ;*/
			//七、页面中最先匹配的某个元素
				/*$("li:first").css("background","red") ;*/
			//八、找到li中的第一个子节点
				$(".myList > li li:first-child").css("background","red") ;
			//九、找到li中的最后一个子节点
				$(".myList > li li:last-child").css("background","yellow") ;
		});
	</script>
</head>
<body>
	<ul class="myList">
		<li>
			<a href="http://jquery.com">jQuery site</a>
			<ul>
				<li><a href="css1.txt" title="mycss">CSS1</a></li>
				<li id="li1"><a href="css2.pdf" title="css2">CSS2</a></li>
				<li><a href="css3.css" title="this is my">CSS3</a></li>
				<li>Basic XPath</li>
			</ul>
		</li>
		<li>jQuery also supports
			<ul>
				<li>Custom selectors</li>
				<li>From selectors</li>
			</ul>
		</li>
	</ul>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Insert title here</title>
	<script type="text/javascript" src="JS/jquery.min.js"></script>
	<script type="text/javascript">
		$(function(){
			//一、找tbody中的第二个tr节点
				/*$("tbody tr:nth-child(2)").css("color","red") ;*/
			//二、找tbody的所有tr中的第二个td节点
				/*$("tbody td:nth-child(2)").css("color","red") ;*/
			//三、找tbody中tr的偶数节点
				/*（1）、$("tbody tr:nth-child(even)").css("background","#999") ;*/
				/*（2）、$("tbody tr:odd").css("background","#aaa") ;*/
			//四、找tbody的下标为2的tr后的节点
				$("tbody tr:gt(2)").css("background","#ddd") ;
		}) ;
	</script>
</head>
<body>
	<table width="700" border="1" align="center">
		<thead>
			<tr>
				<td>用户标识</td>
				<td>用户姓名</td>
				<td>用户年龄</td>
				<td>用户密码</td>
			</tr>				
		</thead>
		<tbody>
			<tr>
				<td>1</td>
				<td>张三</td>
				<td>23</td>
				<td>abc123</td>
			</tr>
			<tr>
				<td>2</td>
				<td>李四</td>
				<td>24</td>
				<td>abc123</td>
			</tr>
			<tr>
				<td>3</td>
				<td>王五</td>
				<td>25</td>
				<td>abc123</td>
			</tr>
			<tr>
				<td>4</td>
				<td>赵六</td>
				<td>26</td>
				<td>abc123</td>
			</tr>
			<tr>
				<td>5</td>
				<td>朱琪</td>
				<td>27</td>
				<td>abc123</td>
			</tr>
		</tbody>
	</table>
</body>
</html>