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]';
}
});