文档章节

详解jQuery插件开发方式

码农般的学良
 码农般的学良
发布于 2016/11/23 13:49
字数 1137
阅读 12
收藏 0
点赞 0
评论 0

Query插件开发 

一般来说,jQuery插件的开发分为两种:一种是挂在jQuery命名空间下的全局函数,也可称为静态方法;另一种是jQuery对象级别的方法,即挂在jQuery原型下的方法,这样通过选择器获取的jQuery对象实例也能共享该方法。

一、jQuery扩展

  1、$.extend(object)

  类似于.Net的扩展方法,用于扩展jQuery。然后就可以用$.的方式调用。

?

1

2

3

4

$(function(){

$.extend({ fun1: function () { alert("为jQuery扩展一个fun1函数!"); } });

$.fun1();

})

  2、$.fn.extend(object)

  扩展jQuery的对象。

?

1

2

$.fn.extend({ fun2: function () { alert("执行方法2"); } });

$("#id1").fun2();

  可以用google来看看:

  上面的写法等同于:

?

1

2

$.fn.fun2 = function () { alert("执行方法2"); }

$(this).fun2();

二、私有域

  其定义方式如下:

?

1

2

3

4

(function ($) { })(jQuery);

//相当于

var fn = function (xxoo) { };

fn(jQuery);

  以下代码弹出123。

?

1

2

3

4

$(function(){

var fn = function (xxoo) { };

fn(alert(123));

})

三、定义插件的基本步骤

  1、定义作用域

  开发一个jQuery插件,首先要把插件的代码与外界隔离开来,外部的代码不允许直接访问插件内部的代码,插件内部的代码也不影响外部。

    //步骤1 定义插件私有作用域

?

1

2

3

(function ($) {

 

})(jQuery);

 这样就能保证插件内部的代码与外界隔离了。

  2、扩展jQuery

  定义了作用域之后,为了能够让外部调用,就需要将插件扩展到jQuery。

?

1

2

3

4

5

6

7

//步骤1 定义私有作用域

 (function ($) {

 //步骤2 插件的扩展方法名称

 $.fn.MyFrame = function (options) {

   

 }

 })(jQuery);

    3、默认值

  定义了jQuery插件之后,如果希望某些参数具有默认值,那么可以以这种方式来指定。

?

1

2

3

4

5

6

7

8

9

10

11

12

//步骤1 定义私有作用域

 (function ($) {

 //步骤3 插件的默认值属性

 var defaults = {

  Id: '#id1',

 };

 //步骤2 插件的扩展方法名称

 $.fn.MyFrame = function (options) {

  //步骤3 合并用户自定义属性,默认属性(如果options为空,则使用defaults)

  var options = $.extend(defaults, options);

 }

 })(jQuery);

     4、支持jQuery选择器

?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

//步骤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

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

//步骤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

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

//步骤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);

    由于作用域关系,步骤6的私有函数目前允许的插件内部使用。

 以上就是本文的全部内容,希望对大家有所帮助,谢谢对脚本之家的支持!

您可能感兴趣的文章:

© 著作权归作者所有

共有 人打赏支持
码农般的学良
粉丝 1
博文 20
码字总数 23265
作品 0
通州
jquery常用的插件1000收集

花N长时间积累的Jquery插件,希望大家喜欢。大家还有什么新的插件,请留言,我们一并收录。 感谢大家的支持。 1.accordion类 基于jQuery开发,非常简单的水平方向折叠控件。 Horizontal acc...

Alic
2011/03/07
0
6
HTML Jquery EasyUI日期选择框的使用详解

jQuery EasyUI是基于JQuery的一个前台ui界面的插件,功能相对没extjs强大,但页面也是相当好看的。一些功能也足够开发者使用,相对于extjs更轻量。以下是开发中经常使用的HTML Jquery EasyU...

Amamatthew
2014/09/11
0
0
SeaJS中jQuery插件模块化及其调用方式

jQuery插件本质上是将命名空间挂在全局的jQuery或jQuery.fn上而非使用define定义的模块。 JQuery的这种扩展机制同模块化要求模块的独立性,以及模块互相隔离有点冲突。 jQuery插件数目众多,...

brivio
2014/03/15
0
0
JQuery.extend函数使用详解 $.extend

jQuery为开发插件提供了两个方法,分别是: 1. jQuery.fn.extend():给jQuery对象提供方法。 2. jQuery.extend():为扩展jQuery类本身添加方法。 先看源码是怎么实现的,截取自JQuery-1.11.0...

Josean_Luo
2014/04/11
0
1
自定义jQuery插件Step by Step

自定义jQuery插件Step by Step 1.1.1 摘要 随着前端和后端技术的分离,各大互联网公司对于Mobile First理念都是趋之若鹜的,为了解决网页在不同移动设备上的显示效果,其中一个解决方案就是R...

wolf_su
2013/07/04
0
0
20个值得开发人员关注的jQuery技术博客

John Resig - http://ejohn.org 毫无疑问,jQuery的缔造者的博客是你首先必须关注的。 2. Filmament Group Lab 这个也是必看之一,因为jQuery UI类库就出自这个网站。 3. Learning jQuery 老...

李长春
2011/11/14
0
0
jquery的extend和fn.extend

jQuery为开发插件提拱了两个方法,分别是: jQuery.fn.extend(object); jQuery.extend(object); jQuery.extend(object); 为扩展jQuery类本身.为类添加新的方法。 jQuery.fn.extend(object);给...

crazyinsomnia
2010/01/10
0
1
十个jQuery图片画廊插件推荐

jQuery的画廊插件可以将分组图像和多媒体资料转成类似Flash的图像或照片。当幻灯片已经成为网站的重要组成部分,jQuery的重要性不能被忽视。下面为你介绍了10个最有美感,创新性和创造性的j...

迷路的阿修罗
2010/12/30
0
0
JQuery插件开发教程 | WhyJQuery

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

柒月-小妖精
2013/11/14
0
1
从零开始学 Web 之 jQuery(一)jQuery的概念,页面加载事件

大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:http://www.cnblogs.com/lvonve/ CSDN...

fengdaoting
07/04
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

python以太坊类库web3.py概览

python通过web3.py库与以太坊交互共同入口是web3对象。web3对象提供API接口,python开发应用与以太坊进行交互如钱包创建、支付、转账等连接JSON-RPC服务器进行。 Providers提供者 Providers使...

智能合约
刚刚
0
0
【Android学习笔记】设置App启动页

先将启动页放到项目资源中,图片一般是1080*1920的jpg。 新建一个activity,如图: 创建成功之后,打开刚刚创建的activity,来进行代码的编写: >>>阅读全文

全部原谅
1分钟前
0
0
什么是React-redux、为什么使用React-redux、怎么使用React-redux

1、什么是React-redux React-redux是用于连接React和Redux的 2、为什么使用React-redux 使用React-redux可以使redux部分代码更简洁更明了,比如组建中需要使用到的数据都在mapStateToProps方...

kimyeongnam
4分钟前
0
0
Spring核心——Stereotype组件与Bean扫描

在注解自动装载中介绍了通过注解(Annotation)自动向Bean中注入其他Bean的方法,本篇将介绍通过注解(Annotation)向容器添加Bean的方法。 Spring的核心容器提供了@Component和@Bean注解来标...

随风溜达的向日葵
4分钟前
0
0
利用世界杯,读懂 Python 装饰器

Python 装饰器是在面试过程高频被问到的问题,装饰器也是一个非常好用的特性, 熟练掌握装饰器会让你的编程思路更加宽广,程序也更加 pythonic。 今天就结合最近的世界杯带大家理解下装饰器。...

猫咪编程
8分钟前
0
0
flink fold example

flink fold例子 import org.apache.flink.api.common.functions.*;import org.apache.flink.streaming.api.datastream.DataStream;import org.apache.flink.streaming.api.environment.S......

coord
9分钟前
0
0
c++ qt 组播总结

每个人都有不同的认知规律和习惯, 有的人喜欢搞一套严密的大理论, 论述起来滔滔不绝, 不管自己懂不懂, 反正读者/听者是没搞懂。 有的人喜欢从实践出发, 没看到代码, 不运行一下, 不看...

backtrackx
13分钟前
0
0
Sublime text2安装json格式化插件SublimePrettyJson[Windows]

一、下载SublimePrettyJson插件包 https://github.com/dzhibas/SublimePrettyJson 二、将下载的文件解压放到在package目录下面 C:\Users\lucky\AppData\Roaming\Sublime Text 3\Packages 每个......

lazy~
13分钟前
0
0
安装vue-cli 报4058错误

1. 4058是网络代理错误。 安装淘宝源修改一下就可以了: npm --registry https://registry.npm.taobao.org info underscore 改为cnpm执行: cnpm install --global vue-cli 安装成功: 试试版...

MrBoyce
14分钟前
0
0
CPU飙升分析

1、top -----看具体的进程 2、top -H -p pid ------该进程的线程 3、printf 0x%x 15248 ------将线程改为16进制 4、jstack 进程...

北极之北
17分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部