4、jQuery面向对象之简单的插件开发

1、alert例子

(function($){    $.alert = function(msg){        window.alert(msg);    }        $.fn.alert = function(msg){        window.alert(msg);    }})($);$().ready(function(){    $.alert("aaaaa");    $("body").alert("bbbb");});

2、继承

(function(jQuery){    jQuery.fn.myextend = function(json){        for(var i in json){            jQuery.fn[i] = json[i];        }    }        jQuery.myextend = function(json){        for(var i in json){            jQuery[i] = json[i];        }    }})(jQuery);$().ready(function(){    $("body").myextend({        aa:function(){            alert("aa");        }    });    $("body").aa();});

3、myeach

(function(jQuery){    jQuery.fn.myeach = function(callback){        var array = $(this);        for(var i=0;i<array.length;i++){            //this代表当前正在遍历的对象            callback.call($(array[i]),$(array[i]));        }    }    /**     * @param {Object} obj  可以来自于利用jquery的选择器创建的jquery对象，也可以来自于一个数组(来源于后台)     * @param {Object} callback     */    jQuery.myeach = function(obj,callback){        var array = obj;        for(var i=0;i<array.length;i++){            //this代表当前正在遍历的对象            callback.call($(array[i]),$(array[i]));        }    }})(jQuery);$().ready(function(){    $("div").myeach(function(){        //this代表当前正在遍历的div对象        alert($(this).text());    });        $.myeach($("div"),function(e){        alert($(e).text());    });});

4、jquery开发的querytable

1、首先封装一个命名空间的组件
(function($){    $.nameSapce = function(namespaceString){        var temp = [];//声明了一个空的数组        var array = namespaceString.split(".");        for (var i = 0; i < array.length; i++) {            temp.push(array[i]);            /**             * 把多个json对象添加了window上             */            eval("window." + temp.join(".") + "={}");        }    }})($);

2、封装对table的增删改查

(function($){    /**     * 这里需要一些方法     *    查询方法     *    修改的方法     *    删除的方法     */    $.fn.GridPanel = {        /**         * 初始化事件         */        initEvent:function(){            /**             * 给table中的所有的超级链接添加事件             */            $("#"+$.fn.GridPanel.defaultConfig.table_id).delegate("a","click",function(){                if($(this).text()=="删除"){                    $.fn.GridPanel.method.deleteRow.call(this);                }else if($(this).text()=="修改"){                                    }            })                        /**             * 当点击一个td的时候，触发td的click事件             *              * "td:not(:has(a))"  不含有超级链接的td             */            $("#"+$.fn.GridPanel.defaultConfig.table_id).delegate("td:not(:has(a))","click",function(){                if($(this).children("input").length==0){//td下面没有文本框                    var value = $(this).text();                    $(this).empty();//把该元素下面的所有的子子元素清空                    var $txt = $.fn.GridPanel.method.createText();                    $(this).append($txt);                    $txt.focus();//聚焦                    $txt.attr("value",value);//赋值                    }            })                        /*             * 添加td中的文本框失去焦点的事件             */            $("#"+$.fn.GridPanel.defaultConfig.table_id).delegate("input","blur",function(){                $.fn.GridPanel.method.updateCell.call(this);            })        },        /**         * 默认的配置         */        defaultConfig:{            table_id:'',            url:'',            /**             * 特定的操作要往后台传递的参数             */            option:{                /**                 * 查询操作                 */                query:{                                    },                /**                 * 删除操作                 */                del:{                                    },                /**                 * 修改操作                 */                update:{                                    }            },            /**             * <th field="name">姓名</th>               <th field="description">描述</th>               <th field="del">删除</th>               <th field="update">修改</th>             */            fields:'',            filedUpdate:'',            filedDelete:''        },        /**         * 对表格操作的所有的方法全部放在method中         */        method:{            /**             * 从后台加载数据，利用ajax技术形成表格             */            createTable:function(config){                /**                 * 1、请求后台，把数据传到客户端                 */                //把客户端传递过来的参数覆盖掉默认的配置  true为深度迭代                $.extend(true,$.fn.GridPanel.defaultConfig,config);                                /**                 * 执行initEvent方法                 */                $.fn.GridPanel.initEvent();                                $.post($.fn.GridPanel.defaultConfig.url,$.fn.GridPanel.defaultConfig.option.query,function(data){                    /**                     * data:                     * [                     *     {                     *         pid:1,                     *         name:'aa',                     *         description:'aa'                     *  },                     *  {                     *      pid:2,                     *      name:'bb',                     *      description:'bb'                     *  }                     * ]                     */                     //把后台回调过来的数据转化成json对象                     var array = eval("("+data+")");                     /**                      * 遍历array数组中的每一个元素                      * 第二个参数为回调，在该函数中创建tr                      */                     $.each(array,function(){                          /**                           * 每遍历一次，调用一次createTR方法                           * 当createTR方法调用完毕以后创建了一个tr,再把tr追加到tbody上                           */                          $("#"+$.fn.GridPanel.defaultConfig.table_id+" tbody").append(                             $.fn.GridPanel.method.createTR.call(this));                     });                });            },            /**             * 修改其中的一个单元格             */            updateCell:function(){                /**                 * this为当前的文本框                 */                var updateObj = $(this);                var pid = $(this).parent().parent().data("id");                var value = $(this).val(); //文本框的值                var $td = $(this).parent();//文本框的父节点td                var item = $td.attr("item");//要修改的列名                $.post($.fn.GridPanel.defaultConfig.url,{                    id:pid,                    item:item,                    value:value,                    method:'update'                },function(data){                    updateObj.remove();                    $td.text(value);                });                            },            /**             * 给table添加一行             */            addRow:function(){                            },            /**             * 删除指定的行             */            deleteRow:function(){                var delObj = $(this);                if (window.confirm("您确认要删除吗")) {                    /*                     * 因为在查询的时候把id利用该tr放入到了jQuery的缓存中，所以在这里可以提取到                     */                    $.fn.GridPanel.defaultConfig.option.del.pid = $(this).parent().parent().data("id");                    $.post($.fn.GridPanel.defaultConfig.url, $.fn.GridPanel.defaultConfig.option.del, function(data){                        delObj.parent().parent().remove();                    });                }            },            /**             * 创建一个tr             */            createTR:function(){                /**                 * this为{                           pid:2,                           name:'bb',                           description:'bb'                       }                 */                var jsonObj = this;                var $tr = $("<tr/>");                /**                 * 相当于把key为id,value为jsonObj.pid加在了jQuery.cache中                 * 可以利用$tr.data("id")获取到值                 */                $tr.data("id",jsonObj.pid);                /**                 * 因为$.fn.GridPanel.defaultConfig.fields的数组的长度就是多少列                 */                $.each($.fn.GridPanel.defaultConfig.fields,function(){                    /**                     * this代表正在遍历的每一个元素就是fields中的每一个元素                     */                    $tr.append($.fn.GridPanel.method.createTD.call(this,jsonObj));                });                return $tr;            },            /**             * 创建一个td             * jsonObj             *    {                           pid:2,                           name:'bb',                           description:'bb'                       }             */            createTD:function(jsonObj){                /**                 * this  <th field="name">姓名</th>                 */                if($(this).attr("field")==$.fn.GridPanel.defaultConfig.filedDelete){//如果是删除                    return $("<td/>").append($.fn.GridPanel.method.createA("删除"));                }else if($(this).attr("field")==$.fn.GridPanel.defaultConfig.filedUpdate){//如果是修改                    return $("<td/>").append($.fn.GridPanel.method.createA("修改"));                }else{//不是超级链接                    return $("<td/>").attr("item",$(this).attr("field")).text(jsonObj[$(this).attr("field")]);                }            },            createA:function(text){                return $("<a/>").css("cursor","pointer").text(text);            },            createText:function(){                return $("<input type='text'/>");            }        }    };})($);

3、如何使用

$().ready(function(){    /**     * 1、创建命名空间     */    $.nameSapce("com.itheima12.Person");    /**     * 2、把GridPanel中的内容复制给了com.itheima12.Person     */    $.extend(com.itheima12.Person,$.fn.GridPanel);    /**     * 3、调用方法     */    com.itheima12.Person.method.createTable({        table_id:'usertable',        url:'../PersonServlet',        fields:$("#usertable *[field]"),        option:{            query:{                method:'query'            },            del:{                method:'deleteById',                pid:''            },            update:{                method:"update"            }            },        filedUpdate:'update',        filedDelete:'del'    });});

 

5、对于this的讲解

/** * 任何一个对象都有可能成为任何一个对象的属性 */function Person(){    alert(this);}Person();//window = thisfunction Student(){    }Student.a = Person;Student.a();//this就是Studentvar json = {    a:Person}json.a();//this就是json对象//可以利用call和 apply函数改变this的指向Person.call(json);//Person.call(json)==json.PersonPerson.apply(Student);//Student.Person();