jquery工具类笔记

1 $browswer对象获得浏览器信息
<script type="text/javascript">
$(function() {
var strTmp = "您的浏览器名称是：";
if ($.browser.msie) { //IE浏览器
strTmp += "IE";
}
if ($.browser.mozilla) { //火狐相关浏览器
strTmp += "Mozilla FireFox";
}
strTmp += " 版本号是：" //获取版本号
+ $.browser.version;
$("#divTip").html(strTmp);
})

此外还有safari,opera等版本了

2）遍历数组each
$(function() {
var arrStu = { "张三：": "60", "李四：": "70", "王二：": "80" }
var strContent = "<li class='title'>姓名：分数</li>";
$.each(arrStu, function(Name, Value) {
strContent += "<li>" + Name + Value + "</li>";
})
$("ul").append(strContent);
})

3) 数据筛选
$.grep 筛选数组中的元素
$(function() {
var strTmp = "筛选前数据：";
var arrNum = [2, 8, 3, 7, 4, 9, 3, 10, 9, 7, 21];
var arrGet = $.grep(arrNum, function(ele, index) {
return ele > 5 && index < 8 //元素值大于5且序号小于8
})
strTmp += arrNum.join();
strTmp += "<br/><br>筛选后数据："
strTmp += arrGet.join();
$("#divTip").append(strTmp);
})
4） 数据变更
可以根据指定条件修改数组中的元素，比如：
$(function() {
var strTmp = "变更前数据：";
var arrNum = [2, 8, 3, 7, 4, 9, 3, 10, 9, 7, 21];
var arrGet = $.map(arrNum, function(ele, index) {
if (ele > 5 && index < 8) { //元素值大于5且序号小于8
return ele + 1; //元素增加1
}
})
strTmp += arrNum.join();
strTmp += "<br/><br>变更后数据："
strTmp += arrGet.join();
$("#divTip").append(strTmp);
})

5）在数组中进行搜索
$.inArray()
$(function() {
var strTmp = "待搜索数据：";
var arrNum = [4, 21, 2, 12, 5];
var arrPos = $.inArray(2, arrNum);
strTmp += arrNum.join();
strTmp += "<br/><br>搜索后结果："
strTmp += arrPos;
$("#divTip").append(strTmp);
})

$.inArray中，第一个参数是要搜索的元素的位置

6） $.trim()
删除左右两边个空格字符

7） 搜索数组
$(function() {
var strTmp = "待搜索数据：";
var arrNum = [4, 21, 2, 12, 5];
var arrPos = $.inArray(2, arrNum);
strTmp += arrNum.join();
strTmp += "<br/><br>搜索后结果："
strTmp += arrPos;
$("#divTip").append(strTmp);
})
8） isEmptyObject()
$(function() {
var obj0 = {};
var obj1 = { "name": "taoguorong" };
var strTmp = "obj0是否为空：" + $.isEmptyObject(obj0);
strTmp += "<br><br>obj1是否为空：" + $.isEmptyObject(obj1);
$("#divTip").append(strTmp);
})


9)$.isPainObject()
对象是否通过{}或者new Object()创建
$(function() {
var obj0 = {};
var obj1 = new Object();
var obj2 = "null";
var strTmp = "obj0是否为原始对象：" + $.isPlainObject(obj0);
strTmp += "<br><br>obj1是否为原始对象：" + $.isPlainObject(obj1);
strTmp += "<br><br>obj2是否为原始对象：" + $.isPlainObject(obj2);
$("#divTip").append(strTmp);
})
10) $.contains()检查两个节点是否包含关系
$(function() {
var node0 = document.documentElement;
var node1 = document.body;
var strTmp = "对象node0是否包含对象node1："
strTmp += $.contains(node0, node1);//检测两者的包含关系
$("#divTip").append(strTmp);
})

11） $.param()对数组进行序列化
$(function() {
var arrInfo = { id: 101, name: "tao", sex: 0 }; //基本信息数组
//分数和汇总信息数组
var arrScore = { Score: { chinese: 90, maths: 100, english: 98 },
SunNum: { Score: 288, Num: 3 }
};
//序列化各数组
var arrNewInfo = $.param(arrInfo);
var arrNewScore = $.param(arrScore);
var arrDecScore = decodeURIComponent($.param(arrScore));
//显示序列化后的数组
var strTmp = "<b>arrInfo数组序列化后</b>：";
strTmp += arrNewInfo;
strTmp += "<br><br><b>arrScore数组序列化后</b>：";
strTmp += arrNewScore;
strTmp += "<br><br><b>arrScore序列化解码后</b>：";
strTmp += arrDecScore;
//显示在页面中
$("#divTip").append(strTmp);
})
输出： arrInfo数组序列化后：id=101&name=tao&sex=0

arrScore数组序列化后：Score%5Bchinese%5D=90&Score%5Bmaths%5D=100&Score%5Benglish%5D=98&SunNum%5BScore%5D=288&SunNum%5BNum%5D=3

arrScore序列化解码后：Score[chinese]=90&Score[maths]=100&Score[english]=98&SunNum[Score]=288&SunNum[Num]=3

12) $.extend()函数
<script type="text/javascript">
/*------------------------------------------------------------/
功能：返回两个数中最大值
参数：数字p1,p2
返回：最大值的一个数
示例：$.MaxNum(1,2);
/------------------------------------------------------------*/
; (function($) {
$.extend({
"MaxNum": function(p1, p2) {
return (p1 > p2) ? p1 : p2;
}
});
})(jQuery);

/*------------------------------------------------------------/
功能：返回两个数中最小值
参数：数字p1,p2
返回：最小值的一个数
示例：$.MinNum(1,2);
/------------------------------------------------------------*/
; (function($) {
$.extend({
"MinNum": function(p1, p2) {
return (p1 > p2) ? p2 : p1;
}
});
})(jQuery);

$(function() {
var strTmp = "5与6中最大的数是：";
strTmp += $.MaxNum(5, 6);
strTmp += "<br><br>7与8中最小的数是：";
strTmp += $.MinNum(7, 8);
$("#divTip").append(strTmp);
})
</script>
$.extend()可以用扩展object
比如：
var objname={name:"张三“，sex:"男”｝；
var objInfo={name:"李四“，age:30};
var objLast=$.extend(objname,objInfo);
objInfo为被合拼的对象，结果为：
{name:"李四”，sex:"男“，age:30};
也就是说，如果合拼对象，且存在相同参数名称，则会对应覆盖；