一、jQuery选择器
选择器是jQuery的根基，事件处理、遍历DOM和Ajax操作都依赖于选择器。jQuery选择器分为基本选择器、层次选择器、过滤选择器和表单选择器。
一、基本选择器
基本选择器是jQuery中最常用的选择器，也是最简单的选择器，它通过元素id、class和标签名等查找DOM元素。在网页中每个id只能使用一次，class允许重复使用。
| 选择器 | 描述 | 返回 | 示例 |
| #id | 根据给定id匹配一个元素 | 单个元素 | $("#test")选取id为test的元素 |
| .class | 根据给定的类名匹配元素 | 集合元素 | $(".test")选取所有class为test的元素 |
| element | 根据给定的元素名匹配元素 | 集合元素 | $("p")选取所有的<p>元素 |
| * | 匹配所有元素 | 集合元素 | $("*")选取所有的元素 |
| selector1,selector2,....selectorN | 将每一个选择器匹配到的元素合并后一起返回 | 集合元素 | $("div,span,p.myClass")选取所有的<div>,<span>和拥有class为myClass的<p>标签的一组元素。 |
示例：
1、给网页中所有的<p>元素添加onclick事件。
<script type="text/javascript">
$(function(){
$("p").click(function(){
alert("ok");
});
});
</script>
<p>测试1</p>
<p>测试2</p>
2、使一个特定的表格隔行变色
<style type="text/css">
.even{background:#CCC;}
.odd{background:#993;}
</style>
<script type="text/javascript">
$(function(){
$("#tb tr:even").addClass("even");
$("#tb tr:odd").addClass("odd");
});
</script>
<table id="tb">
<tr><td>第一行</td><td>第一行</td></tr>
<tr><td>第二行</td><td>第二行</td></tr>
<tr><td>第三行</td><td>第三行</td></tr>
<tr><td>第四行</td><td>第四行</td></tr>
<tr><td>第五行</td><td>第五行</td></tr>
<tr><td>第六行</td><td>第六行</td></tr>
</table>
3、对多选框进行操作，输出选中的多选框的个数
<script type="text/javascript">
$(function(){
$("#btn").click(function(){
var $option=$('input:checked');
console.info($option.length);
});
});
</script>
<input type="checkbox" value="1" name="check" checked="checked" />
<input type="checkbox" value="2" name="check" />
<input type="checkbox" value="3" name="check" checked="checked" />
<input type="button" value="你选中的个数" id="btn" />
二、层次选择器
如果想通过DOM元素之间的层次关系来获取特定元素，例如后代元素、子元素、相邻元素和兄弟元素等，那么层次选择器是一个非常好的选择器。
| 选择器 | 描述 | 返回 | 示例 |
| $("ancestor descendant") | 选取ancestor元素里的所有descendant(后代)元素 | 集合元素 | $("div span")选取<div>里的所有<span>元素。 |
| $("parent>child") | 选取parent元素下的child（子）元素，与$("ancestor descendant")有区别，$("parent>child")选取的是一代，而$("ancestor descendant")选取的包括子代，孙子代等等后代。 | 集合元素 | $("div>span")选取<div>元素下元素名是<span>的子元素 |
| $("prev+next") | 选取紧接在prev元素后的next元素 | 集合元素 | $(".one+div")选取class为one的下一个<div>元素 |
| $('prev~siblings') | 选取prev元素之后的所有siblings元素 | 集合元素 | $("#two~div")选取id为two的元素后面得所有<div>兄弟元素。 |
1、为什么$("prev+next")返回的是集合元素？
form> <label>Name:</label> <input name="name" /> <fieldset> <label>Newsletter:</label> <input name="newsletter" /> </fieldset> </form> <input name="none" /> 返回所有跟在label后面的Input元素
$("label+input");返回结果：[<input name="name">,<input name="newsletter">]
在层次选择器中，第1个和第2个选择器比较常用，而后面两个因为在jQuery里可以用更加简洁的方式代替，所以使用的几率相对较少。
可以使用next()方法来代替$("prev+next")选择器
$(".one+div") 等价于$(".one").next("div")
$("prev~div")等价于$("#prev").nextAll("div")
$("#prev~div"):只能选择#prev元素后面的同辈<div>元素，而siblings()方法与前后位置无关，只要是同辈节点就都能匹配。
三、过滤选择器
过滤选择器主要是通过特定的过滤规则来帅选出所需的DOM元素，过滤规则都以(:)开头。过滤选择器分为：基本过滤、内容过滤、可见性过滤、属性过滤、子元素过滤和表单对象属性过滤选择器。
1、基本过滤选择器：
| 选择器 | 描述 | 返回 | 示例 |
| :first | 选取第一个元素 | 单个元素 | $('div:first')选取所有<div>元素中第一个<div>元素 |
| :last | 选取最后一个元素 | 单个元素 | $('div:last') |
| :not(selector) | 去除所有与给定选择器匹配的元素 | 集合元素 | $('input:not(.myClass)')选取class不为myCLass的<input>元素 |
| :even | 选取索引是偶数的所有元素索引从0开始 | 集合元素 | $('input:even')选取索引是偶数的<input>元素 |
| :odd | 选取索引是奇数的所有元素，索引从0开始 | 集合元素 | $('input:odd') |
| :eq(index) | 选取索引等于index的元素(index从0开始) | 单个元素 | $('input:eq(1)')选取索引等于1的<input>元素 |
| :gt(index) | 选取索引大于index的元素(index从0开始) | 集合元素 | $('input:gt(1)')选取索引大于1的<input>元素(大于1，而不包括1) |
| :lt(index) | 选取索引小于index的元素(index从0开始) | 集合元素 | $('input:lt(1)')选取索引小于1的<input>元素(小于1，而不包括1) |
| :header | 选取所有标题元素,例如h1,h2,h3等等。 | 集合元素 | $(':header')选取网页中所有的<h1>,<h2>.... |
| :animated | 选取当前正在执行动画的所有元素 | 集合元素 | $('div:animated')选取正在执行动画的<div>元素 |
实例：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="../jquery-1.7.2.min.js"></script>
<style type="text/css">
div,span,p {
width:140px;
height:140px;
margin:5px;
background:#aaa;
border:#000 1px solid;
float:left;
font-size:17px;
font-family:Verdana;
}
div.mini {
width:55px;
height:55px;
background-color: #aaa;
font-size:12px;
}
div.hide {
display:none;
}
</style>
</head>
<body>
<script type="text/javascript">
$(function(){
//手动重置页面元素
$("#reset").click(function(){
$("*").removeAttr("style");
$("div[class=none]").css({"display":"none"});
});
//判断是否自动重置
$("input[type=button]").click(function(){
if($("#isreset").is(":checked")){
$("#reset").click();
}
});
//给id为mover的元素添加动画.
function animateIt() {
$("#mover").slideToggle("slow", animateIt);
}
animateIt();
//选取第一个元素
$('#btn1').click(function(){
$('div:first').css('background','#bfa');
});
//选取最后一个div元素
$('#btn2').click(function(){
$('div:last').css('background','#bfa');
});
//选取class不为One的所有div元素
$('#btn3').click(function(){
$('div:not(.one)').css('background','#bfa');
});
//选取索引值为偶数的div元素
$('#btn4').click(function(){
$('div:even').css('background','#bfa');
});
//选取索引值为奇数的div元素
$('#btn5').click(function(){
$('div:odd').css('background','#bfa');
});
//选取索引值等于3的div元素
$('#btn6').click(function(){
$('div:eq(3)').css('background','#bfa');
});
//选取索引值大于3的div元素
$('#btn7').click(function(){
$('div:gt(3)').css('background','#bfa');
});
$('#btn8').click(function(){
$('div:lt(3)').css('background','#bfa');
});
//选取所有的标题元素
$('#btn9').click(function(){
$(':header').css('background','#bfa');
});
//选取正在执行动画的所有元素
$('#btn10').click(function(){
$(':animated').css('background','#bfa');
});
});
/*
辅助例子
1,自动重置
2,给元素添加动画
*/
</script>
<h3>基本过滤选择器.</h3>
<button id="reset">手动重置页面元素</button>
<input type="checkbox" id="isreset" checked="checked"/><label for="isreset">点击下列按钮时先自动重置页面</label><br /><br />
<input type="button" value="选择第一个div元素." id="btn1"/>
<input type="button" value="选择最后一个div元素." id="btn2"/>
<input type="button" value="选择class不为one的 所有div元素." id="btn3"/>
<input type="button" value="选择索引值为偶数 的div元素." id="btn4"/>
<input type="button" value="选择索引值为奇数 的div元素." id="btn5"/>
<input type="button" value="选择索引值等于3的元素." id="btn6"/>
<input type="button" value="选择索引值大于3的元素." id="btn7"/>
<input type="button" value="选择索引值小于3的元素." id="btn8"/>
<input type="button" value="选择所有的标题元素." id="btn9"/>
<input type="button" value="选择当前正在执行动画的所有元素." id="btn10"/>
<br /><br />
<!-- 测试的元素 -->
<div class="one" id="one" >
id为one,class为one的div
<div class="mini">class为mini</div>
</div>
<div class="one" id="two" title="test" >
id为two,class为one,title为test的div.
<div class="mini" title="other">class为mini,title为other</div>
<div class="mini" title="test">class为mini,title为test</div>
</div>
<div class="one">
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini"></div>
</div>
<div class="one">
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini" title="tesst">class为mini,title为tesst</div>
</div>
<div style="display:none;" class="none">style的display为"none"的div</div>
<div class="hide">class为"hide"的div</div>
<div>
包含input的type为"hidden"的div<input type="hidden" size="8"/>
</div>
<span id="mover">正在执行动画的span元素.</span>
</body>
</html>
2、内容过滤选择器
内容过滤选择器的过滤规则主要体现在它所包含的子元素或文本内容上。
| 选择器 | 描述 | 返回 | 示例 |
| :contains(text) | 选取含有文本内容为”text“的元素 | 集合元素 | $('div:contains("我")') |
| :empty | 选取不包含子元素或文本的空元素 | 集合元素 | $("div:empty") |
| :has(selector) | 选取含有选择器匹配元素的元素1 | 集合元素 | $('div:has(p)')选取含有<p>元素的<div>元素 |
| :parent | 选取含有子元素或者文本的元素 | 集合元素 | $("div:parent")选取含有子元素或文本元素的<div>元素 |
示例：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="../jquery-1.7.2.min.js"></script>
<style type="text/css">
div,span,p {
width:140px;
height:140px;
margin:5px;
background:#aaa;
border:#000 1px solid;
float:left;
font-size:17px;
font-family:Verdana;
}
div.mini {
width:55px;
height:55px;
background-color: #aaa;
font-size:12px;
}
div.hide {
display:none;
}
</style>
</head>
<body>
<script type="text/javascript">
$(function(){
//手动重置页面元素
$("#reset").click(function(){
$("*").removeAttr("style");
$("div[class=none]").css({"display":"none"});
});
//判断是否自动重置
$("input[type=button]").click(function(){
if($("#isreset").is(":checked")){
$("#reset").click();
}
});
//给id为mover的元素添加动画.
function animateIt() {
$("#mover").slideToggle("slow", animateIt);
}
animateIt();
//选取含有文本的元素
$('#btn1').click(function(){
$("div:contains(di)").css('background','#bbffaa');
});
//选取空元素
$('#btn2').click(function(){
$('div:empty').css('background','#bbffaa');
});
//选取含有clss为mini元素的div元素
$('#btn3').click(function(){
$('div:has(.mini)').css('background','#bbffaa');
});
//选取含有子元素或者文本元素的div元素
$('#btn4').click(function(){
$('div:parent').css('background','#bbffaa');
});
});
/*
辅助例子
1,自动重置
2,给元素添加动画
*/
</script>
<h3>基本过滤选择器.</h3>
<button id="reset">手动重置页面元素</button>
<input type="checkbox" id="isreset" checked="checked"/><label for="isreset">点击下列按钮时先自动重置页面</label><br /><br />
<input type="button" value="选取含有文本"di"的div元素." id="btn1"/>
<input type="button" value="选取不包含子元素(或者文本元素)的div空元素." id="btn2"/>
<input type="button" value="选取含有class为mini元素 的div元素." id="btn3"/>
<input type="button" value="选取含有子元素(或者文本元素)的div元素." id="btn4"/>
<br /><br />
<!-- 测试的元素 -->
<div class="one" id="one" >
id为one,class为one的div
<div class="mini">class为mini</div>
</div>
<div class="one" id="two" title="test" >
id为two,class为one,title为test的div.
<div class="mini" title="other">class为mini,title为other</div>
<div class="mini" title="test">class为mini,title为test</div>
</div>
<div class="one">
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini"></div>
</div>
<div class="one">
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini" title="tesst">class为mini,title为tesst</div>
</div>
<div style="display:none;" class="none">style的display为"none"的div</div>
<div class="hide">class为"hide"的div</div>
<div>
包含input的type为"hidden"的div<input type="hidden" size="8"/>
</div>
<span id="mover">正在执行动画的span元素.</span>
</body>
</html>
3、可见性过滤选择器
可见性过滤选择器是根据元素的可见性和不可见性状态来选择相应的元素，
| 选择器 | 描述 | 返回 | 示例 |
| :hidden | 选取所有不可见元素 | 集合元素 | $(":hidden");选取所有不可见元素。包括<input type="hidden"> ,<div style="display:none;">和<div style="visibility:hidden"> |
| :visible | 选取所有课件的元素 | 集合元素 | $("div:visible")选取所有可见的<div>元素 |
实例：
//选取所有可见的div元素
$('#btn_visible').click(function(){
$('div:visible').css('background','#FF6500');
});
//选取所有不可见的div元素
$('#btn_hidden').click(function(){
alert('不可见元素共'+$('body :hidden').length+"个");
});
});
4、属性过滤选择器
属性过滤选择器的过滤规则是通过元素的属性来获取相应的元素。
| 选择器 | 描述 | 返回 | 示例 |
| [attribute] | 选取拥有此属性的元素 | 集合元素 | $('div[id]');选取拥有属性id的div元素 |
| [attribute=value] | 选取属性的值为vlaue的元素 | 集合元素 | $('div[title=test]')选取属性title为'test'的<div>元素 |
| [attribute!=value] | 选取属性的值不等于value的元素 | 集合元素 | $('div[title!=test]'); |
| [attribute^=value] | 选取属性的值以value开始的元素 | 集合元素 | $('div[title^=test]') |
| [attribute$=value] | 选取属性的值以value结束的元素 | 集合元素 | $('div[title$=test]') |
| [attribute*=value] | 选取属性的值含有value的元素 | 集合元素 | $('div[title*=test]') |
| [selector1][selector2][selectorN] | 用属性选择器合并成一个复合属性选择器，满足多个条件。每选择一次，缩小一次范围 | 集合元素 | $('div[id][title$='test']')选取拥有属性id，并且属性title以'test'结束的<div>元素 |
示例：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="../jquery-1.7.2.min.js"></script>
<style type="text/css">
div,span,p {
width:140px;
height:140px;
margin:5px;
background:#aaa;
border:#000 1px solid;
float:left;
font-size:17px;
font-family:Verdana;
}
div.mini {
width:55px;
height:55px;
background-color: #aaa;
font-size:12px;
}
div.hide {
display:none;
}
</style>
</head>
<body>
<script type="text/javascript">
$(function(){
//手动重置页面元素
$("#reset").click(function(){
$("*").removeAttr("style");
$("div[class=none]").css({"display":"none"});
});
//判断是否自动重置
$("input[type=button]").click(function(){
if($("#isreset").is(":checked")){
$("#reset").click();
}
});
//给id为mover的元素添加动画.
function animateIt() {
$("#mover").slideToggle("slow", animateIt);
}
animateIt();
//选取所有可见的div元素
$('#btn_visible').click(function(){
$('div:visible').css('background','#FF6500');
});
//选取所有不可见的div元素
$('#btn_hidden').click(function(){
alert('不可见元素共'+$('body :hidden').length+"个");
});
//选取含有属性title的div元素
$('#btn1').click(function(){
$('div[title]').css('background','#bbffaa');
});
//选取title属性为test的div元素
$('#btn2').click(function(){
$('div[title=test]').css('background','#bbffaa');
});
//选取title属性值不为test的div元素
$('#btn3').click(function(){
$('div[title!=test]').css('background','#bbffaa');
});
//选取title属性以te开始的 div元素
$('#btn4').click(function(){
$('div[title^=te]').css('background','#bbffaa');
});
//选取title属性一个est结束的div元素
$('#btn5').click(function(){
$('div[title$=est]').css('background','#bbffaa');
});
//选取titile属性含有es的div元素
$('#btn6').click(function(){
$('div[title*=es]').css('background','#bbffaa');
});
//组合属性选择器,首先选取有属性id的div元素，然后在结果中 选取属性title值 含有"es"的元素
$('#btn7').click(function(){
$('div[id][title*=es]').css('background','#bbffaa');
});
});
/*
辅助例子
1,自动重置
2,给元素添加动画
*/
</script>
<button id="reset">手动重置页面元素</button>
<input type="checkbox" id="isreset" checked="checked"/><label for="isreset">点击下列按钮时先自动重置页面</label>
<h3> 属性选择器.</h3>
<input type="button" value="选取含有 属性title 的div元素." id="btn1"/>
<input type="button" value="选取 属性title值等于"test"的div元素." id="btn2"/>
<input type="button" value="选取 属性title值不等于"test"的div元素(没有属性title的也将被选中)." id="btn3"/>
<input type="button" value="选取 属性title值 以"te"开始 的div元素." id="btn4"/>
<input type="button" value="选取 属性title值 以"est"结束 的div元素." id="btn5"/>
<input type="button" value="选取 属性title值 含有"es"的div元素." id="btn6"/>
<input type="button" value="组合属性选择器,首先选取有属性id的div元素，然后在结果中 选取属性title值 含有"es"的元素." id="btn7"/>
<br /><br />
<div class="one" id="one" >
id为one,class为one的div
<div class="mini">class为mini</div>
</div>
<div class="one" id="two" title="test" >
id为two,class为one,title为test的div.
<div class="mini" title="other">class为mini,title为other</div>
<div class="mini" title="test">class为mini,title为test</div>
</div>
<div class="one">
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini"></div>
</div>
<div class="one">
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini" title="tesst">class为mini,title为tesst</div>
</div>
<div style="display:none;" class="none">style的display为"none"的div</div>
<div class="hide">class为"hide"的div</div>
<div>
包含input的type为"hidden"的div<input type="hidden" size="8"/>
</div>
<span id="mover">正在执行动画的span元素.</span>
</body>
</html>
5、子元素过滤选择器
子元素过滤选择器的过滤规则相对于其他的选择器稍微有些复杂，只要将元素的父元素和子元素分清楚那么使用起来非常简单。
| 选择器 | 描述 | 返回 | 示例 |
| ：nth-child(index/even/odd/equation) | 选取每个父元素下的第index个子元素或者奇偶元素.(index从1开始) | 集合元素 | :eq(index)只匹配一个元素，而nth-child将为每一个父元素匹配子元素 |
| :first-child | 选取每个父元素的第一个子元素 | 集合元素 | |
| :last-child | 选取每个父元素的最后一个子元素 | 集合元素 | |
| :only-child | 如果某个元素时它父元素中唯一的子元素，那么将会被匹配。如果父元素中含有其他元素则不会被匹配。 | 集合元素 |
示例：
//选取每个class为one的div父元素下的第2个子元素
$('#btn1').click(function(){
$('div.one :nth-child(2)').css('background','#bbffaa');
});
//选取每个class为one的div父元素下的第一个子元素.
$('#btn2').click(function(){
$('div.one :first-child').css('background','#bbffaa');
});
//选取每个class为one的div父元素下的最后一个子元素.
$('#btn3').click(function(){
$('div.one :last-child').css('background','#bbffaa');
});
//如果class为one的div父元素下的仅仅只有一个子元素，那么选中这个子元素
$('#btn4').click(function(){
$('div.one :only-child').css('background','#bbffaa');
});
6、表单对象属性过滤选择器
此选择器主要是对所有选择的表单元素进行过滤，例如被选中的下拉框，多选框等。
| 选择器 | 描述 | 返回 | 示例 |
| :enabled | 选取所有可用元素 | 集合元素 | $('#form1 :enbled'):选取id为form1的表单内的所有可用元素 |
| :disabled | 选取所有不可用元素 | 集合元素 | $('#form2 :disabled') |
| :checked | 选取所有被选中的元素(单选框，复选框) | 集合元素 | $('input:checked') |
| :selected | 选取所有被选中的选项元素（下拉列表） | 集合元素 | $('select :selected') |
7、表单选择器
为了使用户能够更加灵活的操作表单，jQuery中专门加入了表单选择器
| 选择器 | 描述 | 返回 | 示例 |
| :input | 选取所有的<input>.<textarea><select><button>元素 | 集合元素 | $(':input'); |
| :text | 选取所有的单行文本框 | 集合元素 | $(':text')选取所有的单行文本框 |
| :password | 选取所有的密码框 | 集合元素 | $(':password')选取所有的密码框 |
| :radio | 选取所有的单选框 | 集合元素 | $(':radio') |
| :checkbox | 选取所有的多选框 | 集合元素 | $(':checkbox') |
| :submit | 选取所有的提交按钮 | 集合元素 | |
| :image | 选取所有的图像按钮 | 集合元素 | |
| :reset | 选取所有的重置按钮 | 集合元素 | |
| :button | 选取所有的button按钮 | 集合元素 | |
| :file | 选取所有的上传域 | 集合元素 | |
| :hidden | 选取所有的不可见元素 | 集合元素 |
8、选择器中的一些注意事项
①、选择器中含有特殊符号的注意事项
选择器中含有“.”"#" "(" "]"等特殊字符 ，如果按照普通的方式去处理的话就会出错。解决此类错误的方法是使用转义符转义。（\\）
②、选择器中含有空格的注意事项
带有空格是 后代
9、案例研究 列表展示
效果图：
代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<style type="text/css">
*{margin:0px; padding:0px;}
.box{width:600px; text-align:center; margin:0 auto; margin-top:30px; font-size:14px;}
.box ul{list-style:none;}
.box ul li{float:left; width:200px;}
a{ text-decoration:none; color:#04d;}
a:hover{color:#F50; text-decoration:underline;}
.showmore{clear:both; text-align:center; font-size:12px; padding-top:10px;}
.showmore a{display:block; border:1px solid #AAA; width:120px; margin:0 auto; line-height:24px;}
.showmore a span{ background:url(down.gif) no-repeat 0 0; padding-left:15px;}
</style>
<script type="text/javascript">
$(function(){
//从第七条开始隐藏，除最后一条
var $shop=$('.box ul li:gt(5):not(:last)');
$shop.hide();
//当用户点击显示全部商品时，显示隐藏的品牌，“显示全部商品”按钮文本切换成“精简显示品牌”，高亮推荐品牌
$('.showmore').toggle(function(){
$shop.show();
$('div.box ul li').filter(':contains("佳能"),:contains("索尼")').css('color','#F50');
$('.showmore a span').text('精简显示品牌').css('background','url(up.gif) no-repeat 0 0');
return false;
},function(){
$shop.hide();
$('.showmore a span').text('全部显示品牌').css('background','url(down.gif) no-repeat 0 0');
return false;
});
});
</script>
</head>
<body>
<div class="box">
<ul>
<li ><a href="#">佳能</a><i>(30440) </i></li>
<li ><a href="#">索尼</a><i>(27220) </i></li>
<li ><a href="#">三星</a><i>(20808) </i></li>
<li ><a href="#">尼康</a><i>(17821) </i></li>
<li ><a href="#">松下</a><i>(12289) </i></li>
<li ><a href="#">卡西欧</a><i>(8242) </i></li>
<li ><a href="#">富士</a><i>(14894) </i></li>
<li ><a href="#">柯达</a><i>(9520) </i></li>
<li ><a href="#">宾得</a><i>(2195) </i></li>
<li ><a href="#">理光</a><i>(4114) </i></li>
<li ><a href="#">奥林巴斯</a><i>(12205) </i></li>
<li ><a href="#">明基</a><i>(1466) </i></li>
<li ><a href="#">爱国者</a><i>(3091) </i></li>
<li ><a href="#">其它品牌相机</a><i>(7275) </i></li>
</ul>
<div class="showmore">
<a href="more.html"><span>显示全部品牌</span></a>
</div>
</div>
</body>
</html>