当前位置: 首页 > 编程笔记 >

jQuery插件制作之全局函数用法实例

鲁浩渺
2023-03-14
本文向大家介绍jQuery插件制作之全局函数用法实例,包括了jQuery插件制作之全局函数用法实例的使用技巧和注意事项,需要的朋友参考一下

本文实例讲述了jQuery插件制作之全局函数用法。分享给大家供大家参考。具体分析如下:

1、添加新的全局函数

所谓的全局函数,实际上就是jQuery对象的方法,但从实践的角度上看,他们是位于jQuery命名空间内部的函数

(1)添加一个函数,只需要将新函数指定为jQuery对象的一个属性。

jQuery.five =function(){ 
 alert("直接继承方式不一样"); 
}

调用:

$.five();

(2)添加多个函数

jQuery.five =function(){ 
 alert("直接继承方式不一样"); 
} 
jQuery.six =function(){ 
 alert("直接继承方式不一样2"); 
}

调用:

$.five();$.six();

以上的方法会面临命名空间冲突的风险,为避免这个问题,最好把属于这个插件的所有全局函数,都封装到一个对象中,如下:

//命名空间继承
jQuery.myPlugin ={ 
 one : function(obj){ 
  var object = obj; 
  var id = object.attr("id"); 
  alert(id); 
 }, 
 two : function(){ 
  alert(22); 
 } 
}

这样其实是为全局函数创建了另一个命名空间:jQuery.myPlugin.

2、添加jQuery对象方法

jQuery中大多数内置的功能都是通过其对象的方法提供的。

jQuery.fn.myMethod= function(){ 
 alert(11); 
}

调用:

$.fn.myMethod();

注意:jQuery.fn是jQuery.prototype的别名。

实例:以下是行为不正确的方法

<ul> 
  <li>11111111111111111111111111</li> 
  <liclass="this">22222222222222222222</li> 
  <li>333333333333333</li> 
  <liclass="that">44444444444444444</li> 
  <liclass="this">55555555555555</li> 
  <li>6666666666666666</li> 
  <li>777777777777777777</li> 
  <liclass="that">777777777777777777</li> 
</ul> 
<inputtype="button" value="swap" id="swap" />
jQuery.fn.swapClass= function(class1,class2){ 
 if(this.hasClass(class1)){ 
  this.removeClass(class1).addClass(class2); 
 } 
 if(this.hasClass(class2)){ 
  this.removeClass(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)){ 
   $element.removeClass(class1).addClass(class2); 
  }else if($element.hasClass(class2)){ 
   $element.removeClass(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)){ 
   $element.removeClass(class1).addClass(class2); 
  }else if($element.hasClass(class2)){ 
   $element.removeClass(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) 
}

希望本文所述对大家的jQuery程序设计有所帮助。

 类似资料:
  • 本文向大家介绍jQuery插件制作之参数用法实例分析,包括了jQuery插件制作之参数用法实例分析的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了jQuery插件制作之参数用法。分享给大家供大家参考。具体分析如下: 1、无参数实现文字阴影效果 调用的例子: 2、简单的参数 调用的例子: 3、参数的映射 调用的例子:   4、默认的参数值(这个是最重要的) 调用的例子:   5、回调函数 调

  • 全局函数 返回上级 DirectDrawCreate DirectDrawCreateClipper DirectDrawEnumerate DirectDrawEnumerateEx DirectDrawCreate 返回目录 创建一个DirectDraw对象的实例。 HRESULT WINAPI DirectDrawCreate( GUID FAR *lpGUID, LPDIRECTDRAW

  • debug 调试打印PHP变量,并中断执行。等同于 var_dump($var1, $var2);die; table 将任意MySQL表构造成Model对象。 table($table_name, $db_object_id); model 创建模型对象。 model($model_name, $db_object_id);

  • Herosphp提供了一些全局辅助函数: //格式化打印变量(数据) __print($message); //终端高亮打印绿色(success) tprintOk($message); //终端高亮打印红色(error) tprintError($message); //终端高亮打印黄色(warning) tprintWarning($message); //计算字符串的hash值, 默

  • imigo 启动一个协程,自动创建和销毁上下文 imigo(function(){ $value = Redis::get('key'); // 无需手动释放任何资源 }); 传入参数: imigo(function($id, $name){ echo $id, ':', $name, PHP_EOL; // 1:test }, 1, 'test'); imiCalla

  • 如果你需要让一个工具函数在每个组件可用,可以把方法挂载到 Vue.prototype上。 注册 main.js 中 Vue.prototype.$method = function () {} 一般建议函数名使用 $ 前缀。像 vue-router 的 $route 和 $router。 使用 那么组件代码里 export default { created () { this.$m