JQuery扩展

JQuery扩展





目录
1 JQUERY扩展 1
1.1 JQUERY的实例扩展 1
1.2 JQUERY的EXTEND扩展 1
2 JQUERY扩展参数验证器 1
2.1 JQUERY扩展参数验证器 1
2.2 参数验证器使用 3
3 JQUERY扩展JSON解析器 4
3.1 JQUERY将字符串转化为JSON对象 4
3.2 JQUERY将JSON对象转化为字符串 4



1 JQuery扩展
1.1 JQuery的实例扩展
Jquery中$是指jquery的命名空间，可以在$命名空间上加上方法及属性来达到对jquery实列的一个扩展。
如：扩展一个ajax字符转器。

$(function(){
		$.ajaxStr = function(str){
			str = str.replace(/%/g, "%25");  
			str = str.replace(/\&/g, "%26");  
			str = str.replace(/\+/g, "%2B");
			str = str.replace(/\'/g, "%27");
			str = str.replace(/\"/g, "%22");
			return str;
		};
});

在其他js文件中就可以直接调用该法。
1.2 JQuery的extend扩展
extend(ext,src1,src2,src3...);
它的含义是将src1,src2,src3...合并到ext中,返回值为合并后的dest,由此可以看出该方法合并后，是修改了ext的结构的。
如果想要得到合并的结果却又不想修改ext的结构，如下：
var result = $.extend({},src1,src2,src3...)//也就是将"{}"作为ext参数。
这样就可以将src1,src2,src3...进行合并，然后将合并结果返回给result。
2 JQuery扩展参数验证器
2.1 JQuery扩展参数验证器

$(function(){
	
	$.regCom = function(regAttr){
		return $.regCom.attr[regAttr];
	};

	/**
	 * 验证表达式
	 */
	$.regCom.attr = {
							 email:/^([\.a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]+){1,2})$/,
		//匹配名字只能输入数字或字母和下划线
		name:/^\w{1,128}$/,
		//8-20位全字符，不能是纯数字或纯字母
		password:/^(?![0-9]+$)(?![a-zA-Z]+$).{8,20}$/,
		//必填
		required:/\S+/,
		//描述
		note:/^[\s\S]{0,512}$/,
			
	};
	
	$.regMsg = function(regAttr){
		return $.regMsg.attr[regAttr];
	};

	/**
	 * 验证提示信息
	 */
	$.regMsg.attr = {
		defMsg:"Please enter a valid argument.",
		
		reqMsg:"This field is required.",
		pwdMsg:"Please enter a valid password.",
		nameMsg:'Allow number,letter and "_".',
		noteMsg:"Please keep within 512 characters",
		
	};
	
/**
	 * 验证器实现
	 */
$.validator = function(obj, alt){
		var val = $(obj).val(),flag = true;
		var validation = $.parseJSON($(obj).attr('valid'));
		if(alt == undefined ) alt = $(obj).parent().parent().find(".msg")[0];
		if(alt == undefined ) alt = $(obj).parents('tr').find(".msg")[0];
		if(alt == undefined ) alt = $(obj).parents('table').find(".msg");
		$(validation).each(function(){
			var reg = $.regCom(this.reg) == undefined ? new RegExp(this.reg) : $.regCom(this.reg);
			var msg = $.regMsg(this.msg) == undefined ? this.msg : $.regMsg(this.msg);
			if(!reg.test(val)){
				$(alt).text(msg);
				flag = false;
				return false;
			}else{
				$(alt).text("");
			}
		});	
		return flag;
	};


});

2.2 参数验证器使用

<div>
      <table>
        <tr><td width="30%">
<span class='red'>*</span>Project Name:</td>
        <td width="30%">
<input type="text" name="name" maxlength="80" valid='[{"reg":"required","msg":"Please input a project name."},{"reg":"name", "msg":"nameMsg"}]' class="valid"/></td>
        <td><span class="msg red"></span></td></tr>
        <tr><td>Project Note:</td><td>
<textarea name="note" class="valid" valid='[{"reg":"note","msg":"noteMsg"}]'></textarea></td>
<td><span class="msg red"></span></td></tr>
      </table>
  </div>

<script type="text/javascript">
	/************参数验证****************/
	$(".valid").blur(function(){
		$.validator(this);
	});
</script>

当输入框和描述框失去焦点的时候，就会触发焦点失去事件。使得参数valid的json字符串来验证并给出相应的提示信息。

3 JQuery扩展json解析器
3.1 JQuery将字符串转化为json对象
Jquery中提供了$.parseJSON(jsonStr)方法将json字符串转化为json对象。
也可以使用浏览器中自带的JSON对象的JSON.parse(jsonStr)将json字符串转化为json对象。
3.2 JQuery将json对象转化为字符串
要将json对象转化为字符串可以使用浏览器中的JSON对象的JSON.stringify(jsonObj)方法将json对象转化为json字符串。但是很多低版本浏览器不支持JSON对象，如IE7,IE6等。

JQuery中没有提供将json对象转化为字符串的方法，当然也可以引入一些json插件可以实现该功能。下面是自己写的一个简单json解析器，可以见json对象转化为json字符串。

$(function(){

 $.jsonToString = function (obj){
		
		var arr = [];
		var str = "";
		if (isArr(obj)) {
            for (var key in obj){
				alert(key);
                arr.push($.jsonToString(obj[key]));
            }
            str = '[' + arr.join(',') + ']';
        } else if (isObj(obj)) {
            for (var key in obj) {
			   obj[key] = isStr(obj[key]) ? '"'+obj[key]+'"':$.jsonToString(obj[key]);
			   arr.push('"'+key+'":'+obj[key]);
			   
            }
            str = '{' + arr.join(',') + '}';
        }
		return str;
	};
	
	
	function isArr(obj){
		return Object.prototype.toString.apply(obj) === '[object Array]';
	};
	
	function isObj(obj){
		return Object.prototype.toString.apply(obj) === '[object Object]';
	};
	
	function isStr(obj){
		return Object.prototype.toString.apply(obj) === '[object String]';
	}

});