标签：获取网页 color 佳能 理光 this filter 第2版 索尼 enter
第二章 jQuery选择器
1、使用jQuery获取网页中不存在的元素也不会报错，而JavaScript就不同。
2、案例研究：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="js/jquery.min.js" ></script>
<style>
.box{
width: 300px;
height: auto;
margin: 0 auto;
border: 1px solid red;
text-align: center;
}
ul{
list-style: none;
padding: 0;
}
a{
text-decoration: none;
color: #122B40;
font-size: 15px;
}
li{
display: inline-block;
height: 20px;
width: 98px;
margin-top: 10px;
}
.promoted{
color: yellowgreen;
}
.showMore{
height: auto;
width: 150px;
margin: 0 auto;
margin-top: 13px;
text-align: center;
}
.showMore a{
border: 1px solid saddlebrown;
}
</style>
</head>
<body>
<div class="box">
<ul>
<li><a href="#">佳能</a></li>
<li><a href="#">索尼</a></li>
<li><a href="#">三星</a></li>
<li><a href="#">尼康</a></li>
<li><a href="#">松下</a></li>
<li><a href="#">卡西欧</a></li>
<li><a href="#">富士</a></li>
<li><a href="#">宾得</a></li>
<li><a href="#">理光</a></li>
<li><a href="#">明基</a></li>
<li><a href="#">联想</a></li>
<li><a href="#">惠普</a></li>
</ul>
</div>
<div class="showMore">
<a href="#"><span>显示全部品牌</span></a>
</div>
<script>
$(function(){ //等待DOM加载完毕
var $category = $("ul li:gt(5):not(:last)"); //获得索引值大于5的品牌集合对象，除了最后一条
$category.hide(); //隐藏上面获取到的jQuery对象
var $toggleBtn = $("div.showMore > a"); //获取按钮
$toggleBtn.click(function(){
if($category.is(":visible")){
$category.hide();
$(this).find("span")
.css("background-color","bisque")
.text("显示全部品牌");
$("ul li a").removeClass("promoted");
}else{
$category.show();
$(this).find("span")
.css("background-color","white")
.text("精简显示品牌");
$("ul li a")
.filter(":contains(‘联想‘),:contains(‘惠普‘)")
.addClass("promoted");
}
return false;
})
})
</script>
</body>
</html>
其他没啥好说的，都是一些需要记忆的选择器标签，经常去应用的话自然而然就会深深记在脑海里。
标签：获取网页 color 佳能 理光 this filter 第2版 索尼 enter
原文地址：http://www.cnblogs.com/fengxiongZz/p/7719813.html
