jquery的基本选择器

最新推荐文章于 2024-09-05 15:53:15 发布

piao317110771

最新推荐文章于 2024-09-05 15:53:15 发布

阅读量93

点赞数

分类专栏： jquery 文章标签： jquery的基本选择器

本文链接：https://blog.csdn.net/piao317110771/article/details/84751951

版权

jquery 专栏收录该内容

29 篇文章 0 订阅

订阅专栏

1、代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>jquery的基本选择器</title>
		<!--引入jquery依赖包-->
		<script type="text/javascript" src="../jquery-1.11.3.js"></script>
		<script type="text/javascript">
			$(function() {
				//1.选择<li>节点下的所有<a>节点
				//$("li a").css("color","#f00");
				
				//2.选择.myList下的直接子<li>节点下的直接子<a>节点
				//$(".myList>li>a").css("color","#f00");
				
				//3.取href属性值以http://开头的所有<a>节点
				//$("a[href^='http://']").css("color","#f00");
				
				//4.取href属性值以pdf结尾的所有<a>节点
				//$("a[href$='pdf']").css("background","#00f").css("color","#fff");
				
				//5.取.myList的<ul>中的包含有<a>标签的所有<li>标签
				//$(".myList ul li:has('a')").css("background","#f00").css("color","#fff");
				
				//6.取#tt的下一个兄弟节点li，仅仅只会取一个节点
				//且仅仅只会取相邻的节点，如果相邻的节点不是li，就什么都取不出来
				//$("#tt+li").css("background","#f00").css("color","#fff");
				
				//7.取#tt的下面的满足条件的兄弟节点
				//$("#tt~li").css("background","#f00").css("color","#fff");
			});
		</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="tt"><a href="css2.pdf" title="css2">CSS2</a></li>
					<li><a href="css3.html" title="this is my">CSS3</a></li>
					<li>Basic XPath</li>
				</ul>
			</li>	
			<li>
				JQuery also supports
				<ul>
					<li>Custom selectors</li>
					<li>Form selectors</li>
				</ul>
			</li>		
		</ul>
	</body>
</html>

2、原始效果