你的位置:首页 > Java教程

[Java教程]jquery编写插件的方法


 版权声明:作者原创,转载请注明出处!

编写插件的两种方式:

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

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

类级别的静态开发就是给jquery添加静态方法,三种方式

  1.添加新的全局函数

  2.使用$.extend(obj)

  3.使用命名空间

类级别开发插件(用的非常少,1%)

  分别举例:

//1.直接给jquer添加全局函数jQuery.myAlert=function (str) {  alert(str);};//2.用extend()方法。extend是jquery提供的一个方法,把多个对象合并起来,参数是objectjQuery.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文件要一并引入。

对象级别开发插件(常用99%)

jquery官方给了一套对象级别开发插件的模板:

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

模板要点:

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

举个栗子:

  需求:开发一个插件,要求奇数行颜色是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

  css样式

table{  width: 100%;  border-collapse: collapse;  border: 1px solid palevioletred;}th,td{  height: 30px;  text-align: center;  border: 1px solid deeppink;}.evenRow1{background: yellow;}.oddRow1{background: green;}.curRow1{background: blue;}

View Code

  jquery调用代码:

$('#tab').table({  evenRowClass:'evenRow1',  oddRowClass:'oddRow1',  curRowClass:'curRow1',  eventType1:'click'});

 jquery插件代码:

 1 ;(function ($) { 2   $.fn.table=function (options) { 3     var defaults={ 4       //各种参数、各种属性 5       evenRowClass:'evenRow', 6       oddRowClass:'oddRow', 7       curRowClass:'curRow', 8       eventType1:'mouseover', 9       eventType2:'mouseout'10     };11     12     var endOptions=$.extend(defaults,options);13     14     this.each(function () {15       var _this = $( this );16       _this.find('tr:even').addClass(endOptions.evenRowClass);17       _this.find('tr:odd').addClass(endOptions.oddRowClass);
18 //鼠标移入和移出,但实际开发中不直接使用mouseover这种方法19 /*$(this).find('tr').mouseover(function () {20 $(this).addClass(endOptions.curRowClass);21 }).mouseout(function () {22 $(this).removeClass(endOptions.curRowClass);23 });*/24 25 //实际开发中要用bian()方法绑定26 //因为用bind()方法绑定非常灵活,事件可以自己定义27 //mouseover mouseout...事件底层都是用bind()去实现的,mouseout 等只是快捷方式28 _this.find('tr').bind(endOptions.eventType1,function () {29 $(this).addClass(endOptions.curRowClass);30 });31 _this.find('tr').bind(endOptions.eventType2,function () {32 $(this).removeClass(endOptions.curRowClass);33 })34 });35 };36 })(jQuery);

插件注释:

15行:var _this = this;  变量存储,因为很多地方用到$(this);所以将其存储为变量使用更加的方便。

19-23行与28-33行实现的功能是相同的,但是推荐使用28-33行的写法,使用bian()进行事件的绑定,因为使用会非常的灵活。