第二章 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>其他没啥好说的，都是一些需要记忆的选择器标签，经常去应用的话自然而然就会深深记在脑海里。
锋利的jQuery（第2版）.二
原文地址：http://www.cnblogs.com/fengxiongZz/p/7719813.html