首页 > 代码库 > 4、jQuery面向对象之简单的插件开发
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 = http://www.mamicode.com/$(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 = http://www.mamicode.com/$(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();
4、jQuery面向对象之简单的插件开发
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。