jquery的基本选择器 -

lipiaoshui2015

浏览: 107769 次

最近访客更多访客>>

damin

让蛋蛋飞_007

wang_eye

xiaoweishu

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

jquery的基本选择器

博客分类：

jquery

jquery的基本选择器

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、原始效果