• jQuery插件学习(一)


           由于项目开发需要,经常会用到一些jquery插件,但网上已有的插件常常又不能100%满足业务需求,所以就想自己能看懂插件的代码,进行一些功能上的改动和补充,或者能自己自定义插件就更好了。所以这段时间会对插件进行一些研究,现将学习的一些重要内容记录下来,供那些像我一样的初学者借鉴下。嘻嘻。

           (一)jQuery为开发插件提拱了两个方法

                   jQuery.extend(); 为扩展jQuery类本身.为类添加新的方法;

                   jQuery.fn.extend();给jQuery对象添加方法;

                   它们之间的区别是:jQuery是一个类,jQuery.extend(),是扩展的jQuery这个类,变成了jQuery这个类本身的方法,这个扩展也就是所谓的静态方法。

                   只跟这个类本身有关。跟你具体的实例化对象是没关系滴。

            例如:

                  (function($) {

                         $.extend({ 
                                  minValue : function(a,b){ 
                                  return a>b? b:a; 
                                }

                       }) 

                  })(jQuery);

                 要调用这个方法:$.minValue(2,3);

                 

                jQuery.fn.extend拓展的是jQuery对象(原型的)的方法,原型的作用就是给这个类的每一个对象都添加一个统一的方法,对象是啥?就是类的实例化嘛,例如

                $("#abc") 就是一个实例化的jQuery对象。假设xyz()是拓展的方法:$('selector').xyz();要是这么用$.xyz();是会出错滴。

                jQuery.extend()这个方法,主要是用来拓展个全局函数啦,例如$.ajax(),$.getScript(url,callback) 这些jQuery自带的方法这种,大部分插件都是用jQuery.fn.extend()。

                附插件框架:

                   (function($){     

                            $.fn.yourPluginName = function(options){         

                                        //各种属性和参数        

                                         var defaults = { } ;        

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

                                         return this.each(function(){           

                                         //插件的实现代码         

                                         });    

                                };

                    })(jQuery);

            return this.each()中return的作用:each()方法返回jQuery对象,所以这样就可以继续链式操作了。

           (二)jQuery中的this和$(this)

                 this其实是指向dom对象或当前元素,$(this)是jquery对象,当你用的方法是jquery时,就用$(this),如果是JS方法,就用this。

           例如:

                var node = $('#id');

                node.click(function(){

                  this.css('display','block');     //报错   this是一个html元素,不是jquery对象,因此this不能调用jquerycss()方法

                 $(this).css('display','block'); //正确  $(this)是一个jquery对象,不是html元素,可以用css()方法

                 this.style.display = 'block';   //正确   this是一个html元素,不是jquery对象,因此this不能调用jquerycss()方法,但是可以用javascript来更改style属性

               });

     

            

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

  • 相关阅读:
    BZOJ2741:[FOTILE模拟赛]L
    BZOJ3996:[TJOI2015]线性代数
    BZOJ3876:[AHOI2014]支线剧情
    BZOJ1861:[ZJOI2006]Book书架
    BZOJ3190:[JLOI2013]赛车
    HDU-1540 Tunnel Warfare 【线段树+单点修改+区间更新】
    HDU-1846 Brave Game 【巴什博弈】
    HDU-1421 搬寝室 【DP】
    HDU-4734 F(x) 【数位DP】
    AHU-412 Bessie Come Home 【Dijkstra】
  • 原文地址:https://www.cnblogs.com/dengyy/p/4545946.html
Copyright © 2020-2023  润新知