揭秘jQuery-选择器

先看代码：

$(“li”)只选择第一个无序列表中的一个li元素，而不会选择另一个无序列表中的li元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<script src="js/jquery.js"></script>
		<ul>
			<li>1 . What a beautiful girl!</li>
			<li>2 . What a beautiful girl!</li>
			<li>3 . What a beautiful girl!</li>
		</ul>
		<ul>
			<li><a>hello1</a></li>
			<li><a>hello2</a></li>
			<li><a>hello3</a></li>
			<li><a>hello3</a></li>
			<li><a>hello4</a></li>
			<li><a>hello5</a></li>
		</ul>
		<script>
			var index = 0;
			function next(){
				$("li:eq("+index+")").fadeOut(1500);
				if(index == 2){
					index = 0;
				}else{
					index ++;
				}
				$("li:eq("+index+")").fadeIn(1500);
			}
			setInterval(next,3000);
			
		</script>
	</body>
</html>

再看一段代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<script src="js/jquery.js"></script>
		<ul>
			<li>1 . What a beautiful girl!</li>
			<li>2 . What a beautiful girl!</li>
			<li>3 . What a beautiful girl!</li>
		</ul>
		
		<script>
			$(document).ready(function(){
				$("li").html("hello");
			})
			
		</script>
	</body>
</html>

$("li")匹配了无序列表中的所有li元素。

结论:

jQuery选择器匹配的是第一个选择器匹配的元素中的父元素中的其中一个或多个子元素。