<!DOCTYPE html>
<html lang="en">
<head>
???<meta charset="utf-8"/>
???<title>品牌列表案例</title>
???<script src="js/jquery-2.1.1.min.js" rel="script"></script>
???<style>
???????ul li{
???????????list-style: none;
???????}
???????*{
???????????text-decoration: none;
???????}
???????span{
???????????background: #1a272f;
???????????color: #fff;
???????????border:1px solid #647787;
???????????width: 150px;
???????????padding: 5px;
???????????text-align: center;
???????????vertical-align: middle;
???????????border-radius: 5px;
???????????margin: 0 50px;
???????}
???????.heighLight{
???????????color: #f00;
???????????text-decoration: underline;
???????}
???</style>
???<script>
???????$(document).ready(function () {
???????????//从列表的索引值大于5开始，但是不包含最后一条记录的所有列表元素隐藏
???????????var $eategory=$(‘ul li:gt(5):not(:last)‘);
???????????$eategory.hide();//隐藏上面获取到的jQuery对象
???????????//当用户点击“显示全部品牌”按钮时，所有列表都显示，且文本变为“精简显示品牌”，同时推荐品牌高亮显示
???????????// 首先获取按钮，
????????????var $toggleBtn =$(‘div.showMore > a‘);
???????????//给按钮添加点击事件，且列表全部显示，但是超链接不跳转
???????????$toggleBtn.click(function(){
???????????????$eategory.show();//显示全部列表
???????????????//按钮文本改为精简品牌展示
???????????????$(‘.showMore a span‘).text("精简显示品牌");
???????????????//品牌推荐高亮显示 filter:筛选复合条件的元素
???????????????$(‘ul li‘).filter(":contains(‘demo2‘),:contains(‘demo5‘),:contains(‘demo9‘)").addClass("heighLight");
???????????????return false;//链接不跳转
???????????});
???????})
???</script>
</head>
<body>
<div class=”SubCategoryBox”>
???<ul>
???????<li><a href="#">佳能</a><i>(30440)</i></li>
???????<li><a href="#">demo1</a><i>(30440)</i></li>
???????<li><a href="#">demo2</a><i>(30440)</i></li>
???????<li><a href="#">demo3</a><i>(30440)</i></li>
???????<li><a href="#">demo4</a><i>(30440)</i></li>
???????<li><a href="#">demo5</a><i>(30440)</i></li>
???????<li><a href="#">demo6</a><i>(30440)</i></li>
???????<li><a href="#">demo7</a><i>(30440)</i></li>
???????<li><a href="#">demo8</a><i>(30440)</i></li>
???????<li><a href="#">demo9</a><i>(30440)</i></li>
???????<li><a href="#">demo10</a><i>(30440)</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>
jQuery 选择器demo练习
原文地址：https://www.cnblogs.com/LindaBlog/p/9796891.html