关键词:
在实际开发工作中,总会碰到像滚动,分页,日历等展示效果的业务需求,对于接触过jQuery
以及熟悉jQuery
使用的人来说,首先想到的肯定是寻找现有的jQuery
插件来满足相应的展示需求。目前页面中常用的一些组件,都有多种jQuery
插件可供选择,网络上也有很多专门收集jQuery
插件的网站。利用jQuery
插件确实可以给我们的开发工作带来便捷,但是如果只是会简单使用,而对其中的原理不甚了解,那么在使用过程中碰到问题或者对插件进行定制开发时就会有诸多疑惑。本文的目的就是可以快速了解jQuery
插件的开发原理以及掌握jQuery
开发的基本技能。
进行jQuery
插件开发前,首先要知道两个问题:什么是jQuery
插件?jQuery
插件如何使用?
第一个问题,jQuery
插件就是用来扩展jQuery
原型对象的一个方法,简单来说就是jQuery
插件是jQuery
对象的一个方法。其实回答了第一个问题,也就知道第二个问题的答案了,jQuery
插件的使用方式就是jQuery
对象方法的调用。
我们先看个例子:$("a").css("color","red")
。我们知道每个jQuery
对象都会包含jQuery
中定义的DOM
操作方法,这里使用$
方法来选择a
元素,返回一个a
元素的jQuery
对象,这个对象就可以使用jQuery
中定义的DOM
操作方法。那么jQuery
对象是如何获取这些方法的呢?其实jQuery
内部定义了一个jQuery.fn
对象,查看jQuery
源码可以发现jQuery.fn=jQuery.prototype
,也就是说jQuery.fn
对象是jQuery
的原型对象,jQuery
的DOM
操作方法都在jQuery.fn
对象上定义的,然后jQuery
对象就可以通过原型继承这些方法。
基础版jQuery插件
知道了上面这些知识,我们就可以来写一个简单的jQuery
插件。假如我现在需要一个jQuery
插件用来改变标签内容颜色,就可以按下面的方式来实现这个插件:
$.fn.changeStyle = function(colorStr){
this.css("color",colorStr);
}
然后按下面的方式来使用插件:
$("p").changeStyle("red");
插件调用的时候,插件内部的this
就是当前调用插件的jQuery
对象,这样的话每个使用$()
方法选择的标签,在调用changeStyle()
插件时都会使用css()
方法重设color
样式。
满足链式调用的jQuery插件
链式调用时jQuery
的一大特色,一个通用的插件应该遵循jQuery
风格,满足链式调用要求。实现链式调用的方式也很简单:
$.fn.changeStyle = function(colorStr){
this.css("color",colorStr);
return this;
}
然后使用的时候就可以链式调用其他方法了:$("p").changeStyle("red").addClass("red-color");
实现链式调用的关键点就一行代码return this
,插件中加了这行代码,那么在插件执行完之后,就会把当前的jQuery
对象返回,然后就可以在插件方法后面继续调用其它jQuery
方法。
防止$符号污染的jQuery插件
有很多js
库都会使用$
符号,虽然jQuery
可以使用jQuery.noConflict()
方法交出$符号的使用权,但是如果定义插件的时候,使用$.fn
对象来定义的,那么这些插件使用的时候就会受到其它使用$
变量的js
库的影响。对于这种情况,我们可以使用立即执行函数通过传参的方式封装插件。形式如下:
(function($){
$.fn.changeStyle = function(colorStr){
this.css("color",colorStr);
return this;
}
}(jQuery));
因为使用了立即执行函数,所以此时的$
只属于这个立即执行函数的函数作用域,这样就可以避免$
符号的污染。
可以接受参数的jQuery插件
继续上面的例子,假如我还想为这个插件添加一个设置标签元素内容文字大小的功能,那么我可以这么来实现:
(function($){
$.fn.changeStyle = function(colorStr,fontSize){
this.css("color",colorStr).css("fontSize",fontSize+"px");
return this;
}
}(jQuery));
上面这种插件传参方式适用于参数比较少的情况,如果需要传给插件内部的参数比较多,我们可以定义一个参数对象,然后把需要传给插件的参数放在参数对象中。插件定义时如下:
(function($){
$.fn.changeStyle = function(option){
this.css("color",option.colorStr).css("fontSize",option.fontSize+"px");
return this;
}
}(jQuery));
使用方式:$("p").changeStyle({colorStr:"red",fontSize:14});
把参数放到一个对象中传给插件还有一个好处就是我们可以在插件内部为一些参数定义一些缺省值,例如:
(function($){
$.fn.changeStyle = function(option){
var defaultSetting = { colorStr:"green",fontSize:12};
var setting = $.extend(defaultSetting,option);
this.css("color",setting.colorStr).css("fontSize",setting.fontSize+"px");
return this;
}
}(jQuery));
上面的代码用到了$.extend
方法,这个方法在这里的用法就是合并两个对象,即把后面一个对象的存在的属性值赋值给第一个对象,具体用法可以参考这里。$.extend
方法还有一种作用是用来扩展jQuery
对象本身。
这样定义的插件,我们在使用时如果不传fontSize
,那么使用这个插件的jQuery
对象标签的内容会被设置成默认的12px
。
使用方式:$("p").changeStyle({colorStr:"red"});
注意:在为插件定义默认参数时,一定要把默认参数写在插件方法内部,这样默认参数的作用域就在插件内部。
总结
定义插件的方式除了上面说的用$.fn
来定义,还有另外一种方式来定义插件,那就是使用$.fn.extend
方法。类似下面的写法:
(function($){
$.fn.extend({
changeStyle:function(option){
var defaultSetting = { colorStr:"green",fontSize:12};
var setting = $.extend(defaultSetting,option);
this.css("color",setting.colorStr).css("fontSize",setting.fontSize+"px");
return this;
}
});
}(jQuery));
PS:
$.extend
方法和$.fn.extend
方法都可以用来扩展jQuery
功能,通过阅读jQuery
源码我们可以发现这两个方法的本质区别,那就是$.extend
方法是在jQuery
全局对象上扩展方法,$.fn.extend
方法是在$
选择符选择的jQuery
对象上扩展方法。所以扩展jQuery
的公共方法一般用$.extend
方法,定义插件一般用$.fn.extend
方法。
作者:留七七
链接:http://www.jianshu.com/p/518d424d4994
來源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
jquery插件开发:jquery类方法
一、jQuery插件开发的方法 jQuery插件的编写方法主要有两种: 1、基于jQuery对象的插件 2、基于jQuery类的插件二、基于jQuery类的插件 1、什么是jQuery类的插件? jQuery类方法其实就是jquery全局函数,即jquery对象... 查看详情
编写jquery插件
...后,将方法进行打包,封闭成一个插件,这种类型的插件编写简单,极易调用,也很方便地使用了jQuery中功能强大的选择器,因此,成为开发插件的首选. 查看详情
jquery插件开发全解析
jQuery插件的开发包括两种:一种是类级别的插件开发,即给jQuery添加新的全局函数,相当于给jQuery类本身添加方法。jQuery的全局函数就是属于jQuery命名空间的函数,另一种是对象级别的插件开发,即给jQuery对象添加方法。下面就... 查看详情
转:jquery插件开发全解析
jQuery插件的开发包括两种:一种是类级别的插件开发,即给jQuery添加新的全局函数,相当于给jQuery类本身添加方法。jQuery的全局函数就是属于jQuery命名空间的函数,另一种是对象级别的插件开发,即给jQuery对象添加方法。下面就... 查看详情
jquery插件开发
什么是jQuery插件,jQuery插件如何使用?jQuery插件就是用来扩展jQuery原型对象的一个方法,使用方法就是jQuery对象方法的调用。来个例子:$("a").css("color","red")。每个jQuery对象都会包含jQuery中定义的DOM操作方法,这里使用$来选择a元... 查看详情
4jquery面向对象之简单的插件开发
1、alert例子(function($){$.alert=function(msg){window.alert(msg);}$.fn.alert=function(msg){window.alert(msg);}})($);$().ready(function(){$.alert("aaaaa");$("body").alert("bbbb");});2、继承(function(jQuery){ 查看详情
jquery扩展方法(代码片段)
jquery插件的开发包括两种:一种是类级别的插件开发,即给jquery添加新的全局函数,相当于给jquery类本身添加方法。jquery的全局函数就是属于jquery命名空间的函数,另一种是对象级别的插件开发,即给jQuery对象添加方法。也可以... 查看详情
再谈:jquery编写插件的方法
版权声明:作者原创,转载请注明出处!编写插件的两种方式: 1.类级别开发插件(1%) 2.对象级别开发(99%)类级别的静态开发就是给jquery添加静态方法,三种方式 1.添加新的全局函数 2.使用$.extend(obj) 3.使用命名空... 查看详情
jquery编写插件的方法
版权声明:作者原创,转载请注明出处!编写插件的两种方式: 1.类级别开发插件(1%) 2.对象级别开发(99%)类级别的静态开发就是给jquery添加静态方法,三种方式 1.添加新的全局函数 2.使用$.extend(obj) 3.使用命... 查看详情
前端与移动开发项目二
...的插件,所以必须是在引入jquery之后再引入它如果只想要简单的写法就用$(".car").animate("left" 查看详情
javascript学习总结——jquery插件开发与发布
jQuery插件就是以jQuery库为基础衍生出来的库,jQuery插件的好处是封装功能,提高了代码的复用性,加快了开发速度,现在网络上开源的jQuery插件非常多,随着版本的不停迭代越来越稳定好用,在jQuery官网有许多插件:一、插件开... 查看详情
jquery插件学习笔记
...它地方反复使用,方便后期维护。 JQuery除了提供一个简单、有效的方式进行管理元素以及脚本,它还还提供了例外一种机制:即给核心模块添加自己的方法和额外的功能。通过这样的机制,Jquery同意我们自己创建属于我们自... 查看详情
jquery插件jquery插件开发
//类级别插件开发,主要是在jQuery中定义全局方法://第一种写法jQuery.myFunc=function(str)alert("直接在jquery中定义方法",str)//调用方式$.myFunc("hello!");//第二种写法jQuery.extend(myFunc:function(str)alert("extend扩展$的方法",str))//调用方式$ 查看详情
创建jq插件步骤(代码片段)
...方法3.通过$.widget()应用jQueryUI的部件工厂方式创建方法1太简单,创建后通过$.myfunction()方式调用,不能对指定元素调用。方法3相对于方法2太复杂。 查看详情
javascript学习总结——jquery插件的开发
概要jQuery插件就是以jQuery库为基础衍生出来的库,jQuery插件的好处是封装功能,提高了代码的复用性,加快了开发速度,现在网络上开源的jQuery插件非常多,随着版本的不停迭代越来越稳定好用,在jQuery官网有许多插件:http://pl... 查看详情
jquery插件开发三种方法
1.好像之前看视频记录下来的,不记得了。1//类级别插件开发,主要是在jQuery中定义全局方法:23//第一种写法4jQuery.myFunc=function(str){5alert("直接在jquery中定义方法",str)6}7//调用方式$.myFunc("hello!");89//第二种写法10jQuery.extend({11myFunc:fu... 查看详情
如何开发jquery插件
一:普及JQuery知识知识1:用JQuery写插件时,最核心的方法有如下两个: $.extend(object)可以理解为,为JQuery类添加一个静态方法。 $.fn.extend(object)可以理解为,为JQuery实例添加一个成员函数。基本的定义与调用://$.extend的... 查看详情
jquery开发插件的两个方法js深浅拷贝(代码片段)
1.jQuery.extend(object);为扩展jQuery类本身.为类添加新的方法。由全局函数来调用,主要是用来拓展个全局函数 2.jQuery.fn.extend(object);为jQuery的实例对象添加方法由实例对象来调用,可以用来拓展个选择器... 查看详情