JQuery插件开发步骤
来源:互联网 发布:mac虚拟机怎么改成中文 编辑:程序博客网 时间:2024/05/21 00:45
一、jQuery扩展
1、$.extend(object)
类似于.Net的扩展方法,用于扩展jQuery。然后就可以用$.的方式调用。
$(function(){ $.extend({ fun1: function () { alert("为jQuery扩展一个fun1函数!"); } }); $.fun1(); })2、$.fn.extend(object)
扩展jQuery的对象。
$.fn.extend({ fun2: function () { alert("执行方法2"); } }); $("#id1").fun2();上面的写法等同于:
$.fn.fun2 = function () { alert("执行方法2"); } $(this).fun2();
二、私有域
其定义方式如下:(function ($) { })(jQuery);//相当于var fn = function (xxoo) { };fn(jQuery);以下代码弹出123。
$(function(){ var fn = function (xxoo) { }; fn(alert(123)); })
三、定义插件的基本步骤
1、定义作用域开发一个jQuery插件,首先要把插件的代码与外界隔离开来,外部的代码不允许直接访问插件内部的代码,插件内部的代码也不影响外部。
//步骤1 定义插件私有作用域 (function ($) { })(jQuery);这样就能保证插件内部的代码与外界隔离了。
2、扩展jQuery类和jQuery对象
为插件添加全局函数和Jquery对象方法
1)添加全局函数(扩展jquery类本身):
//步骤1 定义私有作用域 (function ($) { $.sum=function(array){ //..... } })(jQuery); //在使用这个插件的全局方法sum时,使用$.sum();添加多个函数
//步骤1 定义私有作用域 (function ($) { $.sum=function(array){ //..... } $.average=function(array){ //...(此处即可使用$.sum()函数) } })(jQuery);利用$.extend()函数,扩展全局jQuery对象
(function ($) { $.extend({ sum: function(array){ //代码 }, average: function(array){ //代码 } }); })(jQuery);利用命名空间隔离函数
本质是为插件所有的全局函数创建了一个命名空间,叫做jQuery.mathUtils,虽然还称之为全局函数,但实际上已经是mathUtils对象的方法。
(function ($) { $.mathUtils = { sum: function(array){ //代码 }, average: function(array){ //代码 } }; })(jQuery); 调用时: $.mathUtils.sum(); $.mathUtils.average();2)添加jquery对象方法(扩展jquery对象)
定义了作用域之后,为了能够让外部调用,就需要将插件扩展到jQuery。
//步骤1 定义私有作用域 (function ($) { //步骤2 插件的扩展方法名称 $.fn.MyFrame = function (options) { } })(jQuery); //使用这个插件时候:$("#btn").MyFrame(options);3、默认值
定义了jQuery插件之后,如果希望某些参数具有默认值,那么可以以这种方式来指定。
//步骤1 定义私有作用域 (function ($) { //步骤3 插件的默认值属性 var defaults = { Id: '#id1', }; //步骤2 插件的扩展方法名称 $.fn.MyFrame = function (options) { //步骤3 合并用户自定义属性,默认属性(如果options为空,则使用defaults) var options = $.extend(defaults, options); } })(jQuery);4、支持jQuery选择器
//步骤1 定义私有作用域 (function ($) { //步骤3 插件的默认值属性 var defaults = { Id: '#id1', }; //步骤2 插件的扩展方法名称 $.fn.MyFrame = function (options) { //步骤3 合并用户自定义属性,默认属性(如果options为空,则使用defaults) var options = $.extend(defaults, options); } //步骤4 支持jQuery选择器 this.each(function () { }); })(jQuery);5、支持jQuery的链式调用
//步骤1 定义私有作用域 (function ($) { //步骤3 插件的默认值属性 var defaults = { Id: '#id1', }; //步骤2 插件的扩展方法名称 $.fn.MyFrame = function (options) { //步骤3 合并用户自定义属性,默认属性(如果options为空,则使用defaults) var options = $.extend(defaults, options); } //步骤4 支持jQuery选择器 //步骤5 支持链式调用(将步骤4返回) return this.each(function () { }); })(jQuery);
6、插件内部方法
//步骤1 定义私有作用域 (function ($) { //步骤3 插件的默认值属性 var defaults = { Id: '#id1', }; //步骤6 在插件里定义函数 var MyFun = function (obj) { alert(obj); } //步骤2 插件的扩展方法名称 $.fn.MyFrame = function (options) { //步骤3 合并用户自定义属性,默认属性(如果options为空,则使用defaults) var options = $.extend(defaults, options); } //步骤4 支持jQuery选择器 //步骤5 支持链式调用(将步骤4返回) return this.each(function () { //步骤6 在插件里定义函数 MyFun(this); }); })(jQuery);
7、回调函数在方法中使用回调函数,需要接受一个函数作为参数,然后在方法中适当的位置上调用该函数。
//步骤1 定义私有作用域 (function ($) { //步骤3 插件的默认值属性 var defaults = { Id: '#id1', callback:function(result){//定义回调函数 return .....; } }; //步骤6 在插件里定义函数 var MyFun = function (obj) { alert(obj); } //步骤2 插件的扩展方法名称 $.fn.MyFrame = function (options) { //步骤3 合并用户自定义属性,默认属性(如果options为空,则使用defaults) var options = $.extend(defaults, options); } //步骤4 支持jQuery选择器 //步骤5 支持链式调用(将步骤4返回) return this.each(function () { var result=options.callback(..)//调用回调函数 //步骤6 在插件里定义函数 MyFun(this); }); })(jQuery);
jquery插件模板参考:http://ourjs.com/detail/52be911dd17d41eb0b000025
阅读全文
0 0
- jQuery:插件开发步骤
- JQuery插件开发步骤
- jquery插件编写步骤
- JQuery插件开发 + 插件
- 开发c#插件步骤
- jeecmsv6插件开发步骤
- Cordova插件开发3步骤
- Jquery系列---Jquery插件开发
- 【jquery】jquery插件的开发
- 【jQuery】jQuery自定义插件开发
- jQuery插件开发-(function($){...})(jQuery)
- jquery开发:jquery插件编写
- jquery 插件开发小组
- jquery插件开发方法
- Jquery插件开发
- jquery插件开发方法
- jQuery插件开发(转载)
- jquery插件开发方法
- linux系统使用Rsync+sersync实现文件实时同步
- JAVA 与 Python 脚本间相互调用实例
- Active Learning
- Bootstrap多级菜单
- Unable to compile JSP
- JQuery插件开发步骤
- Linux安装MariaDB
- Git命令行首次提交项目
- java学习----死锁演示
- MFC——窗口子控件全部使能或者禁用
- What causes java.lang.IncompatibleClassChangeError?
- [github]二、使用ssh连接github
- 面向对象
- SVM实现多分类的三种方案