jQuery是一款很优秀的轻量级JavaScript框架,有其独特的优点。很多Web开发者都却对其乐此不疲。因为在这个框架中,除了拥有丰富的客户端处理功能、动画功能外,更是提供了很自定义扩展接口,方便更多的开发者来扩展jQuery。
51CTO推荐专题: 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代码:
#p#
- //扩展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);
【编辑推荐】