jquery写插件的几种写法总结（持续补充中）

1：jQuery.fn.extend(object);  给jQuery对象添加方法。

js封装文件示例

$.fn.extend({        

     alertWhileClick:function(){        

         $(this).click(function(){        

              alert($(this).val());        

          });        

      }        

});  

HTML中的js调用

$(“#input1″).alertWhileClick();

HTML代码

<input id=”input1″ type=”text”/>

2：jQuery.extend(object); 为扩展jQuery类本身.为类添加新的方法。

js封装文件示例

$.extend({   

　　add:function(a,b){return a+b;}   

});   //便为　jQuery　添加一个为 add　的　“静态方法”，之后便可以在引入 jQuery　的地方，使用这个方法了，

HTML中的js调用

$.add(3,4); //return 7 

3：自定义的jQuery类以及类方法和类成员

js封装文件示例

(function ($) {
    /* 公共插件定义 */
    $.cloud_checkbox = {

//      var checked_list = "";     //这个是私有变量，外部无法访问
        /* checkbox全选、取消全选、反选 */
        checked_all: function(table_id, name_all, name) {
            /*
             *  table_id: checkbox所在表的id
             *  name_all: 负责全选的checkbox的name（仅一个）
             *  name: 表内需要进行全选操作的checkbox的name（一组）
            */
            $("#"+table_id+" .regular-checkbox[name="+name_all+"]").click(function() {
                var v = $(this).prop(‘checked‘);
                $("#"+table_id+" .regular-checkbox[name="+name+"]").prop(‘checked‘,v);
                $("table .regular-checkbox[name=‘table_list_check‘]").change();
            });
        },
        /* 获取所有选中checkbox的值 */
        get_checked_val: function(name) {
            /*
             *  name: 需要获取选中值的checkbox的name（一组）
            */
            var val_list = []
            $(".regular-checkbox[name="+name+"]").each(function() {
                if($(this).prop(‘checked‘)) {
                    val_list.push($(this).val());
                }
            });
            return val_list;
        },
        single_checked:function(table_id, name_all, name, id){
            if( !$("#"+id).attr("checked")){
                $("#"+table_id+" .regular-checkbox[name="+name_all+"]").attr("checked", false);
            }else{
                var flag = true;
                $(".regular-checkbox[name="+name+"]").each(function() {
                    if(!$(this).attr(‘checked‘)) {
                        flag = false;
                        $("#"+table_id+" .regular-checkbox[name="+name_all+"]").attr("checked", false);
                        return false;
                    }
                });
                if(flag == true){
                    $("#"+table_id+" .regular-checkbox[name="+name_all+"]").attr("checked", "checked");
                }
            }
        }
    };
})(jQuery);

HTML中的js调用

$.cloud_checkbox.checked_all(‘table_list‘, ‘table_list_checkall‘, ‘table_list_check‘);

var val_list = $.cloud_checkbox.get_checked_val(‘table_list_check‘);

jquery写插件的几种写法总结（持续补充中）,古老的榕树,5-wow.com