博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
实现jQuery扩展总结
阅读量:4612 次
发布时间:2019-06-09

本文共 1829 字,大约阅读时间需要 6 分钟。

开发自己需要的jQuery插件,看个示例说明

jQuery插件的开发包括两种:

 

  1. 一种是类级别的插件开发,即给jQuery添加新的全局函数,相当于给jQuery类本身添加方法。jQuery的全局函数就是属于jQuery命名空间的函数,
  2. 另一种是对象级别的插件开发,即给jQuery对象添加方法。下面就两种函数的开发做详细的说明。

1、类级别的插件开发

类级别的插件开发最直接的理解就是给jQuery类添加类方法,可以理解为添加静态方法。典型的例子就是$.AJAX()这个函数,将函数定义于jQuery的命名空间中。关于类级别的插件开发可以采用如下几种形式进行扩展:

 

//1.1定义一个全局函数jQuery.foo = function() {  alert('添加一个新的全局函数');}//定义多个全局函数jQuery.bar = function() {  alert('再增加一个全局函数');}//1.2使用extend定义全局函数jQuery.extend({  foo1:function() {    alert('extend 定义全局函数1');  },  bar1:function() {    alert('extend 定义全局函数2');  }});//1.3 使用命名空间定义函数jQuery.plugin = {  foo2:function() {    alert('使用namespace定义函数');  }}$(function(){$.foo();$.bar();$.foo1();$.bar1();$.plugin.foo2();});

 

2、对象级别的插件开发

对象级别的插件开发需要如下的两种形式:

 

//形式一(function($){  $.fn.extend({    foo3:function() {      alert('对象级别插件extend方式1');  },    bar3:function() {      alert('对象级别插件extend方式2');  }})})(jQuery);//形式二(function($){  $.fn.foo4 = function() {    alert('对象级别插件fn方式');  }})(jQuery);//接收参数来控制插件的行为(function($){  $.fn.bar4 = function(options) {    var defaults = {aaa:'1',bbb:'2'};    var opts = $.extend(defaults, options);    alert('参数值:aaa:'+opts.aaa+';bbb:'+opts.bbb);  }})(jQuery);//提供公有方法访问插件的配置项值(function($){  $.fn.foo5 = function(options) {        var opts = $.extend({}, $.fn.foo5.defaults, options);    alert('参数值:aaa:'+opts.aaa+';bbb:'+opts.bbb);}$.fn.foo5.defaults = {aaa:'1',bbb:'2'};})(jQuery);//提供公有方法来访问插件中其他的方法(function($){  $.fn.bar5 = function(options) {    $.fn.bar5.alert(options);  }  $.fn.bar5.alert = function(params) {    alert(params);  }})(jQuery);$(function(){$('#test').foo3();$('#test').bar3();$('#test').foo4();$('#test').bar4();$('#test').bar4({aaa:'3'});$('#test').bar4({aaa:'3',bbb:'4'});$('#test').foo5();$('#test').foo5({aaa:'5',bbb:'6'});$('#test').bar5('aaaa');});

 

转载于:https://www.cnblogs.com/178mz/p/5695708.html

你可能感兴趣的文章
Java 8 Lambda 表达式
查看>>
BZOJ-3289 Mato的文件管理
查看>>
自旋锁和互斥锁的区别
查看>>
react混合开发APP,资源分享
查看>>
入门篇
查看>>
【洛谷1829】 [国家集训队] Crash的数字表格(重拾莫比乌斯反演)
查看>>
[转]免费api大全
查看>>
git 认证问题之一的解决 : http ssh 互换
查看>>
sql where 1=1作用
查看>>
搜索算法----二分查找
查看>>
Python语言编程
查看>>
[poj 1469]Courses
查看>>
Xcode8出现AQDefaultDevice(173):Skipping input stram 0 0 0x0
查看>>
数据结构(二十四)二叉树的链式存储结构(二叉链表)
查看>>
Material Design Lite,简洁惊艳的前端工具箱 之 布局组件。
查看>>
关于bootstrap Modal弹窗 滚动条的问题
查看>>
Django----------路由控制
查看>>
将数字转化为字符串的快捷方式
查看>>
java23种设计模式
查看>>
冲刺周期一--站立会议04
查看>>