• jQ插件编写


    参考文档:http://www.cnblogs.com/Dlonghow/p/4142034.html

    编写插件最先接触到的就是jQuery.fn.extend 和jQuery.extend 这个两个属性,但是这两个东西是什么,干啥用的,还得先明白:

    1、jQuery.extend(object)

      a)、为jQuery添加静态方法

        eg : jQuery.extend({

            min:function(a,,b){return a<b?a:b},

            max:function(a,b){return a>b?a:b}

            });

            jQuery.min(2,3)  //2

      b)、jQuery.extend(target,object1,[objectN]) 用一个对象或多个对象来扩充对象,最后返回扩充的对象

        eg: 

          var target = {
            name : 'zt',
            age  : 24
          }
          var object1 = {
            name : 'zj',
            age : '28',
            address : 'ly'
          }
          console.log(jQuery.extend(target,object1));  // {name:'zj',age:'28',address:'ly'};

    2、jQuery.fn.extend(object);

      $.fn是什么?

      $.fn是指jQuery的命名空间,fn上的成员(方法function及属性property),会对jQuery实例每一个有效。 

      

      查看jQuery代码,就不难发现。

      jQuery.fn = jQuery.prototype = {

         init: function( selector, context ) {//.... 

      };

      原来 jQuery.fn = jQuery.prototype.

      所以,它是对jQuery.prototype进得扩展,就是为jQuery类添加“成员函数”。jQuery类的实例可以使用这个“成员函数”。

      比如我们要开发一个插件,做一个特殊的编辑框,当它被点击时,便alert 当前编辑框里的内容。可以这么做:

      $.fn.extend({          
           doAlertWhileClick:function() {            
                $(this).click(function(){                 
                        alert($(this).val());           
                  });           
            }       
      });       
      $("#input1").doAlertWhileClick(); // 页面上为:    

      $("#input1") 为一个jQuery实例{不太懂?},当它调用成员方法 doAlertWhileClick后,便实现了扩展,每次被点击时它会先弹出目前编辑里的内容。

    3、在实际的开发项目中:{pluginName为插件名称}

      开发插件,是$.fn.pluginName = function(options){  }; 如果pluginName 为变量, 则写成 $.fn[pluginName] = function(options){  }

      第一步:定一个闭包区域,防止插件被污染

    ;(function ($, window,undefined) {  //传入window,不需要去外部寻找,提高效率 ; undefined ,防止外部声明,影响内部变量
    
    })(window.jQuery, window);

      第二步:写入插件方法:

    ;(function ($, window,undefined) {  //传入window,不需要去外部寻找,提高效率 ; undefined ,防止外部声明,影响内部变量
        $.fn[pluginName] = function(options){
           return this.each(function(){

          }) //支持链式调用   } })(window.jQuery, window);
    工作并不只是为了那点工资,而是为了创造一份属于自己的事业
  • 相关阅读:
    UOJ 【UR #5】怎样跑得更快
    【TJOJIHEOI2016】求和
    CF 932E Team Work
    【BZOJ2159】Crash的文明世界
    Luogu P4707 重返现世
    Luogu P3175 [HAOI2015]按位或
    【BZOJ3930】选数
    nginx 学习
    如何解决 react-create-app 里面的 no-unused-vars ?
    随时更新web html 项目页面,查看手机等其他移动设备的几种方法?
  • 原文地址:https://www.cnblogs.com/zouer/p/4649161.html
Copyright © 2020-2023  润新知