1. 插件种类
插件其实就是对现有的方法(或者叫函数)做一个封装,方便重用提高开发效率。
jQeury主要有2种类型
1)实例对象方法插件
开发能让所有的jQuery实例对象都可以调用的方法。也就是说,只要通过$()工厂获得
的jQuery实例对象,都可以调用我们开发的方法。95%的插件都是这种类型
2)全局函数插件
可以将独立的函数添加到jQuery命名空间中了。那么调用的时候就可以使用 $.函数名
称() 或者jQuery.函数名称()来调用了。可以理解为静态方法。
2. 添加全局函数
我们可以将jQuery理解为类,$是这个类的别名。开发全局函数就是开发这个类的
静态方法。如:$.get() ,$.post()。添加新的全局函数,实际上就是扩展jQuery“类”本身,
给jQuery命名空间上添砖加瓦.
加入新添加的全局函数的名称是sayHello,功能是弹出一个hello的对话框.
2.1增加一个全局函数
jQuery.sayHello=function(name){ alert("你好,"+name); } 调用: $.sayHello('张三'); 或者 jQuery.sayHello("李四");
2.2增加多个全局函数
使用jQuery提供的全局函数extend来一次加入多个函数
jQuery.extend({ sayHello:function(name){ alert("你好"+name); }, sayBye:function(name){ alert("再见"+name); } } )
上面的代码是往jQuery命名空间中添加了两个函数sayHello和syBye,调用同上
2.3命名空间
前面的方式有可能与jQuery命名空间中的其它函数产生命名冲突的危险,也有可能
与其它jQuery插件中定义的方法重名,所以我们可以考虑将我们定义的所有的函数封装
到一个对象中去,相当于为我们的函数给了一个命名空间
代码如下:
jQuery.wq={ sayHello:function(name){ alert("你好"+name); }, sayBye:function(name){ alert("再见"+name); } }
这种写法可以这样来理解: 首先我们为jQuery添加了一个wq属性,而这个属性本
身是一个对象,后面我们使用JSON来定义了一个对象,这个对象有两个方法。
所以调用就是如下形式:
调用:
$.wq.sayHello("王五"); jQuery.wq.sayBye("赵六");
注意:即使页面中包含了jQuery文件,也不应该认为简写形式”$”是始终有效的。
因为”$” 只是一个别名而已,其它的库可以重新定义这个”$” .所以在定义插件的时候,
最好使用jQuery来调用方法,或者重新定义”$”
3. 为jQuery实例对象创建新方法
对所有的jQuery实例对象中的方法进行扩展。
3.1一次定义一个方法
jQuery.fn.sayHello=function(){ alert("你好!"); } 调用: $("div").sayHello();
3.2一次定义多个方法
前面一次定义一个方法太少,我们能不能一次多定义一些方法?jQuery库提供了
jQuery.fn.extend方法来一次定义多个方法
jQuery.fn.extend({ sayHello:function(){ alert("Hello"); }, sayBye:function(){ alert("Bye Bye"); } });
可以看到extend方法的参数实际上就是一个JSON格式的对象。
调用的时候可以如下调用:
$(“div”).sayHello() 和 $(“div”).sayBye();
4. 插件方法内部的this关键字说明
上面的写法相当于每一个jQuery实例都可以使用,这跟全局函数没有什么区别。而我们定义的实例方法往往是需要在特定的环境中使用的。所以我们在编写插件方法的时候,应该考虑对象方法的环境。“this”关键字在任何插件方法内部引用的都是当前的jQuery实例对象。所以可以在this上调用任何jQuery方法。需要注意的是:我们使用的jQuery选择符可能会选取多个元素,哪么“当前的jQuery实例”有可能是一个元素,多个元素或者零个元素。我们必须考虑到这种情况。
如果我们使用选择器选中了多个元素,那就可以使用each()方法来迭代每个元素,在each方法内部,再使用this,这个this指的就是每个HTML DOM 元素的引用。
5. 方法连缀
使用jQuery对象方法的时候,基本都能使用连缀的方式。那么我们使用插件的时候就必须为插件方法返回一个jQuery实例对象。
jQuery.fn.extend({ sayHello:function(){ alert("Hello"); return this; }, sayBye:function(){ alert("Bye Bye"); return this; } });
6. 为插件方法定义默认值
通过使用jQuery.extend()方法,可以方便提供随时可能被传入的参数覆盖的默认值,此时对方法的调用会大致保持相同.
注意:jQuery.extend方法在API中的两个地方都有,一个在【核心】.【插件机制】中有,并且只有一个参数。一个在【工具】.【数组和对象操作】中。
注意这里我们使用的是后者,形式为: jQuery.extend(target, object1)
它的作用是将后面对象中所有的属性和方法复制到前面对象中,即将object1中的属性和方法复制到target对象中。
所以我们在定义一个插件的时候,可以使用如下方式为插件方法指定默认值:
jQuery.fn.sayHello=function(properties){ var defaults={ name:"张三", age:20 }; jQuery.extend(defaults,properties); alert("第一个参数:"+defaults.name+" 第二个参数"+defaults.age); return this; }
这样一来,我们就可以这样来调用了
$("div").sayHello({ name:"李四", age:30 }); 或者: $("div").sayHello({ name:"王五" }); 或者: $("div").sayHello({ age:25 });
7. 插件开发技巧-闭包
我们在开发插件的过程中,是将代码写在了一个js文件中,那么这个js文件中有可能会定义很多的方法或者一些变量。那么这些方法或者变量就有可能与别的js文件中的变量或者方法冲突,那么如何将我们定义的js代码“暴露”一部分,隐藏一部分呢?也就是你虽然定义了,但是在其它地方访问不到,该暴露的暴露,不该暴露的就藏起来,要达到这个目的,就得用到“闭包“
那何为“闭包“?说简单点就是允许使用内部函数,即在函数中定义另外一个函数,而且内部函数可以访问在外部函数中声明的变量和其它内部函数。比如有如下定义:
//定义A函数
function A(){ //定义B函数 var B=function(){ alert("这是B"); } return B; //将B函数返回 } var c=A();//此时C就是B函数 c();//其实就是调用B函数
可以看到,内部函数B在包含它的A函数之外执行了,这就形成了闭包。也就是B在外部函数A返回之后被执行了,而当B执行的时候它仍然可以访问A中定义的局部变量和其它内部函数。
利用闭包的特性,我们可以将我们需要暴露的方法暴露出来,比如B,又可以隐藏一些局部变量和函数,比如在A中定义变量和函数,A以外的其它函数是不能访问的,但是B是可以访问的。
其实上面的代码就是先执行A函数,得到结果,这个结果又是一个函数,然后再执行B函数即
var c=A();
c();
既然我们的目的是想让B在A之外执行,那我们可以将代码做如下变通:
var C; function A(){ var B=function(){ alert("这是B函数"); } C=B;//将内部函数赋值给C }
//现在执行C,实际上就是B的执行C(); //弹出对话框 "这是B函数"
能不能从外面传个参数进去交给函数B呢?改写代码如下:
(function($){ //这里就可以使用$符号了..... //将B函数添加到JQuery的实例对象函数中 $.fn.B=function(){ alert("这是B函数"); } })(jQuery);
这段代码被浏览器加载就会被执行,jQuery作为参数传递进去交给了 $符号,所以内部就能使用$符号了,在代码中,我们使用$.fn为jQuery的实例对象添加了一个方法B,页面
上使用:
<script> $(document).ready(function(){ $("h1").B(); }); </script>
执行结果
所以常见的jQuery插件都是以下这种形式:
好处就在于代码内部定义的方法外部只有插件能够访问,这样就将一些代码隐藏起来了,该
暴露的插件方法暴露在外部了。
(function($){ //插件代码 })(jQuery)
相关推荐
这里提供最基础的jquery插件编辑方法,为jquery插件学习者提供帮助。
原创jquery快速学(五)常用的插件应用与编写。 本教程提供免费的源码与教学文档,欢迎广大朋友下载。
我们在编写js的时候,如果采用了jquery框架,当然很希望Eclipse能帮我们完成代码自动完成的功能了,但Eclipse默认只是支持js的代码自动完成,利用这个插件,可以让Eclipse支持jquery的代码自动完成功能(前提:...
plugin历史版本1、新的事件.on() .off()3、动画的改进1.42版介绍JQuery插件让Dreamweaver支持提示代码功能引入JQuery展开编辑本段简介 jQuery由美国人John Resig创建,至今已吸引了来自世界各地的众多javascript...
eclipse上支持jquery的插件,使eclipse能够提供jquery提示,更快编写jquery代码
NULL 博文链接:https://zhoucl.iteye.com/blog/1239737
这是一本带领你一步步编写自己的Jquery自定义插件或控件的好书,本书共14章,内容充实,是不本相当不错的前端开发学习资料
使用Jquery编写的一个Flash图片轮播插件,类似于百叶窗效果。 随机的特效有: 1、左上角缩小至0 2、分行slideUp 3、渐变 4、整体上移 5、整体下移 6、整体左移 7、整体右移 8、行阶梯性左移 9、行阶梯性右移 10、行...
jquery时间插件laydate,有范例,有使用说明,很实用,兼容性好。
编写jquery弹出框插件 自己制作 编写javascript
使用Jquery编写的一个Flash图片轮播插件,类似于百叶窗效果。 随机的特效有: 1、左上角缩小至0 2、分行slideUp 3、渐变 4、整体上移 5、整体下移 6、整体左移 7、整体右移 8、行阶梯性左移 9、行阶梯性...
可定制的实时搜索JQUERY插件是一款很简单的可定制的jquery搜索插件,与IE7 ,Chrome浏览器,火狐,Safari和jQuery1.8.1,1.9.1,1.11.0,2.1.0兼容。
jQuery 插件使客户端表单验证变得容易,同时仍然提供了大量的自定义选项。如果您要从头开始构建新的东西,或者当您试图将某些东西集成到具有大量现有标记的现有应用程序中时,它都是一个不错的选择。该插件捆绑了一...
写或读JS代码的时候总有些地方感觉模模糊糊的,于是花了点时间在网上找并稍微整理了一下
Zen.Coding-Dreamweaver.v0.6 zen.coding ...jQuery_api_for_dw4 dreamweaver cs4的jquery插件 DW5插件-jQuery_api_for_dwcs5 dreamweaver cs5的jquery插件 AdobeDreamweaver-11.0-All-Update dreamweaver的html5扩展
jQuery树状json数据转表格插件是一款使用原生ul以及jquery编写的插件。
采用jquery编写的一个表格树插件,具有单击行、双击行、右键列、固定头部、固定左侧等功能
这里只阐述如何编写自己的插件,至于要实现什么功能,要因人而异了…好了,下面开始… jQuery插件主要分为三种 1、封装对象方法的插件 2、封装全局函数的插件 3、扩展选择器的插件 这里只编写前俩种,即比较常见的.....
jQuery_api_for_dw4专门问dw4提供的自动提示插件、让你更方便的编写jQuery代码。
wcMotionChart是一款基于HTML5 Canvas的微信运动折线图jQuery插件。这款插件是网友LipsonChan在工作过程中编写的。通过该插件你可以制作出某段时间内的动态折线图信息,非常有用。