继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

jQuery插件开发的准备

慕勒551688
关注TA
已关注
手记 250
粉丝 39
获赞 133

          在开发jquery插件之前,需要有下面的准备工作。1. 定义全局变量。就是可以使用“jQuery.methodName()”形式使用的函数

/*
  定义新的全局函数
  可以以jQuery.func1()形式,也可以以$.func1() 的形式调用
*/

jQuery.func1 =function(){
    alert("this is function func1()----------");
  }
    
/*
  带参数的函数
*/

jQuery.func2 =function(param){
    alert("this is function func2()----"+param+"----");
  }
    



$.func3 = function(){
  alert("this is function func3()----------");    
}

/*
覆盖了func1()
*/

$.func1 = function(){
  alert("this is function func1() override----------");    
}

/*
也覆盖了前面已经定义的func1(),即使参数列表不一样,在JS中不存在重载的说法
*/

$.func1 = function(param){
  alert("this is function func1() override--"+param+"-------");    
}

/*------------------------------------

第2种声明全局函数
可能会出现与其他插件,函数名冲突的危险
------------------------------------*/


jQuery.extend({
      func4:function(){
        alert("this is named func4() defined    by extend");    
      },
        
      func5:function(param){
        alert("this is named func5(param) defined    by extend and parma ="+param);    
      }    
            
         });

/*
----------------------------------------------------------
第3种声明全局函数,可以防止包名冲突
调用形式
  jQuery.myplugin.func6();
  jQuery.myplugin.func7('我是个参数');
----------------------------------------------------------
*/


jQuery.myplugin = {
  func6:function(){
    alert("this is function named func6() by jQuery.myplugin");    
  },
  func7:function(param){
      alert("this is function named func7(param) by jQuery.myplugin and param="+param);    
  }
}

/*
第4种声明全局函数,和第三种效果一样

*/

jQuery.myplugin.func8 = function(){
  alert("this is function named func8() by jquery.myplugin.func8--------");    
}  2.声明对象的方法扩展对象的内置方法,调用形式:obj.methodName()。其中obj 为jq对行啊,methodName为函数名称。/*
声明jQuery 对象的方法
*/


jQuery.fn.func9 = function(){
    alert("func9() start---------"+this);
  }

/* 应该返回jquery 对象,支持连缀功能*/
jQuery.fn.func10 = function(){
  return this.each(function(){
    alert("func10() start---------"+this);
  })
}

// 只能使用defaults,不能使用其他标记
jQuery.fn.func11 = function(parameters){
  defaults ={
    aString:"byebye",
    aNumber:250        
  };
    
  jQuery.extend(defaults,parameters);
    
  alert("aString="+defaults.aString+"     aNumber="+defaults.aNumber);
    
}注意jquery 对象环境。有时候jquery 引用对象是个数组,可以通过隐式迭代来防止该情况发生,比如方法func10。还要注意方法连缀,防止破坏破坏作用发生。可以使用pushStack、 end 方法实现(不太明白)。在参数传递过程中,注意extend方法的使用,该方法主要作用是为了简化继承。而且extends 目标对象只能是defaults,不能是其他关键字。  

打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP