jquery的插件机制以及应用

插件中的几个注意事项:

1.插件的文件名推荐用jquery.[插件名].js,避免与其他插件混淆. 
2.所有的对象方法都应该附加到jQuery.fn对象上,而所有的全局函数都应当附加jQuery对象本身上. 
3.在插件内部,this指向的是当前通过选择器获取的jQuery对象.

4.插件应该返回一个jQuery对象,以保证插件的可链式操作. 
5.避免在插件内部使用$作为jQuery对象的别名,而应使用完整的jQuery来表示,这样可以避免冲突.

 

 

插件的可链式1.返回数据的可链式，以保证还可以使用其它的方法.如下的方式，它会返回一个jquery对象.调用时:$("#table2").alterBgColor()  //应用插件.find("th").css("color","red");//可以链式操作

 

 

 

>>>>在实际的写法上 :

 

相关的示例

常用的参数设置，默认参数的实现.;(function($) {$.fn.extend({"alterBgColor":function(options){  //设置默认值options=$.extend({odd:"odd",    /* 偶数行样式*/even:"even", /* 奇数行样式*/selected:"selected" /* 选中行样式*/},options);$("tbody>tr:odd",this).addClass(options.odd);$("tbody>tr:even",this).addClass(options.even);$('tbody>tr',this).click(function() {//判断当前是否选中var hasSelected=$(this).hasClass(options.selected);//如果选中，则移出selected类，否则就加上selected类$(this)[hasSelected?"removeClass":"addClass"](options.selected)//查找内部的checkbox,设置对应的属性。.find(':checkbox').attr('checked',!hasSelected);});// 如果单选框默认情况下是选择的，则高色.$('tbody>tr:has(:checked)',this).addClass(options.selected);return this;  //返回this，使方法可链。}});})(jQuery);
说明:1. 使用extend来对函数的参数进行默认的赋值.
    2. 使用插件下的元素匹配,即选择器的设置.如要当前表格中刚单击的一个tr表格行.>>   $("tbody>tr:odd",this).addClass(options.odd);   $("tbody>tr:even",this).addClass(options.even);

 

 

6.为插件来传递调用方法时.

插件的调用上

$.fn.mywin = function(position, hidefunc, initPos){//定义关闭按钮的动作currentwin.children(".title").children("img").click(function() {if (!hidefunc) {currentwin.hide("slow")    ;} else {hidefunc();}});}此函数的内容为:rightwin.mywin({left: "right", top: "bottom"}, function() {rightwin.hide();},{left: rleft, top: scrollTop + browserheight}).fadeOut(15000).dequeue();}即当进行click时，它会调用hidefunc()的方法.