jQuery插件制作之全局函数

1、添加新的全局函数

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

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

[javascript] view plain copy print ?

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

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

调用：$.five();

(2)添加多个函数

[javascript] view plain copy print ?

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

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

调用：$.five();$.six();

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

//命名空间继承

[javascript] view plain copy print ?

1. jQuery.myPlugin ={
2. one : function(obj){
3. var object = obj;
4. var id = object.attr("id");
5. alert(id);
6. },
7. two : function(){
8. alert(22);
9. }
10. }

jQuery.myPlugin ={
    one : function(obj){
        var object = obj;
        var id = object.attr("id");
        alert(id);
    },
    two : function(){
        alert(22);
    }
}

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

2、添加jQuery对象方法

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

[javascript] view plain copy print ?

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

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

调用：$.fn.myMethod();

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

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

[javascript] view plain copy print ?

1. <ul>
2. <li>11111111111111111111111111</li>
3. <liclass="this">22222222222222222222</li>
4. <li>333333333333333</li>
5. <liclass="that">44444444444444444</li>
6. <liclass="this">55555555555555</li>
7. <li>6666666666666666</li>
8. <li>777777777777777777</li>
9. <liclass="that">777777777777777777</li>
10. </ul>
12. <inputtype="button" value="swap" id="swap" />
14. jQuery.fn.swapClass= function(class1,class2){
15. if(this.hasClass(class1)){
16. this.removeClass(class1).addClass(class2);
17. }
18. if(this.hasClass(class2)){
19. this.removeClass(class2).addClass(class1);
20. }
21. }
23. $("#swap").click(function(){
24. $("li").swapClass("this","that");
25. return false;
26. })

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

[javascript] view plain copy print ?

1. jQuery.fn.swapClass= function(class1,class2){
2. this.each(function(){
3. var $element = jQuery(this);
4. if($element.hasClass(class1)){
5. $element.removeClass(class1).addClass(class2);
6. }else if($element.hasClass(class2)){
7. $element.removeClass(class2).addClass(class1);
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所引用的对象。

[javascript] view plain copy print ?

1. jQuery.fn.swapClass= function(class1,class2){
2. return this.each(function(){
3. var $element = jQuery(this);
4. if($element.hasClass(class1)){
5. $element.removeClass(class1).addClass(class2);
6. }else if($element.hasClass(class2)){
7. $element.removeClass(class2).addClass(class1);
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、添加新的简写方法

[javascript] view plain copy print ?

1. //添加新的简写方法
2. jQuery.fn.slideFadeOut= function(speed,callback){
3. return this.animate({
4. height : "hide",
5. opacity : "hide"
6. },speed,callback)
7. }
8. jQuery.fn.slideFadeIn= function(speed,callback){
9. return this.animate({
10. height : "show",
11. opacity : "show"
12. },speed,callback)
13. }
14. jQuery.fn.slideFadeToggle= function(speed,callback){
15. return this.animate({
16. height : "toggle",
17. opacity : "toggle"
18. },speed,callback) 

转自于  http://blog.csdn.net/myjlvzlp/article/details/8169511