rip 名称 选中 color 格式 asc settings str
二、通过 $.fn 向 jQuery 添加新的方法
- $.fn.pluginName = function() {
- //your code goes here
- }
说明:在 $.fn 后面添加一个方法,名字是我们的插件名称。然后插件代码在这个方法里面展开。
- $.fn.myPlugin= function() {
- //在这里面,this指的是用jQuery选中的元素
- //example :$('a'),则this=$('a')
- this.CSS('color','red');
- };
- 京东$(function(){
- $('a').myPlugin();
- });
- </script>
- $.fn.myPlugin2= function() {
- //在这里面,this指的是用jQuery选中的元素
- this.css('color','red');
- this.each(function() {
- //对每个元素进行操作$(this).append(''+$(this).attr('href'));
- })
- };
- 京东$(function(){
- $('a').myPlugin2();
- });
- </script>
- $.fn.myPlugin3= function() {
- //在这里面,this指的是用jQuery选中的元素
- this.css('color','red');
- return this.each(function() {
- //对每个元素进行操作$(this).append(''+$(this).attr('href'));
- })
- };
- </script>
1、在处理插件参数的接收上,通常使用 jQuery 的 extend 方法,但那是给 extend 方法传递单个对象的情况下,这个对象会合并到 jQuery 身上,所以我们就可以在 jQuery 身上调用新合并对象里包含的方法了,像上面的例子。
当给 extend 方法传递一个以上的参数时,它会将所有参数对象合并到第一个里。同时,如果对象中有同名属性时,合并的时候后面的会覆盖前面的。【重要】
2、利用这一点,我们可以在插件里定义一个保存插件参数默认值的对象,同时将接收来的参数对象合并到默认对象上,最后就实现了用户指定了值的参数使用指定的值,未指定的参数使用插件默认值。
为了演示,再指定一个参数 fontSize,允许调用插件的时候设置字体大小。
示例代码:
- $.fn.myPlugin4= function(options) {
- vardefaults={'color':'red','fontSize':'12px'};
- varsettings=$.extend(defaults, options);
- return this.css({'color': settings.color,'fontSize': settings.fontSize
- });
- }$('a').myPlugin4({'color':'#2C9929','fontSize':'20px'
- });
- </script>
2.4、保护好默认参数
注意到上面代码调用 extend 时会将 defaults 的值改变,这样不好,因为它作为插件因有的一些东西应该维持原样,另外就是如果你在后续代码中还要使用这些默认值的话,当你再次访问它时它已经被用户传进来的参数更改了。
一个好的做法是将一个新的空对象做为 $.extend 的第一个参数,defaults 和用户传递的参数对象紧随其后,这样做的好处是所有值被合并到这个空对象上,保护了插件里面的默认值。
- $.fn.myPlugin = function(options) {
- var defaults ={
- 'color': 'red',
- 'fontSize': '12px'};
- var settings = $.extend({},defaults, options);//将一个空对象做为第一个参数,根据extend特性,options,defaults,{} 会依次向左覆盖
- return this.css({
- 'color': settings.color,
- 'fontSize': settings.fontSize
- });
- }
js-jquery - 插件开发(二)
来源: http://www.bubuko.com/infodetail-2014747.html