先看代码:
$(“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选择器匹配的是 第一个 选择器匹配的元素中的父元素中的其中一个或多个子元素。