怎么自定义一个jQuery扩展接口
这篇文章给大家介绍怎么自定义一个jQuery扩展接口,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。
创新互联专注于企业网络营销推广、网站重做改版、五指山网站定制设计、自适应品牌网站建设、H5高端网站建设、商城网站开发、集团公司官网建设、外贸网站建设、高端网站制作、响应式网页设计等建站业务,价格优惠性价比高,为五指山等各大城市提供网站开发制作服务。
jQuery是一款很优秀的轻量级JavaScript框架,有其独特的优点。很多Web开发者都却对其乐此不疲。因为在这个框架中,除了拥有丰富的客户端处理功能、动画功能外,更是提供了很自定义扩展接口,方便更多的开发者来扩展jQuery。
$.extend({ max: function(a, b) { return a > b ? a : b; }, min: function(a, b) { return a > b ? b : a; }, avg: function(a, b) { return a / b; } });
该示例用以在jQuery中增加新函数,该函数是静态函数。调用如下:
jQuery.min(2,3); // => 2 jQuery.max(4,5); // => 5
如果针对组件的功能扩展函数,同样也是很简单。比如,你想要扩展TextBox的功能,使到它在获取焦点时,高亮显示;失去焦点时,则取消高亮。当然,高亮的效果可以使用CSS来实现,因此,你可以用一个颜色的名称作为参数进行调用。代码如下:
$.fn.hightlight = function(colorName) { this.mouseover(function() { $(this).css('background-color', colorName); //this对是对组件自身的引用 }); this.mouseout(function() { $(this).css('background-color', ''); }); }
调用如下:
$(function() { $('#test').hightlight('red'); });
扩展jQuery的Json技巧
下面我们将分析在jQuery基础上扩展了其处理Json字符串能力,伟大的jQuery将会更伟大用jQuery写JavaScript非常高效,jQuery对Ajax的封装也非常到位;使用jQuery一段时间后发现,jQuery在处理Json字符串方面功能不是很强,至少比prototype.js差远了。
以前用习惯了扩展Jquery的Json,在进行Ajax开发时,处理json数据非常方便;而在jQuery中,只提供了一个简单的jQuery.getJSON()方法,并未提供jQuery本身对json数据的转换处理,将json字符串转换为Javascript数据对象还比较容易利用eval()函数即可,但要将Javascript的数据类型转换成json字符串就比较难了;刚开始不得同时使用prototype.js和jQuery。扩展Jquery的Json代码:
//扩展jQuery对json字符串的转换 jQuery.extend({ /** * @see 将json字符串转换为对象 * @param json字符串 * @return 返回object,array,string等对象 */ evalJSON: function(strJson) { return eval("(" + strJson + ")"); } });
jQuery.extend({ /** * @see 将javascript数据类型转换为json字符串 * @param 待转换对象,支持 object, array,string,function,number,boolean,regexp * @return 返回json字符串 */ toJSON: function(object) { var type = typeof object; if ('object' == type) { if (Array == object.constructor) type = 'array'; else if (RegExp == object.constructor) type = 'regexp'; else type = 'object'; } switch (type) { case 'undefined': case 'unknown': return; break; case 'function': case 'boolean': case 'regexp': return object.toString(); break; case 'number': return isFinite(object) ? object.toString() : 'null'; break; case 'string': return '"' + object.replace(/(\\|\")/g, "\\$1").replace(/\n|\r|\t/g, function() { var a = arguments[0]; return (a == '\n') ? '\\n': (a == '\r') ? '\\r': (a == '\t') ? '\\t': "" }) + '"'; break; case 'object': if (object === null) return 'null'; var results = []; for (var property in object) { var value = jQuery.toJSON(object[property]); if (value !== undefined) results.push(jQuery.toJSON(property) + ':' + value); } return '{' + results.join(',') + '}'; break; case 'array': var results = []; for (var i = 0; i < object.length; i++) { var value = jQuery.toJSON(object[i]); if (value !== undefined) results.push(value); } return '[' + results.join(',') + ']'; break; } } }); 示例: var obj = { name: "sean", friend: ["fans", "bruce", "wawa"], action: function() { alert("gogogog") }, boy: true, age: 26, reg: /\b([a-z]+) \1\b/gi, child: { name: "none", age: -1 } }; var json = $.toJSON(obj); var objx = $.evalJSON(json);
关于怎么自定义一个jQuery扩展接口就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。
分享题目:怎么自定义一个jQuery扩展接口
标题URL:http://pwwzsj.com/article/pidjdp.html