实例
一个网站中有10种的文章分类，我们设计一个类似WordPress显示各文章分类的名称及其文章数量的栏目，当用户进入一个页面时，默认显示前面5个分类的名称以及最后一个分类——其他分类，用户可以通过单击“显示全部分类”按钮来显示全部分类，同时一些推荐的分类会加下划线显示，按钮中的文字会改变为“显示部分分类”，再次单击“显示部分分类”后会回到之前的页面状态。
首先为了实现这个功能，我们需要写出相应的 html
<div> <h2>分类列表</h2> <ul> <li><a href="#">互联网(55)</a></li> <li><a href="#">前端(22)</a></li> <li><a href="#">css(10)</a></li> <li><a href="#">jQuery(12)</a></li> <li><a href="#">后台(28)</a></li> <li><a href="#">Php(10)</a></li> <li><a href="#">jsp(6)</a></li> <li><a href="#">.net(5)</a></li> <li><a href="#">CMS(9)</a></li> <li><a href="#">其他分类(3)</a></li> </ul> <div> <a href="https://www.jb51.net/more.html"><span>显示全部分类</span></a> </div> </div>
在Html写后好再添加一些简单的css，然后就可以开始jQuery的编写。
下面的代码将实现页面加载完毕后选取相应的对象并隐藏，这里选取的是第6个分类到第9个分类4个对象，因为需要控制隐藏和显示的便是这四个分类。
var $category = $('ul li:gt(4):not(:last)'); $category.hide();
$('ul li:gt(4):not(:last)')的意思便是获取索引值大于4的li元素并且去掉最后一个，需要注意的是索引值是从0开始，所以这样便可以获取第6到第9个分类。
下面将会获取“显示全部分类”按钮，并且给该按钮添加一个事件，单击该按钮后显示所有分类
var $toggleBtn = $('.more a'); $toggleBtn.click(function() { $category.show(); return false; });
.show()是用于显示元素的动画，另外由于给超链接添加onclick事件，因此需要添加return false语句阻止该超链接跳转。
写到这里，我们不难发现，jQuery的选择器跟css选择器有相近之处，其原理都是先以选择器选择对象，再添加操作，不过jQuery的选择器明显比css的丰富和简便得多，这也是使用jQuery能大大提高网站开发效率的重要原因。
接着上面的例子，根据文章开头设定的条件，在单击“显示全部分类”的按钮后，部分推荐的分类会添加下划线，同时按钮中的文字会变成“显示部分分类”，因此我们还需要在.show()和return false之间添加以下代码：
$('.more a span').text("显示部分分类"); $('ul li').filter(":contains('前端'),:contains('css'),:contains('jQuery'),:contains('CMS')").addClass("feature");
.text()用于改变对象中的文字，filter()可以用于选出推荐对象，这里推荐的是前端，CSS，jQuery，CMS，然后使用addClass()为它们添加“feature”类，因为我已预先写feature类的css，所以以上推荐对象在单击按钮后便会加上下划线。至此，可以说基本完成了这次需要的jQuery，当然用户单击“显示部分分类”后的效果还没有写上相应的jQuery。但有了前面的一段jQurey代码，相信写出单击“显示部分分类”后的代码应该不难。
在单击“显示部分分类”后的效果中其中一个是需要去掉推荐分类的下划线效果，我们可以使用removeClass()，用法与addClass相同。
现在余下的问题是如何把两段代码写在一起，由于用户在两个事件上单击的是同一个按钮，因此事件仍然是在刚才的按钮元素上，要使两种状态在一个元素上进行，我们可以使用判断：
if(元素显示状态 ) { //隐藏元素 }else{ //显示元素 }
整个完整的jQuery代码如下：
$(document).ready(function() { var $category = $('ul li:gt(4):not(:last)'); $category.hide(); var $toggleBtn = $('.more a'); $toggleBtn.click(function() { if($category.is(":visible")) { $category.hide(); $('.more a span') .text("显示全部分类"); $('ul li').removeClass("feature"); }else{ $category.show(); $('.more a span') .text("显示部分分类"); $('ul li').filter(":contains('前端'),:contains('css'),:contains('jQuery'),:contains('CMS')") .addClass("feature"); } return false; }); });