jquery插件的开发包括两种:一种是类级别的插件开发,即给jquery添加新的全局函数,相当于给jquery类本身添加方法。

jQuery的全局函数就是属于jquery命名空间的函数,另一种是对象级别的插件开发,即给jQuery对象添加方法。

也可以理解为另外两种方式,一种是jQuery本身的扩展方法,另一种是jQuery所选对象的扩展方法。

1.jQuery.extend(Object);   // jQuery 本身的扩展方法

2.jQuery.fn.extent(Object);    // jQuery 所选对象扩展方法

下面就两种函数的开发做详细的说明。


1、类级别的插件开发

类级别的插件开发最直接的理解就是给jQuery类添加类方法,

可以理解为添加静态方法。典型的例子就是$.AJAX()这个函数,将函数定义于jQuery的命名空间中。

关于类级别的插件开发可以采用如下几种形式进行扩展:

1.1 添加一个新的全局函数

[javascript] view plaincopy
  1. $.foo = function(){
  2. alert("foo");
  3. }
  4. //调用方法
  5. $.foo();

1.2 使用jQuery.extend(object);

[javascript] view plaincopy
  1. $.extend({
  2. foo:function(){
  3. alert("foo");
  4. },
  5. bar:function(){
  6. alert("bar");
  7. }
  8. })
  9. //调用方法
  10. $.foo();
  11. $.bar();

1.3 使用命名空间

[javascript] view plaincopy
  1. $.myPlugin = {
  2. foo:function(){
  3. alert("foo");
  4. },
  5. bar:function(){
  6. alert("bar");
  7. }
  8. }
  9. //调用方法
  10. $.myPlugin.foo();
  11. $.myPlugin.bar();

2、对象级别的插件开发

[javascript] view plaincopy
  1. $.fn.foo = function(){
  2. alert("hello jquery");
  3. }
  4. $('#myF').foo()
[javascript] view plaincopy
  1. (function($){
  2. $.fn.extend({
  3. pluginName:function(opt,callback){
  4. alert("foo");
  5. }
  6. })
  7. })(jQuery);
  8. $("#myF").pluginName();
[javascript] view plaincopy
  1. (function (jq) {
  2. jq.fn.foo = function (obj) {
  3. alert(obj);
  4. };
  5. })(jQuery)
  6. $("#myF").foo("hello jquery");

jquery扩展方法相关推荐

  1. JavaScript 自执行函数和 jQuery扩展方法

    我们通常将JS代码写在一个单独的JS文件中,然后在页面中引入该文件.但是,有时候引入后会碰到变量名或函数名与其它JS代码冲突的问题.那么如何解决这个问题呢?作用域隔离.在JS中,作用域是通过函数来划分 ...

  2. 使用jquery获取url及url参数的方法及定义JQuery扩展方法

    1.jquery获取url很简单,代码如下: window.location.href; 其实只是用到了javascript的基础的window对象,并没有用jquery的知识. 2.jquery获取 ...

  3. 表单验证Jquery扩展方法类

    /** 表单数据验证 **/ $.fn.Validform = function () {var Validatemsg = "";var Validateflag = true; ...

  4. jquery function_前端基础进阶(十三)详细图解jQuery扩展jQuery插件

    UI 鉴赏 早几年学习前端,大家都非常热衷于研究jQuery源码. 我至今还记得当初从jQuery源码中学到一星半点应用技巧的时候常会有一种发自内心的惊叹,"原来JavaScript居然可以 ...

  5. JQuery添加扩展方法(理解$.extend(),与$.fn.extend()方法区别)

    为什么80%的码农都做不了架构师?>>>    理解$.extend(),与$.fn.extend()方法区别 1.$.extend()方法 $.extend()方法在JQuery中 ...

  6. jquery订阅发布插件代码草稿,为jquery扩展jquery.publish,jquery.subscribe方法

    jquery订阅发布插件代码草稿! jquery订阅发布插件代码草稿,为jquery扩展jquery.publish,jquery.subscribe方法 --- jquery订阅发布插件代码草稿 & ...

  7. jquery和zepto的扩展方法extend

    jquery和zepto的扩展方法extend 总结下jQuery(3.1.1)和zepto(1.1.6)到底是如何来开放接口,使之可以进行扩展,两者都会有类型判断,本文使用简单的类型判断,暂不考虑兼 ...

  8. jquery的扩展方法介绍

    最近一直在写js,这其中也少不了一位js的主角了jQuery,下面介绍的是jQuery的一些扩展,也就是jQuery的扩展方法,jQuery的扩展方法有两种方式,一种是jQuery本身的扩展方法,另一 ...

  9. jquery中方法扩展 ($.fn $.extend) 学习笔记

    A.$.fn 1.$.fn.method() 函数为jQuery对象扩展一个属性和方法(主要用于扩展方法) :method 为自定义方法名 ($.fn 等效 $.prototype) 1 $.fn.b ...

最新文章

  1. 写的书太受欢迎怎么办?北大《深度强化学习》重磅开放下载
  2. Deepfacelab的填坑之旅
  3. 例题 3-5 生成元 digit generator
  4. 泛型之类型擦除和桥接方法
  5. linux mysql多实例启动_Mysql实例Linux下启动多个mysql服务器例子
  6. windows命令查看端口占用情况
  7. css中的一些选择器的用法总结
  8. js中的getDate() getMonth() getFullYear()方法;js如何获取当前日期/年月日
  9. Halcon深度学习-目标检测-Rectangle1
  10. UFS-Net: A unified flame and smoke detection method for early detection of fire in video surveillanc
  11. 综述:视频和图像去雾算法以及相关的图像恢复和增强研究
  12. 2023新UI付费测算程序源码+宝宝起名/星座运势等等
  13. matlab存储excel数据,怎么把matlab表格数据写入excel-怎么把matlab中处理的数据存入到excel中...
  14. 【Java就业培训教材】——集合的学习
  15. ESP32设备驱动-LX1972可见光传感器驱动
  16. 网页链接无法使用微信内置浏览器打开的解决方案,实现微信跳转外部浏览器打开网页
  17. x86、x64、32位和64位
  18. IBM虚拟化与云计算研究员吴玉会——虚拟化三大优势详解:共享、优化、管理...
  19. java 闹钟代码_java开发之闹钟的实现代码
  20. 快播公司已破产注销;ChatGPT 之父警告:AI 可能灭绝人类;苹果官方:618 将开启全球首次直播|极客头条

热门文章

  1. linux嗅探器抓包,Kali Linux 嗅探/欺骗工具 driftnet 教程
  2. 鼠标悬浮图片放大特效
  3. wooyun常见ssrf总结+常见ssrf绕过姿势
  4. <ctime>, clock()
  5. 快速排序法(C语言实现)
  6. IDISPLAY_SetDestination函数遇到的问题
  7. 腾讯qq2014官方正式版 v5.3.10723 免费版
  8. 从搜索引擎看商业智能BI
  9. 小程序 获取带参数太阳码的参数,并解析出来(wxacode.getUnlimited)
  10. 飞猪2018年度旅行报告:小镇青年全球玩 没什么能够阻挡