jQuery插件制作之全局函数使⽤⽅法
jQuery插件制作之全局函数使⽤⽅法
  1、添加新的全局函数
  所谓的全局函数，实际上就是jQuery对象的⽅法，但从实践的⾓度上看，他们是位于jQuery命名空间内部的函数
  (1)添加⼀个函数，只需要将新函数指定为jQuery对象的⼀个属性。
  jQuery.five =function(){ alert("直接继承⽅式不⼀样"); }
  调⽤：复制代码代码如下:$.five();
  (2)添加多个函数
  jQuery.five =function(){ alert("直接继承⽅式不⼀样"); } jQuery.six =function(){ alert("直接继承⽅式不⼀样2"); }
  调⽤：复制代码代码如下:$.five();$.six();
  以上的.⽅法会⾯临命名空间冲突的风险，为避免这个问题，最好把属于这个插件的所有全局函数，都封装到⼀个对象中，如下：
  //命名空间继承 Plugin ={ one : function(obj){ var object = obj; var id = object.attr("id"); alert(id); }, two : function() { alert(22); } }
  这样其实是为全局函数创建了另⼀个命名空间:Plugin.
  2、添加jQuery对象⽅法
  jQuery中⼤多数内置的功能都是通过其对象的⽅法提供的。
  Method= function(){ alert(11); }
  调⽤：复制代码代码如下:$.fn.myMethod();
  注意：jQuery.fn是jQuery.prototype的别名。
  实例：以下是⾏为不正确的⽅法
  11111111111111111111111111
  22222222222222222222
  333333333333333
  4444444444444444455555555555555
  6666666666666666
  777777777777777777
jquery的attr属性  777777777777777777
  jQuery.fn.swapClass= function(class1,class2){ if(this.hasClass(class1)){ veClass(class1).addClass(class2); } if(this.hasClass(class2)){ veClass(class2).addClass(class1); } } $("#swap").click(function(){
$("li").swapClass("this","that"); return false; })
  全部li都是⽤了that样式。
  (1)隐⼠迭代
  要在⽆论匹配多个元素的情况下都保证⾏为的正确，最简单的⽅法是始终在⽅法的环境上调⽤.each()⽅法，这样就会
  执⾏隐⼠迭代，⽽执⾏隐⼠迭代对于维护插件和内置⽅法的⼀致性是⾄关重要的，在调⽤的.each()⽅法内部，this
  依次引⽤的是每个DOM元素.以上代码修改为：
  jQuery.fn.swapClass= function(class1,class2){ this.each(function(){ var $element = jQuery(this);
if($element.hasClass(class1)){ $veClass(class1).addClass(class2); }else if($element.hasClass(class2)){ $veClass(class2).addClass(class1); } }) }
  调⽤：
  复制代码代码如下:$("li").swapClass("this","that")
  (2)⽅法的连缀
  要使⽤⽅法的连缀，必须在所有的插件⽅法中返回⼀个jQuery对象。返回的jQuery对象通常就是this
所引⽤的对象。  jQuery.fn.swapClass= function(class1,class2){ return this.each(function(){ var $element = jQuery(this);
if($element.hasClass(class1)){ $veClass(class1).addClass(class2); }else if($element.hasClass(class2)){ $veClass(class2).addClass(class1); } }) }
  调⽤：
  复制代码代码如下:$("li").swapClass("this","that").css("text-decoration","underline");
  3、添加新的简写⽅法
  //添加新的简写⽅法 jQuery.fn.slideFadeOut= function(speed,callback){ return this.animate({ height : "hide", opacity : "hide" },speed,callback) } jQuery.fn.slideFadeIn= function(speed,callback){ return this.animate({ height : "show", opacity : "show" },speed,callback) } jQuery.fn.slideFadeToggle= function(speed,callback){ return this.animate({ height : "toggle", opacity : "toggle" },speed,callback) }

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。