jQuery插件本质上是将命名空间挂在全局的jQuery或jQuery.fn上而非使用define定义的模块。 JQuery的这种扩展机制同模块化要求模块的独立性，以及模块互相隔离有点冲突。
jQuery插件数目众多，我们不打算做大量的转换工作，为模块化而模块化，甚至改变插件的调用方式， 这样对开发带来的价值不大。只希望通过模块加载器实现自动的依赖管理，按需加载，并且使用方式自然。
1.常见的jQuery插件的模块化方式
把jquery插件作为一个函数返回，带一个jquery参数，由调用者完成插件的初始化。
以jquery-themeswitch插件为例子，该插件依赖jquery.cookie插件。
/* jquery-themeswitch.js */
define(function(require) {
return function(jQuery) {
//先初始化依赖的模块
require('./jquery.cookie')(jQuery);
//put plugin code here
}//end of function
2.jquery模块化后调用方式
下面的demo对模块的引用采用相对路径，实际的业务开发中可以通过seajs提供的alias来重命名
(1)模块内部使用
var $ = require('./libs/jquery');
require('./libs/jquery-themeswitch')($);
require('./libs/jquery-ui')($);
//demo涉及jquery ui组件
$(document).ready(function(){
//在DOM加载完成时运行代码
$('#elem').themeswitcher();
(2)在script代码片段中
seajs.use(['./libs/jquery','./libs/jquery-themeswitcher', './lib/jquery-ui'],
function ($, themeswitcher,jqueryui){
themeswitcher($);
//init jquery plugin
jqueryui($);
$(function(){
//dom ready调用的另外一种方式
$('#elem').themeswitcher()
优缺点对比：
优点： * 依赖管理自动化 * 支持多个版本的jQuery使用。（需要这个优点吗？)
缺点： * 每次调用一次require('plugin')($),会重新初始化一次插件 * 调用方式也不是很方便,调用代码不是很直观
提示：可以在jQuery中添加一个cachedPlugins对象来保存加载过的插件模块id来防止重复加载
3.另外一种插件模块化方式
假定我们去掉jquery多版本的支持，让每个jquery插件模块返回$，看看代码调用方式是否会更自然一些。 另外每个模块只能被编译一次，利用该特性，我们还可以做到让每个插件只会被初始化一次。
说明：模块编译过程就是构建模块的exports的过程。
还以themeswitcher为例子：
jquery-theme-switcher.js
define(function (require, exports, module) {
var jQuery
= require('./jquery');
require('./jquery-cookie');
//put plugin in code here
(1)模块内部使用
require('./libs/jquery-ui');
//可以不处理返回值
var $ = require('./libs/jquery-themeswitch')
//返回的还是$
$(function(){
$('#elem').themeswitcher();
(2)在script代码片段中
seajs.use(['./libs/jquery-themeswitcher', './lib/jquery-ui'],function ($){
$(function(){
$('#elem').themeswitcher()
4.简化jquery插件的引用
如果你使用的插件比较多，还可以通过这样的方式来简化jquery插件的引用。 定义一个myjquery.js
define(function(require) {
require('some-plugin1');
//会自动加载相关的依赖插件
require('some-plugin2');
//如果记不清依赖关系，重复require也没有影响。
require('some-plugin3');
return require('some-plugin');
//每个插件模块都会返回$,取最后一个返回就可以了。
在其他的业务代码中，你只需要引入自己定制好的myjquery.js即可。 注意不要在该文件中引入过多的模块，避免影响性能，其他不常用的插件可以按需加载。
define(function(require) {
require('./myjquery');
//所有你定制加载的插件都已经初始化好了
//do something
下载次数: 121
web322_szb
浏览: 18993 次
来自: 深圳
非常感谢！
(window.slotbydup=window.slotbydup || []).push({
id: '4773203',
container: s,
size: '200,200',
display: 'inlay-fix'如何在vue里面正确的引用 jquery 和 第三方插件_百度知道
如何在vue里面正确的引用 jquery 和 第三方插件
答题抽奖
首次认真答题后
即可获得3次抽奖机会，100%中奖。
妈妈煮的小面条
妈妈煮的小面条
采纳数：205
获赞数：40982
1、首先在package.json里加入，dependencies:{&jquery& : &^2.2.3&}然后 nmp install2、在webpack.base.conf.js里加入var webpack = require(&webpack&)3、在module.exports的最后加入复制代码plugins: [new webpack.optimize.CommonsChunkPlugin('common.js'),new webpack.ProvidePlugin({jQuery: &jquery&,$: &jquery&})]复制代码4、然后一定要重新 run dev。5、在需要使用的地方 引入就ok了import $ from 'jquery'vue-cli引入外部文件（自己下载好的第三方的插件）在 webpack.base.conf.js 中添加externalsexternals 中 swiper 是键，对应的值一定的是插件 swiper.js 所定义的变量 Swiper :、之后再在根目录下的index.html文件里引入文件：&script src=&static/lib/swiper.js&&&/script&这样子就可以在需要用到swiper.js的文件里加入这行代码：import Swiper from 'swiper'，这样就能正常使用了。
为你推荐：
其他类似问题
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件 - 简书
如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件
使用vue-cli构建的vue项目，webpack的配置文件是分散在很多地方的，而我们需要修改的是build/webpack.base.conf.js，修改两处的代码
// 在开头引入webpack，后面的plugins那里需要
var webpack = require('webpack')
// resolve
module.exports = {
// 其他代码...
resolve: {
extensions: ['', '.js', '.vue'],
fallback: [path.join(__dirname, '../node_modules')],
'src': path.resolve(__dirname, '../src'),
'assets': path.resolve(__dirname, '../src/assets'),
'components': path.resolve(__dirname, '../src/components'),
// webpack 使用 jQuery，如果是自行下载的
// 'jquery': path.resolve(__dirname, '../src/assets/libs/jquery/jquery.min'),
// 如果使用NPM安装的jQuery
'jquery': 'jquery'
// 增加一个plugins
plugins: [
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery"
// 其他代码...
这样就可以正确的使用jQuery了，比如我要引入Bootstrap，我们在vue的入口js文件src/main.js开头加入
// 使用Bootstrap
import './assets/libs/bootstrap/css/bootstrap.min.css'
import './assets/libs/bootstrap/js/bootstrap.min'
这样Bootstrap就正确的被引用并构建。
在比如使用toastr组件，只需要在需要的地方import进来，或者全局引入css在需要的地方引用js，然后直接使用
// 使用toastr
import 'assets/libs/toastr/toastr.min.css'
import toastr from 'assets/libs/toastr/toastr.min'
toastr.success('Hello')
前几日听到一句生猛与激励并存，可怕与尴尬同在，最无奈也无解的话：“90后，你的中年危机已经杀到”。这令我很受触动。显然，这有些夸张了，但就目前这日复一日的庸碌下去，眨眼的功夫，那情形就会在这骨感的现实面前，悄然的被显现。所以，越发体验到，当必要有计划的去做，去写，去玩，去嗨...
DIY 一个自己的音乐播放器 - 前端 - 掘金前言：在最近的一个外包项目中包联盟(PC端)中使用到了video，遇到了好多坑。突发奇想来踩一踩audio的坑?，果然一入深似海，?下面将分享我的DIY之路-Vue音乐播放器。注：本项目为开源项目，不能用于商业应用，仅供学习。...
玩转 NPM - 前端 - 掘金自从转向了Node开发之后，对于NPM的熟悉程度越来越高，这一篇文章希望可以让大家都能“玩转NPM”。 做为Node世界里的包管理器，我想大家从Grunt时代起就已经熟练的使用npm install命令来安装一些依赖完成前端自动化构建任务。但...
低仿饿了么 H5 - 纯前端 Vue 版 + 手把手教学 - 前端 - 掘金低仿饿了么H5-纯前端Vue版+手把手教学 这是一个低仿饿了么H5的纯前端练手，数据是伪造的，写的比较粗糙，写这个的目的是为了加深一下熟练度，半年前看到别人写的仿cnodejs网站，我也用vue1仿...
Vue.js 自定义指令的用法与实例 - 前端 - 掘金市面上大多数关于Vue.js自定义指令的文章都在讲语法，很少讲实际的应用场景和用例，以致于即便明白了怎么写，也不知道怎么用。本文不讲语法，就讲自定义指令的用法。 自定义指令是用来操作DOM的。尽管Vue推崇数据驱动视图...
好无聊啊(。o?︿o?。) 又是要崩溃的节奏！！！！ 不知道能干什么该干什么 却又在幻想一切一切美好的事儿！？？？？ ………… ！！！！！！！！！！
随着微信在日常生活中比重的不断增加，取代了更多的直接的交流。为什么我们更愿意躲在手机后面，隔着电子屏幕，窥探别人的生活呢？ 朋友圈文化的发展，已经不再向刚开始的那么单纯，不止是基于分享，记录的功能了。而分享的初衷可能是为了告诉别人，我的生活出现了某些改变。而记录的功能更多的...
每日图鉴 · 彩铅教程 | 蓝莲花 作者：我爱铅笔画_木头 影视天堂 ·杨德昌的电影时代，转眼已十年 作者：弓谷所長 他被称为是台湾电影新浪潮的旗手。他的电影，在那个年代总是能够像一剂强心针，给罹患社会病症的世人以觉醒。也难怪杨德昌会被业内称为是“台湾社会的手术刀”。他的电...
这是一个学生公寓的营销项目，老板是位女同学，整个投资额前前后后约 20 万元。学生公寓有 3 名专职营业员， 20 个房间，主要面对周边学校的学生，日租金 60 元，钟点价格 4 小时 40 元，房间配置电视、宽代、热水器、电脑。由于刚开业，基本设施还算可以，比较新，干净卫...创建一个自定义 jQuery 插件
简介jQuery 库是专为加快 JavaScript 开发速度而设计的。通过简化编写 JavaScript 的方式，减少代码量。使用 jQuery 库时，您可能会发现您经常为一些常用函数重写相同的代码。如果这样的话，这可能就是您需要编写自定义 jQuery 插件的一个原因。
jQuery 插件允许您使用自定义代码扩展 jQuery 库；您可以对一些重复性函数使用插件。例如，很多插件可供幻灯片、下拉菜单和折叠菜单所用。如果您搜索 jQuery 插件，就会发现有大量可用于自己项目的示例（看看它们是如何构建的）。
在本文中，您将学习如何快速创建一个自定义 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"&
&dt&Section 1&/dt&
&dd&Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam.&/dd&
&dt&Section 2&/dt&
&dd&Vestibulum a velit eu ante scelerisque vulputate.&/dd&
&dt&Section 3&/dt&
&dd&Nam mi. Proin viverra leo ut odio. Curabitur malesuada.&/dd&
&dt&Section 4&/dt&
&dd&Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc.&/dd&
&/dl&清单 4 中定义的列表也有一个分配给它的名为 accordion 的 CSS 类。没有应用任何 CSS，这个 accordion 结构看起来类似于图 1 中的基础设计。
图 1. 没有应用任何 CSS 的 accordion 结构accordion 类用于将类型应用到整个定义列表、标题和内容区域。在清单 5 的示例中，accordion 类本身应用于宽度、边框、字体集和字体大小。清单 5 的示例中。您可以修改任何一个正在运行的 CSS 示例以包含您自定义的风格，比如颜色、字体、大小和间距。
清单 5. 用于定义整个定义列表样式的 accordion CSS 类.accordion {
width: 500
border: 1px solid #
border-bottom:
font-family: Arial, Helvetica, sans-
font-size: 12
}然后，您可以使用 accordion CSS 类定义标题 (dt) 和内容 (dd) 样式。标题和内容都包含一个设置底边框为 0 的共享样式，这允许标题栏和内容区域相互适宜地放置，如清单 6 所示。
清单 6. 与 accordion 标题和内容区域相关联的共享样式 .accordion dt,
.accordion dd {
border-bottom: 1px solid #
}为了使 dt 元素看起来更像一个标题栏，设置一个背景色并添加一个指针光标，明显地呈现给用户该标题栏是可点击的。各种其他样式也都包括在这些类中，比如填充、字体大小和字体粗细。dd 元素添加了填充，将描述与标题隔开一点。清单 7 显示了一个示例。
清单 7. 与 accordion 标题和内容区域相关的 CSS 类 .accordion dt {
background: #
padding: 8px 4
font-size: 13
font-weight:
.accordion dd {
padding: 12px 8
}有了这些增加的 CSS，视觉效果将会更完美、更像 accordion，如图 2 所示。图 2. 一个应用自定义 CSS 的 accordion 结构自定义您的插件 要制作一个功能性 accordion，必须将自定义代码应用到您上一小节创建 jQuery 插件的函数。accordion 插件从遍历所有已定义的 accordion 开始。要定义一个 accordion，在 HTML 文档或外部嵌入式 JavaScript 文件中使用下列 jQuery。
$('dl#my-accordion').accordion();对于每个 Accordion，您可以使用 jQuery 的 children 方法访问相关定义的标题，返回一个数组或 dt 元素。应用一个 click 事件到 dt 元素，然后一个名为 reset 方法应用到每个 dt。accordion 首次加载时，该 reset 方法会折叠所有 dd 元素。单击 dt 元素或者标题栏时，click 事件会触发一个名为 onClick 的自定义方法。自定义 onClick 方法用于查找 accordion 中的所有 dt 元素。它调用一个自定义 hide 方法，该方法通过使用 next 方法找到紧挨着 dt 元素的 dd 元素，隐藏每个相关的 dd 元素，通过使用 next 方法找到紧挨着 dt 元素的 dd 元素，然后向上滑动激活它。所有 dd 元素被隐藏后，使用 slideDown 方法，就可以看见与单击过的 dt 元素相关的 dd 元素，并创建一个放大和收缩动画，如清单 8 所示。onClick 方法的最后一行代码是 return false，确保任何被点击的主题栏没有显现出其一般行为。例如，如果您使用一个 anchor 元素作为标题栏，您可能想要执行 return false，这样就不会将用户定向到另一个页面或现有页面的一部分。清单 8. 自定义用于创建一个 jQuery 插件的 accordion 函数 (function($) {
$.fn.accordion = function(options) {
return this.each(function() {
var dts = $(this).children('dt');
dts.click(onClick);
dts.each(reset);
function onClick() {
$(this).siblings('dt').each(hide);
$(this).next().slideDown('fast');
function hide() {
$(this).next().slideUp('fast');
function reset() {
$(this).next().hide();
})(jQuery);如果该 accordion 插件与一个 HTML 定义列表结构相关联时，比如您之前创建的那个 accordion 函数将被应用。有了 accordion 函数，单击一个标题栏或 dt 元素时，会打开其内容区域，而其他内容区域则关闭。换句话说，一次只能打开一个内容区域。
Defaults 和 optionsjQuery 插件可以包括 defaults 和 options。Options 本质上就是传递给插件的参数。可以使用 options 发送一个参数作为 object
literal，这是一个标准 jQuery 实践，而不需要传递多个参数。如果您的插件支持 options，使用 defaults 对象设置默认的 options 将是一个最佳方式。和 options 一样，defaults 是一个 object literal，应该包括您想要传递到插件中的属性。例如，如果您支持一个可用于在首次加载时打开 accordion 第一个内容区域的属性，那么在您的插件中应该包括一个 open 属性的默认值。在您的插件中使用 defaults 确定默认函数，使用 options 覆盖默认值。如果插件接收 options，可以使用 $.extend 方法执行覆盖。jQuery 的 $.extend 方法合并两个或多个对象。清单 9 中的示例显示在一个自定义 jQuery 插件中使用 $.extend 方法合并用户定义选项和默认选项的一般实现。
清单 9. 向一个自定义的 accordion jQuery 插件添加 options 和 defaults (function($) {
$.fn.accordion = function(options) {
var settings = $.extend({}, {open: false}, options);
return this.each(function() {
var dts = $(this).children('dt');
dts.click(onClick);
dts.each(reset);
if(settings.open) $(this).children('dt:first-child').next().show();
function onClick() {
$(this).siblings('dt').each(hide);
$(this).next().slideDown('fast');
function hide() {
$(this).next().slideUp('fast');
function reset() {
$(this).next().hide();
})(jQuery);$.extend 方法参数是一个目标对象和 2 个或多个合并对象。在本示例中，目标对象是一个空 object
literal，充当合并对象容器。目标将成为一个包含合并对象值的单一对象（在该案例中是 settings 变量）。第 2 个参数是一个包含默认插件属性的 object literal。第 3 个参数是用户定义的 options 参数。要在一个 HTML 元素上使用 accordion 插件传递 options，需要知道除了之前您作为 object literal 传递的属性外还有哪些属性，如下所示。
$('dl#my-accordion').accordion({open:true});在清单 9 示例中，传递到插件的 options 通过 $.extend 方法覆盖 defaults。如果没有传递 options，则使用默认值。对于示例插件，可使用
open 属性确定加载时是否打开第一个内容区域。
可重用性您可以在任何 HTML 文档中重用示例 accordion 插件，可以在单个 HTML 文档中多次使用。您也可以包括多个 accordion 结构，就像已创建的那个 accordion，使用刚创建的新 accordion 插件通过 jQuery 将每个单独定义为 accordion。要向一个 HTML 文档添加多个 accordion，只需要添加尽可能多的 accordion 结构。清单 10 中的代码包括两个 accordion 结构，由一个段落隔开。
清单 10. 在同一个 HTML 文档中使用多个 accordion &dl class="accordion" id="my-accordion"&
&dt&Section 1&/dt&
&dd&Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam.&/dd&
&dt&Section 2&/dt&
&dd&Vestibulum a velit eu ante scelerisque vulputate.&/dd&
&dt&Section 3&/dt&
&dd&Nam mi. Proin viverra leo ut odio. Curabitur malesuada.&/dd&
&dt&Section 4&/dt&
&dd&Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc.&/dd&
&p&Lorem ipsum dolor sit amet, consectetur adipiscing elit.&/p&
&dl class="accordion" id="my-accordion2"&
&dt&Section 1&/dt&
&dd&Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam.&/dd&
&dt&Section 2&/dt&
&dd&Vestibulum a velit eu ante scelerisque vulputate.&/dd&
&/dl&清单 10 中的两个 accordion 结构几乎一样，除了内容不一样外，更重要的是 ID 值也不一样。第一个结构包含一个 my-accordion ID 值。第 2 个结构包含一个 my-accordion2 ID 值。现在可以单独定向这些结构。例如，下列 jQuery 脚本使用已创建的新插件将每个 accordion 结构定义为一个 accordion。
$('dl#my-accordion').accordion({open:true});
$('dl#my-accordion2').accordion({open:true});两个 accordion 结构定义完成后，第一个面板默认设置为打开，图 3 显示一个用在同一个 HTML 文档的多个 accordion 插件的示例。
图 3. 用在同一个 HTML 文档的多个 accordion 结构
组合在一起在创建新定制的 jQuery accordion 插件，编写 CSS，并放置好 HTML 标记之后，您就可以将它们组合起来放在一个最终的 Web 页面中。要使 jQuery accordion 插件正常运行，必须嵌入 jQuery 库。我更倾向于使用 Content Delivery Network (CDN)，根据用户地理位置分发库，以最快的方式交付文件。Google 在其自身的 CDN 中包括 jQuery 库，您可以使用 URL https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js 将文件嵌入到您的 Web 页面中。
该库的其他版本也是可用的。请参阅
中有关 Google 开发人员网站上获取这些库的链接。其他文件中，只有那些需要在您 HTML 文档中引用的文件是 CSS 文件，设计成 accordion 和 jQuery accordion 插件样式。在此之后，实际 accordion 结构的 HTML 标记将被转换。清单 11 显示了一个示例。
清单 11. 将两个 accordion 结构定义为 jQuery accordion&!DOCTYPE HTML&
&meta http-equiv="Content-Type" content="text/ charset=UTF-8"&
&title&Creating a Custom jQuery Plugin&/title&
&link type="text/css" rel="stylesheet" href="jquery.accordion.css" /&
&script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"&
&script type="text/javascript" src="jquery.accordion.js"&&/script&
&script type="text/javascript"&
$(document).ready(function() {
$('dl#my-accordion').accordion({open:true});
$('dl#my-accordion2').accordion({open:true});
&dl class="accordion" id="my-accordion"&
&dt&Section 1&/dt&
&dd&Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam.&/dd&
&dt&Section 2&/dt&
&dd&Vestibulum a velit eu ante scelerisque vulputate.&/dd&
&dt&Section 3&/dt&
&dd&Nam mi. Proin viverra leo ut odio. Curabitur malesuada.&/dd&
&dt&Section 4&/dt&
&dd&Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc.&/dd&
&p&Lorem ipsum dolor sit amet, consectetur adipiscing elit.&/p&
&dl class="accordion" id="my-accordion2"&
&dt&Section 1&/dt&
&dd&Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam.&/dd&
&dt&Section 2&/dt&
&dd&Vestibulum a velit eu ante scelerisque vulputate.&/dd&
&/html&结束语在本文中，您已了解到创建一个自定义 jQuery 插件非常容易。您创建的任何可重复函数都可以迅速转化成一个插件，从而加快开发速度并提高开发效率。可重用性是任何插件的关键，可重用性意味着生产率的提高。
下载资源 (custom-jquery-plugin.zip | 3KB)相关主题“”（developerWorks，2002 年 7 月）：这篇文章介绍了 JavaScript 实现 DOM 的方法，并描述了 Web 页面的构建，用户可以向这个页面添加并编辑注释内容。
“”（developerWorks，2011 年 4 月）：阅读这篇文章了解基本 JavaScript 概念。
“”（developerWorks，2011 年 8 月）：获取 JavaScript 语言中可用内在对象的一个基本了解。
“”（developerWorks，2011 年 2 月）：学习在最新浏览器上使用的新技术。
：探索文章、博客和论坛。
：获取 jQuery 库的一个 CDN 版本。
：找到各种基于 Web 的解决方案的文章。访问
获得大量的技术文章、技巧、教程、标准和 IBM 红皮书。：下载或
并开始使用来自 DB2®、Lotus®、Rational®、Tivoli® 和 WebSphere® 的应用程序开发工具和中间件产品。
添加或订阅评论，请先或。
有新评论时提醒我
static.content.url=http://www.ibm.com/developerworks/js/artrating/SITE_ID=10Zone=Web developmentArticleID=844853ArticleTitle=创建一个自定义 jQuery 插件publish-date=