jquery的基本选择器

最新推荐文章于 2023-04-23 17:34:04 发布

scau_11jkx

最新推荐文章于 2023-04-23 17:34:04 发布

阅读量550

点赞数

分类专栏： jQuery

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

版权

jQuery 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

一、内容

主要介绍几种常用的jquery基本选择器，并用具体的例子说明

二、例子

<!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") ;
		});
	</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>