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',"");

转载于:https://www.cnblogs.com/sjqq/p/6400657.html

jQuery 插件开发指南相关推荐

  1. 【转载】jQuery插件开发精品教程,让你的jQuery提升一个台阶

    jQuery插件开发精品教程,让你的jQuery提升一个台阶 要说jQuery 最成功的地方,我认为是它的可扩展性吸引了众多开发者为其开发插件,从而建立起了一个生态系统.这好比大公司们争相做平台一样, ...

  2. jQuery插件开发教程

    jQuery插件开发精品教程,让你的jQuery提升一个台阶 要说jQuery 最成功的地方,我认为是它的可扩展性吸引了众多开发者为其开发插件,从而建立起了一个生态系统.这好比大公司们争相做平台一样, ...

  3. JavaScript学习笔记(四)——jQuery插件开发与发布

    jQuery插件就是以jQuery库为基础衍生出来的库,jQuery插件的好处是封装功能,提高了代码的复用性,加快了开发速度,现在网络上开源的jQuery插件非常多,随着版本的不停迭代越来越稳定好用, ...

  4. jQuery插件开发 - 其实很简单

    [前言] jQuery已经被广泛使用,凭借其简洁的API,对DOM强大的操控性,易扩展性越来越受到web开发人员的喜爱,我在社区也发布了很多的jQuery插件,经常有人询问一些技巧,因此干脆写这么一篇 ...

  5. jquery 插件开发的作用域及基础

    2019独角兽企业重金招聘Python工程师标准>>> 之前一直有开发jquery插件的冲动,所以一直想学习如何进行插件开发,最近一个项目需要使用图片上传组件及自动无限下拉组件,百度 ...

  6. jQuery插件开发学习笔记

    今天想了解一下jQuery的插件开发,于是google了一下,列在前面的两篇文章都很不错,jQuery插件开发全解析 更是将插件开发的方方面面细致入微的进行了讲解,并提供了PDF进行下载.笔者今天详细 ...

  7. jQuery权威指南(第2版)

    为什么80%的码农都做不了架构师?>>>    jQuery权威指南(第2版) 本书由国内资深web技术专家亲自执笔,4大web开发社区一致鼎力推荐,权威性毋庸置疑.内容新颖,基于j ...

  8. jQuery插件开发(一):jQuery类方法

    一.jQuery插件开发的方法 jQuery插件的编写方法主要有两种: 1.基于jQuery对象的插件 2.基于jQuery类的插件 二.基于jQuery类的插件 1.什么是jQuery类的插件? j ...

  9. jQuery插件开发的两种方法及$.fn.extend的详解

    2019独角兽企业重金招聘Python工程师标准>>> 作者: 字体:[增加 减小] 类型:转载 时间:2014-01-16 我要评论 jQuery插件开发分为两种:1 类级别.2 ...

最新文章

  1. HDU 6058 - Kanade's sum | 2017 Multi-University Training Contest 3
  2. 华为SDSec分为几层
  3. vue如何获取数组中的键值_vue中操作数组的相关方法
  4. wxpython控件如何自动调整大小_wxpython:自动调整静态图像(staticbitmap)的大小以适应大小...
  5. 计算机科学与技术mobi,080901-计算机科学和技术.PDF
  6. matlab信号内插,基于VC++和Matlab的数字信号内插处理系统
  7. android在java下建立模块,Android Studio:如何在Android模块中包含Java模块?
  8. 关于MDI窗体的那些问题
  9. javafx实现读者文摘上的文章预览及下载
  10. 分布式保存Session 和 StateServer 解决 Session过期
  11. war3鸿蒙大陆攻略,【魔兽rpg地图失落大陆攻略汇总】
  12. mysql 逗号_在MySQL字段中使用逗号分隔符的方法分享
  13. 基于Linux下的apache Web 服务
  14. 叽歪网CEO:创业路上也要学会忙中偷闲
  15. SPLAYER中文字幕乱码
  16. unity SteamVR利用手柄合理移动
  17. hexo 修改index.html,hexo--新建页面、修改主页
  18. OpenJudge-2152:Pots
  19. Android 计步器实现
  20. Scrapy爬取二手房成交记录并进行数据分析与展示(一)

热门文章

  1. 在保存Bitmap的时候出现“GDI出现一般性错误”
  2. 如何计算代码的运行性能
  3. 第1次在Flash Builder中写程序
  4. Flutter CustomScrollView实现的一个经典滑动折叠头部图片的效果
  5. Flutter异步编程async与await的基本使用
  6. Laravel使用EasyWechat 进行微信支付
  7. 03 ansible核心模块 之 文件类型模块
  8. HDU 6446 Tree and Permutation(赛后补题)
  9. 动态BGP和静态BGP的含义与区别
  10. JS组件系列——封装自己的JS组件