jQuery 插件开发指南
更新时间：2014年11月14日 11:14:06 投稿：hebedich
jQuery凭借其简洁的API，对DOM强大的操控性，易扩展性越来越受到web开发人员的喜爱，经常有人询问一些技巧，因此干脆写这么一篇文章给各位jQuery爱好者，算是抛砖引玉吧。
那么首先我们来简单的看一下最正统的 jQuery 插件定义方式：
复制代码 代码如下:
(function ($) {
$.fn.插件名 = function (settings) {
//默认参数
var defaultSettings = {
} /* 合并默认参数和用户自定义参数 */
settings = $.extend(defaultSettings, settings);
return this.each(function () { //代码 }); //插件在元素内多次出现
} })(jQuery);
先来看模板中的第一行代码（当然我们要把这一行代码的后半部分给揪出来一起看，不然第一行就完全无意义了）：
复制代码 代码如下:
(function ($) {
})(jQuery);
这行代码其实是用于创建一个匿名函数。如果你对匿名函数和闭包不了解，将会对这种代码非常疑惑，那么强烈建议您阅读【详谈JavaScript 匿名函数及闭包】这篇文章。
jQuery 的继承方法 $.extend —— $.extend 在jQuery 插件开发中有个很重要的作用，就是用于合并参数。
复制代码 代码如下:
$.fn.tip = function (settings) {
var defaultSettings = {
//颜色
color: 'yellow',
//延迟
timeout: 200 }
/* 合并默认参数和用户自定义参数 */
settings = $.extend(defaultSettings, settings);
alert(settings.input); <br>}
jQuery 插件定义第二种方式：
复制代码 代码如下:
(function ($) {
//插件定义--更换名字
$.fn.tabpanel = function (method) {
var methods = $.fn.tabpanel.methods;
if (methods[method]) {
return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
} else if (typeof method === 'object' || !method) {
return methods.init.apply(this, arguments);
} else {
}
}
//支持的方法
$.fn.tabpanel.methods =
{
//初始化
init: function (p_options) {
tabpanelBind(p_options, this);
},
add: function (p_options) {
addTab(p_options, this);
tabpanelBind(p_options, this);
// debugger
} }
function add(p_options) {
var _defaults = {
id: ""
}
<br> //内部实现略.........<br> return _index;
}
<br>})(jQuery);<br><br>调用 $("#team").tabpanel('add',"");
好了，上面介绍的这2种开发方式都是最常用的，小伙伴们先好好学习下吧，后续我们再介绍的更深入些
相关文章
jQuery插件HighCharts绘制2D金字塔图效果示例【附demo源码下载】
这篇文章主要介绍了jQuery插件HighCharts绘制2D金字塔图效果,结合实例形式分析了jQuery使用HighCharts插件绘制金字塔图效果的操作步骤与相关实现技巧,并附带demo源码供读者下载参考,需要的朋友可以参考下2017-03-03
这篇文章通过示例为大家介绍了使用jquery解析XML的方法,经测试比较实用，需要的朋友可以参考下2014-09-09
jquery api参考 visualjquery 中国线路 速度快
jquery api参考 visualjquery 中国线路 速度快...2007-11-11
这篇文章主要介绍了jQuery HTML设置内容和属性操作,结合实例形式分析了jQuery HTML设置内容和属性相关函数与操作注意事项,需要的朋友可以参考下2020-05-05
这篇文章主要为大家介绍了jQuery初识之设计思想及方法函数示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-06-06
本文给大家分享jquery自适应窗口大小导航菜单，也是一款响应式的导航菜单，有深色样式、浅色样式、自定义样式，接下来，需要的学习的小伙伴参考此文吧2015-09-09
在做ajax登录时候遇到的一个问题，当传入参数含有特殊字符，比如：“$'#@”等。参数传递会有问题，无法正确获取。本文章向码农介绍jQuery ajax特殊字符参数解决方法，需要的朋友可以参考一下。2016-10-10
最近用jQuery来写下拉框的选项值的左右移动，放到jsp里面就不能用了，经过测试终于找到了解决方法在此与大家分享下2013-08-08
JQuery的重要性对一个coder来说应该是不言而喻的， 多少次在应聘的时候被问及是否会JQuery；多少次在写脚本的时候因为浏览器的不兼容而吐血；多少次因为需要用脚本做一个简单的效果而写到手抽筋。JQuery出现后，很多问题都被轻易解决了。2010-07-07
懒加载技术(简称lazyload)并不是新技术，它是js程序员对网页性能优化的一种方案。lazyload的核心是按需加载。在大型网站中都有lazyload的身影，例如谷歌的图片搜索页，迅雷首页，淘宝网，QQ空间等。2011-01-01
最新评论