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

前端之家收集整理的这篇文章主要介绍了jQuery插件制作之全局函数用法实例前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

1、添加新的全局函数

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

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

调用

代码如下:

(2)添加多个函数

调用

代码如下:

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

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

2、添加jQuery对象方法

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

调用

代码如下:

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

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

  • 11111111111111111111111111
  • 333333333333333
  • 6666666666666666
  • 777777777777777777
  • 全部li都是用了that样式。

    (1)隐士迭代

    要在无论匹配多个元素的情况下都保证行为的正确,最简单的方法是始终在方法的环境上调用.each()方法,这样就会

    执行隐士迭代,而执行隐士迭代对于维护插件和内置方法的一致性是至关重要的,在调用的.each()方法内部,this

    依次引用的是每个DOM元素.以上代码修改为:

    调用

    代码如下:

    (2)方法的连缀

    要使用方法的连缀,必须在所有的插件方法中返回一个jQuery对象。返回的jQuery对象通常就是this所引用的对象。

    调用

    代码如下:

    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" },callback) } jQuery.fn.slideFadeToggle= function(speed,callback){ return this.animate({ height : "toggle",opacity : "toggle" },callback) }

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

    猜你在找的jQuery相关文章