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、原始效果
3、案例1
4、案例2
5、案例3
6、案例4
7、案例5
8、案例6
9、案例7