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()的方法.