锋利的jQuery（第2版）.二
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了锋利的jQuery（第2版）.二相关的知识，希望对你有一定的参考价值。
第二章 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版）.二的主要内容，如果未能解决你的问题，请参考以下文章
jQuery中的事件和动画——《锋利的jQuery》（第2版）读书笔记2