子元素过滤选择器

Posted on Posted in js
Tips: 本文创建于2014年7月6日,已超过 2 年,内容或图片可能已经失效!

[code lang="html"]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>新建网页</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<script type="text/javascript" src="jquery-2.1.0.js"></script>

<script type="text/javascript">
function f1() {
//简单过滤选择器
//① 下标从0开始
//② 把全部节点放在一起进行计算
//$("li:eq(2)").css('background-color','yellow');

//子元素过滤选择器
//① 下标从1开始
//② 匹配父元素下的第n个/偶数/奇数 子元素
//$("li:nth-child(3)").css('background-color','pink');
//$("li:nth-child(even)").css('background-color','pink');
$("li:nth-child(odd)").css('background-color', 'pink');

$("li:first-child").css('color', 'red');//匹配父元素下的第1个子元素
$("li:last-child").css('color', 'blue');//匹配父元素下的最后一个子元素

//匹配父元素下只有一个子元素的元素
$("li:only-child").css('background-color', 'green');
}
</script>

<style type="text/css">
div {
width: 300px;
height: 50px;
border: 2px solid black;
}
</style>
</head>

<body>
<h2>子元素过滤选择器</h2>
<ul>
<li>唐生</li>
<li>孙悟空</li>
<li>猪八戒</li>
<li>沙和尚</li>
</ul>
<ul>
<li>牛魔王</li>
<li>铁扇公主</li>
<li>红孩儿</li>
</ul>
<ul>
<li>如来</li>
</ul>
<input type="button" value="触发" onclick="f1()" />
</body>
</html>
[/code]

» 转载请注明来源:呢喃 » 子元素过滤选择器

Leave a Reply

Your email address will not be published. Required fields are marked *

four + 5 =