jquery编写插件的方法

编写插件的两种方式:

1.类级别开发插件(1%)

2.对象级别开发(99%)

jquery编写插件的方法 类级别的静态开发就是给jquery添加静态方法，三种方式

1.添加新的全局函数

2.使用$.extend(obj)

3.使用命名空间

类级别开发插件（用的非常少，1%）

分别举例：

//1.直接给jquer添加全局函数
jQuery.myAlert=function (str) {
    alert(str);
};

//2.用extend()方法。extend是jquery提供的一个方法，把多个对象合并起来，参数是object
jQuery.extend({
    myAlert2:function (str1) {
        alert(str1);
    },
    myAlert3:function () {
        alert(11111);
    }
});

//一定要注意两种类级别编写插件方式书写的区别。

//3.使用命名空间(如果不使用命名空间容易和其他引入的JS库里面的同名方法冲突)
jQuery.yuqing={
    myAlert4:function (str) {
        alert(str);
    },
    centerWindow:function (obj) {
        obj.css({
            'top':($(window).height()-obj.height())/2,
            'left':($(window).width()-obj.width())/2
        });
        //必须进行返回对象的操作，否则就不能继续往下进行链式操作了。。
        return obj;
    }
};

调用部分：

  //调用自定义插件方法
  $('#btn').click(function () {
      $.myAlert('我是调用jquery编写的插件弹出的警告框');
      $.myAlert2('我是调用jquery的extend()方法编写的插件弹出的警告框');
      $.myAlert3();
      $.yuqing.myAlert4("调用使用了命名空间编写的插件方法");
  });
 $.yuqing.centerWindow($('#div1')).css('background','red');

jquery编写插件的方法注意：jquery文件要一并引入。

对象级别开发插件（常用99%）

jquery编写插件的方法 jquery官方给了一套对象级别开发插件的模板：

;(function ($) {
    $.fn.plugin=function (options) {
        var defaults={
            //各种参数、各种属性
        };

        //options合并到defaults上,defaults继承了options上的各种属性和方法,将所有的赋值给endOptions
        var endOptions=$.extend(defaults,options);
        
        this.each(function () {
            //实现功能的代码
        });
    };
})(jQuery);

jquery编写插件的方法 模板要点：

1.函数全部放在闭包里，外面的函数就调用不到里面的参数了,比较安全
2.前面加分号,避免不必要的麻烦

jquery编写插件的方法举个栗子：

需求：开发一个插件，要求奇数行颜色是yellow，偶数行颜色是green，鼠标移到的行变为blue，移除变为原来的颜色

HTML布局：

<table id="tab">
    <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>身高</th>
        <th>体重</th>
    </tr>
    <tr>
        <td>张三</td>
        <td>22</td>
        <td>178cm</td>
        <td>79kg</td>
    </tr>
    <tr>
        <td>美美</td>
        <td>34</td>
        <td>167cm</td>
        <td>60kg</td>
    </tr>
    <tr>
        <td>小青</td>
        <td>23</td>
        <td>170cm</td>
        <td>55kg</td>
    </tr>
    <tr>
        <td>张三</td>
        <td>22</td>
        <td>178cm</td>
        <td>79kg</td>
    </tr>
    <tr>
        <td>美美</td>
        <td>34</td>
        <td>167cm</td>
        <td>60kg</td>
    </tr>
    <tr>
        <td>小青</td>
        <td>23</td>
        <td>170cm</td>
        <td>55kg</td>
    </tr>
    <tr>
        <td>张三</td>
        <td>22</td>
        <td>178cm</td>
        <td>79kg</td>
    </tr>
    <tr>
        <td>美美</td>
        <td>34</td>
        <td>167cm</td>
        <td>60kg</td>
    </tr>
    <tr>
        <td>小青</td>
        <td>23</td>
        <td>170cm</td>
        <td>55kg</td>
    </tr>
</table>

View Code