jQuery插件开发

编写jQuery插件的两种方式:

1. 类级别开发

2. 对象级别开发(常用)

类级别开发:

1. 直接给jQuery添加全局函数

jQuery.myAlert = function ( str ) {

 alert(str);

}

2. 用extend()方法

jQuery.extend({

 myAlert: function ( str ) {

  alert( str );

 },

 myAlert2: function () {

  alert(2222);

 }

})

3. 使用命名空间

jQuery.myNamespac = {

 myAlert: function ( str ) {

  alert( str );

 }

}

例子:

jQuery插件开发

jQuery插件开发

jQuery插件开发

对象级别开发:

对象级别开发,实际上就是将拓展的方法添加到jQuery的原型对象上即 jQuery.prototype,简写形式为$.fn,而原型上的方法是每个对象的共享方法,详细介绍请看我的其他文章。

 jQuery官网给出了一个模板:

jQuery插件开发

那么,接下来,我就用这个模板开发来做一个demo, 实现一个表格奇数行的颜色是#38a38a,偶数行的颜色是#09f; 当鼠标移动到当前行的时候,当前行的颜色变成yellow,当鼠标移开的时候还是现实原来的颜色。

样式:

jQuery插件开发

插件封装:

jQuery插件开发

调用:

jQuery插件开发

效果:

jQuery插件开发