jquery拓展

原文：http://www.jb51.net/article/67056.htm

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

1、添加新的全局函数

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

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

?

1 2 3

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

调用：

复制代码 代码如下:

$.five();

(2)添加多个函数

?

1 2 3 4 5 6

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

调用：

复制代码 代码如下:

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

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

?

1 2 3 4 5 6 7 8 9 10 11

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

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

2、添加jQuery对象方法

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

?

1 2 3

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

调用：

复制代码 代码如下:

$.fn.myMethod();

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

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

?

1 2 3 4 5 6 7 8 9 10 11

< 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" />

?

1 2 3 4 5 6 7 8 9 10 11 12

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元素.以上代码修改为：

?

1 2 3 4 5 6 7 8 9 10

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所引用的对象。

?

1 2 3 4 5 6 7 8 9 10

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、添加新的简写方法

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

//添加新的简写方法 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程序设计有所帮助。