需求：
隐藏从第七条后开始的品牌，最后一条要显示
点击显示更多，隐藏的品牌会显示，按钮文本切换成精简显示品牌，高亮推荐品牌
点击精简显示后，隐藏从第七条后开始的品牌，最后一条要显示，按钮文本切换，去掉高亮
在这个案例中，除了选择器外，会用到的几个jQuery方法：
show()--显示隐藏的匹配元素
css(name,value)--给元素设置样式
text(string)---设置所有匹配元素文本的内容
filter(expr)---筛选出与指定表达式匹配的元素集合，其中expr可以是多个选择器的组合
它和find方法的不同是，find会元素内宣召匹配的元素，而filter则是筛选元素。一个是对子集进行操作，一个是对自身集合进行筛选。
addClass(class)--为匹配的元素添加指定的类名
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Sample HTML</title> <link href="./css/style.css" rel="stylesheet" type="text/css"> <script src="./js/jquery.js"></script> <script src="./js/myjs.js"></script> </head> <body> <p>精简：</p> <div class="SubCategoryBox"> <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 style="display:none"><a href="#">富士</a><i>(14894) </i></li> <li style="display:none"><a href="#">柯达</a><i>(9520) </i></li> <li style="display:none"><a href="#">宾得</a><i>(2195) </i></li> <li style="display:none"><a href="#">理光</a><i>(4114) </i></li> <li style="display:none"><a href="#">奥林巴斯</a><i>(12205) </i></li> <li style="display:none"><a href="#">明基</a><i>(1466) </i></li> <li style="display:none"><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> <br/> </body> </html>
*{ margin:0; padding:0;}
body {font-size:12px;text-align:center;}
a { color:#04D; text-decoration:none;}
a:hover { color:#F50; text-decoration:underline;}
.SubCategoryBox {width:600px; margin:0 auto; text-align:center;margin-top:40px;}
.SubCategoryBox ul { list-style:none;}
.SubCategoryBox ul li { display:block; float:left; width:200px; line-height:20px;}
.showmore { clear:both; text-align:center;padding-top:10px;}
.showmore a { display:block; width:120px; margin:0 auto; line-height:24px; border:1px solid #AAA;}
.showmore a span { padding-left:15px; background:url(../img/down.gif) no-repeat 0 0;}
.promoted a { color:#F50;}
$(document).ready(
function() {
var $category = $("ul li:gt(5):not(:last)");// 筛选出ul中第七个及以后并且不包括最后一个li的li集合
$category.hide();
var $toggleBtn = $("div.showmore > a");//定位到a元素（按钮）
// $toggleBtn
// .click(function() {
// if ($category.is(":visible")) {
// $category.hide();
// $(this).find("span").css("background","url(img/down.gif)
// no-repeat 0 0").text("显示全部品牌");
// $("ul li").removeClass("promoted");
// } else {
// $category.show();
// $(this).find("span").css("background",
// "url(img/up.gif) no-repeat 0 0")
// .text("精简显示品牌");
// $("ul li")
// .filter(
// ":contains('佳能'),:contains('尼康'),:contains('奥林巴斯')")
// .addClass("promoted");
// }
// return false;
// });
// another way 把第一个会出发的放在前面，若把hide放在前面，则用户第一次点击的时候，是没有反应的
$toggleBtn.toggle(function() {
$category.show();
$(this).find("span").css("background",
"url(img/up.gif) no-repeat 0 0").text("精简显示品牌");// 更换背景图片，更换文字
$("ul li").filter(
":contains('佳能'),:contains('尼康'),:contains('奥林巴斯')")
.addClass("promoted");// 高亮推荐的品牌
}, function() {
$category.hide();
$(this).find("span").css("background",
"url(img/down.gif) no-repeat 0 0").text("显示全部品牌");
$("ul li").removeClass("promoted");
});
});
相关推荐
本篇文章将深入探讨jQuery 3.1.1版本的两个核心文件——`jquery-3.1.1.js`和`jquery-3.1.1.min.js`，以及它们在Bootstrap Treeview插件中的应用。 首先，我们来看`jquery-3.1.1.js`，这是未经压缩和未优化的源代码...
级联选择器（Cascading Selectors）则是一种允许用户从一系列相关选项中逐级选择的控件。例如，在一个国家/地区选择器之后，可能会有一个相应的城市选择器，城市列表根据之前选择的国家动态加载。级联选择器提高了...
`selector`可以是CSS选择器，如`$("#id")`选取ID为`id`的元素，`$(".class")`选取所有class为`class`的元素。 - `$(element).html()`：获取或设置元素的HTML内容。 - `$(element).append()`/`.prepend()`：在元素...
"jQuery-1.12.4.js" 和 "jQuery-1.8.3.min.js" 是两个不同版本的jQuery库，用于前端网页开发。这两个文件分别代表了jQuery的不同阶段，各自有其特性和适用场景。 首先，我们来看 "jQuery-1.12.4.js"。这是jQuery的...
jquery-ui日历控件还是很人性化的，但官网没找到很好的中文版，这里上传一下
`jquery-1.9.1.js`是未压缩的源代码版本，便于开发者阅读、调试和学习，而`jquery-1.9.1.min.js`是经过压缩和优化后的版本，体积更小，适用于生产环境，以提高页面加载速度。 jQuery 1.9.1版本是一个重要的里程碑，...
二、`jquery-3.0.0.min.js`的优化 1. 文件大小：`.min.js`是经过压缩和混淆后的版本，文件大小显著减小，有利于提高页面加载速度，降低用户等待时间。 2. 代码优化：通过删除注释、合并变量、缩短函数名等手段，`....
这种选择器通常包含小时和分钟的下拉菜单，或者有时还包括秒和AM/PM选项，使得用户可以快速准确地选择所需的时间值。 ### 实现方式 1. **自定义HTML结构**：首先，你需要创建一个基本的HTML结构，包括用于输入时间...
本教程将深入探讨jQuery的语法与选择器，并通过实际案例进行解析。** ### jQuery语法基础 jQuery的核心是它的链式操作和简洁的语法。在jQuery中，通常以`$`函数开始，它可以用来选择DOM元素、执行操作或创建新元素...
<script src="./public/js/jquery-ui-1.10.3.min.js"> <script src="./public/js/jquery.datepicker-zh-CN.js"></script> <link href="./public/css/jqueryui/jquery-ui-1.10.3.min.css" rel="stylesheet"> $( "#...
本篇文章将深入探讨jQuery选择器的入门知识，并通过实际的小案例帮助你理解和应用这些选择器。 jQuery选择器是jQuery库的核心部分，它们是用于在HTML文档中查找元素的工具。jQuery支持多种CSS选择器，包括基本选择...
首先，我们来看标题中的两个文件："jquery-1.8.3.js" 和 "jquery-1.8.3.min.js"。这两个文件都是jQuery 1.8.3的核心库，但它们之间存在显著的区别。"jquery-1.8.3.js"是未压缩和未优化的源代码版本，适合在开发环境...
selector 是jQery对象选择器。 plugin 是插件的名称。 method 是相应插件现有的方法。 parameter 是参数对象，可以是一个对象、字符串等。 所有方法都定义在jQuery.fn.{plugin}.methods。每个方法都有2个参数：jq和...
**月份选择器插件month-picker详解** 在网页开发中，日期和时间的选择是常见的交互元素，尤其在表单填写、日历应用等场景下尤为重要。`month-picker`是一款基于jQuery的月份选择器插件，它提供了简洁且美观的界面，...
- **选择器**：jQuery的核心之一就是高效的选择器，如ID选择器(`#id`)、类选择器(`.class`)、元素选择器(`tag`)等，使开发者能快速定位DOM元素。 - **DOM操作**：jQuery提供了简便的DOM操作方法，如`append()`、`...
jQuery的生态体系强大，拥有无数第三方插件，如Bootstrap、jQuery UI等，它们扩展了jQuery的功能，如日期选择器、轮播图等，满足了各种应用场景的需求。 8. **性能优化（Performance）** jQuery 1.11.3在性能上做...
`jquery-1.6.4.min.js`是jQuery库的核心文件，它是jQuery Mobile Datepicker依赖的基础。jQuery提供了一套简洁的API，用于操作DOM、处理事件和执行动画，大大简化了JavaScript编程。 `jquery.mobile.datebox.min.js...
jQuery的引入通常有两种形式：未压缩的`jquery-2.1.1.js`和压缩版的`jquery-2.1.1.min.js`。未压缩版本主要用于开发环境，便于调试和理解代码；而压缩版本则用于生产环境，通过去除空格、注释和简化变量名等方式减小...
《jQuery颜色选择器ColorPicker v1.0-源码.zip》是一个包含JavaScript库的压缩文件，主要用于前端开发中的颜色选择功能。在这个项目中，我们主要关注的是jQuery ColorPicker插件，它是一个轻量级且易于使用的组件，...
本篇笔记将深入探讨 jQuery 的核心概念，包括选择器、常用方法以及在实际项目中的应用。 ### 1. 选择器 选择器是 jQuery 的精髓，它们允许我们高效地选取页面上的 HTML 元素。jQuery 支持多种 CSS 选择器，如 ID ...