jquery插件库,jquery插件库怎么导入

jquery插件库一般怎么使用。

jQuery的插件使用方法具体步骤如下：

创新互联-专业网站定制、快速模板网站建设、高性价比吉安网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式吉安网站制作公司更省心,省钱,快速模板网站建设找我们，业务覆盖吉安地区。费用合理售后完善，十年实体公司更值得信赖。

一、调用库文件

使用jQuery必须链接jQuery的库文件，无论是压缩版还是正常版，必须至少在网页中链接一个，如：

script type="text/javascript" src="jquery.js"/script

二、调用Jquery插件

应用做好的jQuery插件效果。

比如jQuery官网制作的插件jQuery，在使用它时不仅要链接库文件，还要链接UI文件以及UI的CSS文件，如：

link href="" rel="stylesheet" type="text/css"/ script src=""/script script src=""/script

经过这几部的操作，jQuery插件效果才能真正被引用到网页文件中起到作用。

Jquery是一个优秀的Javascript库，还兼容各种浏览器。jQuery使用户能更方便地处理HTML、events、实现动画效果，并且方便地为网站提供AJAX交互。

如何编写jquery插件

编写插件的目的是给已经有的一系列方法或函数做一个封装，以便在其他地方重复使用，提高开发效率和方便后期维护。本文将详细介绍如何编写jQuery插件

类型

jQuery的插件主要分为3种类型

1、封装对象方法

这种插件是将对象方法封装起来，用于对通过选择器获取的jQuery对象进行操作，是最常见的一种插件。此类插件可以发挥出jQuery选择器的强大优势，有相当一部分的jQuery的方法，都是在jQuery脚本库内部通过这种形式“插”在内核上的，例如：parent()方法、appendTo()方法等。这些方法在现在来看都是jQuery本身自带的方法了。平时，我们是可以直接拿来就用的，只需引入jQuery库就行

2、封装全局函数

可以将独立的函数加到jQuery命名空间下，如常用的jQuery.ajax()、去首尾空格的jQuery.trim()方法等，都是jQuery内部作为全局函数的插件附加到内核上去的

3、选择器插件

虽然jQuery的选择器十分强大，但是在少数情况下，还是会需要用到选择器插件来扩充一些自己喜欢的选择器

要点

1、jQuery插件的文件名推荐命名为jQuery.[插件名].js，以免和其他JS库插件混淆

2、所有的对象方法都应当附加到jQuery.fn对象上，而所有的全局函数都应当附加到jQuery对象本身上

3、在插件内部的this指向的是当前通过选择器获取的jQuery对象，而不像一般方法那样，如click，内部的this指向的是DOM元素

4、可以通过this.each来遍历所有的元素

5、所有的方法或函数插件，都应当以分号结尾。否则压缩的时候可能出现问题。为了稳妥些，甚至可以在插件头部先加上一个分号，以免他人不规范的代码影响自身的插件代码

6、插件应该返回一个jQuery对象，以保证插件的可链式操作

7、避免在插件内部使用$作为jQuery对象的别名，而应使用完整的jQuery来表示，避免冲突。当然，也可以利用闭包来回避这种问题，使插件内部继续使用$作为jQuery的别名

闭包

利用闭包的特性，即可以避免内部临时变量影响全局空间，又可以在插件内容继续使用$作为jQuery的别名。常见的jQuery插件都是以下这种形式的:

(function(){

/*这里放置代码*/

})();

首先定义一个匿名函数function(){/*这里放置代码*/}，然后用括号括起来，变成(function(){/*这里放置代码*/})这种形式，最后通过()这个运算符来执行。可以传递参数进行，以供内部函数使用

//为了更好的兼容性，开始前有个分号

;(function($){    //此处将$作为匿名函数的形参

/*这里放置代码，可以使用$作为jQuery的缩写别名*/

})(jQuery);      //这里就将jQuery作为实参传递给匿名函数了

上面的代码是一种常见的jQuery插件的结构

插件机制

jQuery提供了两个用于拓展jQuery功能的方法，即jQuery.fn.extend()方法和jQuery.extend()方法。jQuery.fn.extend()方法用于拓展封装对象方法的插件，jQuery.extend()方法用于拓展封装全局函数的插件和选择器插件。这两个方法都接受一个参数，类型为Object。Object对象的"名/值对"分别代表"函数或方法名/函数主体"

【jQuery.fn.extend()】

jQuery.fn.extend()方法用于将一个对象的内容合并到jQuery的原型，以提供新的jQuery实例方法

labelinput type="checkbox" name="foo" Foo/label

labelinput type="checkbox" name="bar" Bar/label

button id="btn1"全选/button

button id="btn2"全不选/button

script

jQuery.fn.extend({

check: function() {

return this.each(function() { this.checked = true; });

},

uncheck: function() {

return this.each(function() { this.checked = false; });

}

});

$('#btn1').click(function(){

$( "input[type='checkbox']" ).check();

});

$('#btn2').click(function(){

$( "input[type='checkbox']" ).uncheck();

});

/script

【jQuery.extend()】

jQuery.extend()方法用一个或多个其他对象来扩展一个对象，然后返回被扩展的对象

jQuery.extend( target [, object1 ] [, objectN ] )

例如，合并settings对象和options对象，修改并返回settings对象

var settings = {validate:false,limit:5,name:"foo"};

var options = {validate:true,name:"bar"};

var newOptions = jQuery.extend(settings,options);

console.log(newOptions);//Object {validate: true, limit: 5, name: "bar"}

jQuery.extend()方法经常被用于设置插件方法的一系列默认参数

function foo(options){

options=jQuery.extend({

name:"bar",

length:5,

dataType:"xml"

},options);

如果用户调用foo()方法的时候，在传递的参数options对象设置了相应的值，那么就使用设置的值，否则使用默认值

通过使用jQuery.extend()方法，可以很方便地用传入的参数来覆盖默认值。此时，对方法的调用依旧保持一致，只不过要传入的是一个映射而不是一个参数列表。这种机制比传统的每个参数都去检测的方式不仅灵活而且更加简洁。此外使用命名参数意味着再添加新选项也不会影响过去编写的代码，从而使开发者使用起来更加直观明了

jquery 简介

JQuery是继prototype之后又一个优秀的Javascript库。它是轻量级的js库 ，它兼容CSS3，还兼容各种浏览器（IE 6.0+, FF1.5+, Safari 2.0+, Opera 9.0+），jQuery2.0及后续版本将不再支持IE6/7/8浏览器。jQuery使用户能更方便地处理HTML（标准通用标记语言下的一个应用）、events、实现动画效果，并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。jQuery能够使用户的html页面保持代码和html内容分离，也就是说，不用再在html里面插入一堆js来调用命令了，只需要定义id即可。

jQuery是一个兼容多浏览器的javascript库，核心理念是write less,do more(写得更少,做得更多)。jQuery在2006年1月由美国人John Resig在纽约的barcamp发布，吸引了来自世界各地的众多JavaScript高手加入，由Dave Methvin率领团队进行开发。如今，jQuery已经成为最流行的javascript库，在世界前10000个访问最多的网站中，有超过55%在使用jQuery。

jQuery是免费、开源的，使用MIT许可协议。jQuery的语法设计可以使开发更加便捷，例如操作文档对象、选择DOM元素、制作动画效果、事件处理、使用Ajax以及其他功能。除此以外，jQuery提供API让开发者编写插件。其模块化的使用方式使开发者可以很轻松的开发出功能强大的静态或动态网页。

jQuery，顾名思义，也就是JavaScript和查询（Query），即是辅助JavaScript开发的库。

历史

大概在 1992 年，一家称作 Nombas 的公司开发了一种叫做 C 减减（C-minus-minus，简称 Cmm）的嵌入式脚本语言。Cmm 背后的理念很简单：一个足够强大可以替代宏操作（macro）的脚本语言，同时保持与 C （和 C ++）足够的相似性，以便开发人员能很快学会。这个脚本语言捆绑在一个叫做 CEnvi 的共享软件中，它首次向开发人员展示了这种语言的威力。

Nombas 最终把 Cmm 的名字改成了 ScriptEase，原因是后面的部分（mm）听起来过于消极，同时字母 C “令人害怕”。

当 Netscape Navigator 崭露头角时，Nombas 开发了一个可以嵌入网页中的 CEnvi 的版本。这些早期的试验被称为 Espresso Page（浓咖啡般的页面），它们代表了第一个在万维网上使用的客户端语言。而 Nombas 丝毫没有料到它的理念将会成为万维网的一块重要基石。

当网上冲浪越来越流行时，对于开发客户端脚本的需求也逐渐增大。此时，大部分因特网用户还仅仅通过 28.8 kbit/s 的调制解调器连接到网络，即便这时网页已经不断地变得更大和更复杂。而更加加剧用户痛苦的是，仅仅为了简单的表单有效性验证，就要与服务器进行多次地往返交互。设想一下，用户填完一个表单，点击提交按钮，等待了 30 秒的处理后，看到的却是一条告诉你忘记填写一个必要的字段。

那时正处于技术革新最前沿的 Netscape，开始认真考虑开发一种客户端脚本语言来解决简单的处理问题。

当时工作于 Netscape 的 Brendan Eich，开始着手为即将在 1995 年发行的 Netscape Navigator 2.0 开发一个称之为 LiveScript 的脚本语言，当时的目的是在浏览器和服务器（本来要叫它 LiveWire）端使用它。Netscape 与 Sun 及时完成 LiveScript 实现。

就在 Netscape Navigator 2.0 即将正式发布前，Netscape 将其更名为 JavaScript，目的是为了利用 Java 这个因特网时髦词汇。Netscape 的赌注最终得到回报，JavaScript 从此变成了因特网的必备组件。

因为 JavaScript 1.0 如此成功，Netscape 在 Netscape Navigator 3.0 中发布了 1.1 版。恰巧那个时候，微软决定进军浏览器，发布了 IE 3.0 并搭载了一个 JavaScript 的克隆版，叫做 JScript（这样命名是为了避免与 Netscape 潜在的许可纠纷）。微软步入 Web 浏览器领域的这重要一步虽然令其声名狼藉，但也成为 JavaScript 语言发展过程中的重要一步。

在微软进入后，有 3 种不同的 JavaScript 版本同时存在：Netscape Navigator 3.0 中的 JavaScript、IE 中的 JScript 以及 CEnvi 中的 ScriptEase。与 C 和其他编程语言不同的是，JavaScript 并没有一个标准来统一其语法或特性，而这 3 种不同的版本恰恰突出了这个问题。随着业界担心的增加，这个语言的标准化显然已经势在必行。

2006年1月，jQuery的第一个版本面世，至今已经有10年多了（注：这个时间点是截止至出书时间）。虽然过了这么久，但它依然以其简洁、灵活的编程风格让人一见倾心。在本篇文章中，我们将讲述jQuery的发展 历史 ，让读者对jQuery有更多的了解。

在jQuery迅速发展的同时，一些大的厂商也看中了商机。2009年9月，微软和诺基亚公司正式宣布支持开源的jQuery库，另外，微软公司还宣称他们将把jQuery作为Visual Studio工具集的一部分。他将提供包括jQuery的智能提示、代码片段、示例文档编制等内容在内的功能。微软和诺基亚公司将长期成为jQuery的用户成员，其他成员还有Google，Intel，IBM，Intuit等公司。

2009年1月，jQuery 1.3版发布，它使用了全新的选择符引擎Sizzle，在各个浏览器下全面超越其他同类型JavaScript框架的查询速度，程序库的性能也因此有了极大提升。这一版本的第2个变化就是提供live()方法，使用live()方法可以为当前及将来增加的元素绑定事件，在1.3版之前，如果要为将来增加的元素绑定事件，需要使用livequery插件，而在1.3版中，可以直接用live()方法。　2005年8月，John Resig提议改进Prototype的“Behaviour”库，于是他在blog上发表了自己的想法，并用了3个例子做说明。

2010年2月，jQuery 1.4.2版发布，它新增了有关事件委托的两个方法：delegate()和undelegate()。delegate()用于替代1.3.2中的live()方法。这个方法比live()来的方便，而且也可以达到动态添加事件的作用。比如给表格的每个td绑定hover事件

特点

1.动态特效

2.AJAX

3.通过插件来扩展

4.方便的工具 - 例如浏览器版本判断

5.渐进增强

6.链式调用

7.多浏览器支持，支持Internet Explorer6.0+、Opera9.0+、Firefox2+、Safari2.0+、Chrome1.0+（在2.0.0中取消了对Internet Explorer6,7,8的支持）

历史 版本

jQuery 1.0

（2006年8月）：该库的第一个稳定版本，已经具有了对CSS选择符、事件处理和AJAX交互的稳健支持。

jQuery 1.1

（2007年1月）：这一版大幅简化了API。许多较少使用的方法被合并，减少了需要掌握和解释的方法数量。

jQuery 1.1.3

（2007年7月）：这次小版本变化包含了对jQuery选择符引擎执行速度的显著提升。从这个版本开始，jQuery的性能达到了Prototype、Mootools以及Dojo等同类JavaScript库的水平。

jQuery 1.2

（2007年9月）：这一版去掉了对XPath选择符的支持，原因是相对于CSS语法它已经变得多余了。这一版能够支持对效果的更灵活定制，而且借助新增的命名空间事件，也使插件开发变得更容易。

jQuery UI（2007年9月）：这个新的插件套件是作为曾经流行但已过时的Interface插件的替代项目而发布的。jQuery UI中包含大量预定义好的部件（widget），以及一组用于构建高级元素（例如可拖放的界面元素）的工具。

jQuery 1.2.6

（2008年5月）：这一版主要是将Brandon Aaron开发的流行的Dimensions插件的功能移植到了核心库中。

jQuery 1.3

（2009年1月）：这一版使用了全新的选择符引擎Sizzle，库的性能也因此有了极大提升。这一版正式支持事件委托特性。

jQuery 1.3.2

（2009年2月）：这次小版本升级进一步提升了库的性能，例如改进了：visible/:hidden选择符、.height()/.width()方法的底层处理机制。另外，也支持查询的元素按文档顺序返回。

jQuery 1.4

（2010年1月14号）：对代码库进行了内部重写组织，开始建立一些风格规范。老的core.js文件被分为attribute.js,css.js,data.js,manipulation.js,traversing.js和queue.js；CSS和attribute的逻辑分离。

重要变化：

1. Ajax重写

Ajax模块完全进行了重写。新增一个jXHR对象，为不同浏览器内置的XMLHttpRequest提供了一致的超集。对于XMLHttpRequest之外的传输机制，比如JSONP请求，jXHR对象也可以进行处理。（详情可以参见：jQuery.ajax文档）

此外，系统的可扩展性大大增强，可以附加各种数据处理器、过滤器和传输机制，为开发新的Ajax插件提供了方便。

2. 延迟对象

延迟对象（Deferred Object，jQuery.Deferred对象）是一个可链接的（chainable）实用工具对象，实现了Promise接口，可以在回调队列中注册多个回调、调用回调队列并转发任何同步/异步函数的成败状态。正如Using Deferreds in jQuery 1.5一文中说明的，其结果是在jQuery中能够将依赖于某个任务（事件）结果的逻辑与任务本身解耦了。这一点在JavaScript中其实并不新鲜，Mochikit和Dojo等已经实现有些日子了。由于jQuery 1.5的Ajax模块内置使用了延迟对象，因此通过jQuery编写Ajax程序将自动获得这一功能。

开发人员借此可以使用无法立即获得的返回值（如异步Ajax请求的返回结果），而且第一次能够附加多个事件处理器。

例如，使用了新的jQuery内部Ajax API就可以实现下面的代码了：

// Assign handlers immediately after making the request,// and remember the jxhr object for this request var jxhr = $.ajax({ url: "example.php" }) .success(function() { alert("success"); }) .error(function() { alert("error"); }) .complete(function() { alert("complete"); });// perform other work here ... // Set another completion function for the request above jxhr.complete(function(){ alert("second complete"); });

此外，使用jQuery.Deferred还可以开发自己的延迟对象。更多详情参见：延迟对象文档。

3. jQuery.sub()

jQuery 1.5提供了一种创建和修改jQuery副本的方式。可以用来添加不向外部公开的方法，或者对jQuery的某些方法进行重新定义以提供新功能，或者提供更好的封装、避免名称空间冲突。当然，也可以用来开发插件，但Resig强烈建议在开发插件之前，先考虑jQuery UI widget工厂。

值得注意的是，sub函数并不提供真正的隔离，所有方法、数据、调用仍然依靠jQuery本身来支持。

4. 遍历性能提高

在新版本中.children(),.prev(),.next()几个常用的遍历函数性能有了显著提高。

5. 内部开发系统

John Resig还特别提到了jQuery团队内部开发系统的两点改变：一是服务器端用Node.js替换了老的Java/Rhino系统，使得团队可以专注于JavaScript环境的新变化；二是所用的代码优化程序从Google Closure切换到UglifyJS，新工具的压缩效果非常令人满意。

使用方法

jQuery可以下载使用，有两个版本的 jQuery 可供下载

Production version - 用于实际的网站中，已被精简和压缩。

Development version - 用于测试和开发（未压缩，是可读的代码）

jQuery 1.8.0版时压缩前后的对比

插件机制

jQuery的官方插件是jQuery UI。开发者可以任意扩展jQuery的函数库或者按照自己的需求开发UI组件。网上已经有数以万计的jQuery插件，覆盖各种各样的需求。例如Ajax辅助、数据表格、动态列表、XML工具、拖曳、cookie处理、弹出层等等。jQuery 的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择,例如ComponentOne Studio for ASP NET Wijmo.

随着jQuery插件在网站建设过程中的使用率不断的增加，所以有必要跟进时代步伐开发出一些新的插件/代码片段，以此来巩固并提高前端用户体验，将用户体验提升到一个新的高度。其中包括Flat jQuery Price Slider、Gmaps jQuery Map Plugin 、FormChimp——MailChimp Ajax plugin for jQuery 等。

控件

jQuery Gantt控件是一个基于原生HTML5/jQuery，功能丰富的控件，该控件真正实现了跨平台，在许多设备和浏览器中无缝的运行。

使用项目甘特图中内置的调度，依赖等功能实现任务分层列表的可视化。

使用资源甘特图实现一个资源利用视图。

使用基于API的jQuery或者基于API的MVC可帮您轻松地安装甘特图并加快应用速度。

可与诸如KnockOut(KO),jQuery.tmpl等流行的jQuery模式一同使用。

jquery滑块拖动验证插件使用

文章参考自： 链接

需要jq币，鉴于经常逛jQuery插件库，花了30大洋买了100jq币，发现开发还是挺费钱的，，，哈哈

搞定

此插件直接使用可能不是很适合具体业务需求，可以根据自身需要修改slide-unlock.css样式文件，比如说将#slider中的margin: 100px auto;改成margin: 10px auto;这样margin值减小为10px，可能更适合

如何创建一个自定义jQuery插件

jQuery 库是专为加快 JavaScript 开发速度而设计的。通过简化编写 JavaScript 的方式，减少代码量。使用 jQuery 库时，您可能会发现您经常为一些常用函数重写相同的代码。如果这样的话，这可能就是您需要编写自定义 jQuery 插件的一个原因。

jQuery 插件允许您使用自定义代码扩展 jQuery 库；您可以对一些重复性函数使用插件。例如，很多插件可供幻灯片、下拉菜单和折叠菜单所用。如果您搜索 jQuery 插件，就会发现有大量可用于自己项目的示例（看看它们是如何构建的）。

常用缩略词

CSS：层叠样式表

HTML：超文本标记语言

在本文中，您将学习如何快速创建一个自定义 jQuery 插件。示例代码和逐步操作将为您演示如何创建一个 jQuery accordion 插件。如果您了解 jQuery，而且准备让您的技能再上一个台阶，这篇文章非常适合您。

您可以在此 下载 本文所用的示例源代码。

先决条件

本文假设您对 JavaScript、jQuery 和层叠样式表有一个基本了解。请参阅 参考资料 了解更多有关先决条件的信息。

回页首

准备开始

jQuery 是一个可扩展 JavaScript 语言的库。当您创建一个 jQuery 插件时，本质上是在扩展这个 jQuery 库。要真正了解插件如何扩展 jQuery 库需要对 JavaScript prototype 属性有一个基本了解。尽管不直接使用，但是 JavaScript prototype 属性可通过 jQuery 属性 fn 在后台使用，这是原生 JavaScript prototype 属性的一个 jQuery 别名。

要使用 fn 属性创建一个新 jQuery 插件，只需要为 fn 属性分配一个插件名，并将其指向一个充当构造函数的新函数，类似于纯 JavaScript。清单 1 中的代码显示了如何定义一个名为 accordion 的新 jQuery 插件，其方法是通过使用 jQuery 对象和 fn 属性，并将其分配给一个新的构造函数。

清单 1. 定义一个名为 accordion 的新 jQuery 插件

jQuery.fn.accordion = function() {

// Add plugin code here

};

清单 1 展示了创建 jQuery 插件的一种方法；该示例没有什么功能性错误。但是，创建一个 jQuery 插件所推荐的方法是，先创建一个允许使用美元符号 ($) 的包装器函数。在默认情况下，美元符号可能与其他 JavaScript 框架发生冲突，如果将插件包装在一个函数中，就不会出现冲突。清单 2 中的示例代码显示如何将一个包装器函数应用到一个 jQuery 插件定义中。

清单 2. 在一个包装器函数中包装一个名为 accordion 的新 jQuery 插件

(function($) {

$.fn.accordion = function() {

// Add plugin code here

};

})(jQuery);

在清单 2 中，jQuery 关键字被应用到包装器函数中，这允许您在插件中使用美元符号，就像使用 fn 属性时那样。包装器函数就绪后，就可以在整个插件的任何地方使用美元符号代替 jQuery 关键字，不会干扰其他第三方插件。该选项提供了一种方法使我们可以在开发整个插件中编写较少的代码，并且有助于您的插件代码保持整洁，易于维护。

回页首

维护链接性

jQuery 的一个优势是允许您使用任何类型的选择器。但是，必须记住，您的插件可以处理几种不同的元素类型。使用 this 关键字允许您的插件应用于相关函数，通过循环实现每个元素的访问，而不考虑元素类型。如果在 each 循环前使用 return 关键字，就可以使用您的插件维护链接性。清单 3 显示了分配给一个函数处理程序且与 return 关键字相结合的 each 循环。

清单 3. 在 each 循环之前使用 return 关键字

(function($) {

$.fn.accordion = function() {

return this.each(function() {

// Using return allows for chainability

});

};

})(jQuery);

有了清单 3 的代码后，示例 accordion 插件可用在一个方法调用链中。有了链接性（另一个强大的 jQuery 特性），您的插件就可用在一个方法调用链中。例如，下面的代码显示了如何淡出 HTML 元素，并在单一的方法调用链中将其从文档对象模型 (DOM) 中删除。

$("#my-div").fadeOut().remove();

回页首

构造一个 accordion

一个典型的层叠设计包括标题栏和相关内容区域。定义列表是一个可供 accordions 使用的很好的 HTML 结构；dt 元素供标题所用，而dd 元素供内容区域所用。清单 4 中的 HTML 结构是一个定义列表，含有四个标题以及相应的内容区域。

清单 4. 单一方法调用链

dl class="accordion" id="my-accordion"

dtSection 1/dt

ddMauris mauris ante, blandit et, ultrices a, suscipit eget, quam./dd

dtSection 2/dt

ddVestibulum a velit eu ante scelerisque vulputate./dd

dtSection 3/dt

ddNam mi. Proin viverra leo ut odio. Curabitur malesuada./dd

dtSection 4/dt

ddVivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc./dd

/dl

清单 4 中定义的列表也有一个分配给它的名为 accordion 的 CSS 类。没有应用任何 CSS，这个 accordion

1. 没有应用任何 CSS 的 accordion 结构

accordion 类用于将类型应用到整个定义列表、标题和内容区域。在清单 5 的示例中，accordion 类本身应用于宽度、边框、字体集和字体大小。清单 5 的示例中。您可以修改任何一个正在运行的 CSS 示例以包含您自定义的风格，比如颜色、字体、大小和间距。

清单 5. 用于定义整个定义列表样式的 accordion CSS 类

.accordion {

width: 500px;

border: 1px solid #ccc;

border-bottom: none;

font-family: Arial, Helvetica, sans-serif;

font-size: 12px;

}

然后，您可以使用 accordion CSS 类定义标题 (dt) 和内容 (dd) 样式。标题和内容都包含一个设置底边框为 0 的共享样式，这允许标题栏和内容区域相互适宜地放置，如清单 6 所示。

清单 6. 与 accordion 标题和内容区域相关联的共享样式

.accordion dt,

.accordion dd {

border-bottom: 1px solid #ccc;

margin: 0px;

}

为了使 dt 元素看起来更像一个标题栏，设置一个背景色并添加一个指针光标，明显地呈现给用户该标题栏是可点击的。各种其他样式也都包括在这些类中，比如填充、字体大小和字体粗细。dd 元素添加了填充，将描述与标题隔开一点。清单 7 显示了一个示例。

清单 7. 与 accordion 标题和内容区域相关的 CSS 类

.accordion dt {

background: #eaeaea;

cursor: pointer;

padding: 8px 4px;

font-size: 13px;

font-weight: bold;

}

.accordion dd {

padding: 12px 8px;

}

有了这些增加的 CSS，视觉效果将会更完美、更像 accordion

如何安装jQuery插件

在html中引入jquery插件的方法有以下两种：

1：CDN引入，在head标签中加入下列代码

head

script src=""/script

/script

/head

2：本地引入,这种方法要求本地有jquery.js：

head

script src="jquery.js"/script

/script

/head

jquery可以到其官网下载，官网地址是;

JQuery是继prototype之后又一个优秀的Javascript库。它是轻量级的js库 ，它兼容CSS3，还兼容各种浏览器。推荐使用CDN,许多用户在访问其他站点时，已经从其他加载过 jQuery。所有结果是，当他们访问您的站点时，会从缓存中加载 jQuery，这样可以减少加载时间。同时，大多数 CDN 都可以确保当用户向其请求文件时，会从离用户最近的服务器上返回响应，这样也可以提高加载速度。