工具函数可以分为以下几类: 浏览器的检测, 数组和对象的操作, 字符串操作, 测试操作, URL操作.
浏览器的检测
浏览器相关信息可以通过$.browser对象的属性来获取.属性如下:
Webkit
Mozilla
Safari
Opear
Msie
Version 版本
简单的例子:
<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);
})
</script>
我们还可以通过$.support.boxModel来确定页面是否是标准的W3C盒子模型,返回true则是,否则就是IE盒子模型.
数组和对象的操作
$.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);
})
$.each()函数遍历对象:
$(function() {
var strContent = "<li class='title'>属性:值</li>";
$.each($.ajaxSettings, function(Property, Value) {
strContent += "<li>" + Property + ":" + Value + "</li>";
})
$("ul").append(strContent);
})
$.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);
})
$.map()函数变更数据:
$(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);
})
$.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);
})
字符串操作
$.trim()函数可以除掉字符串左右两边的空格.
如:
var strOld = " jQuery,write less do more ";
var strNew = $.trim(strOld);
测试操作
测试工具函数有以下几个:
$.isArray(obj)
$.isFunction(obj)
$.isEmptyObject(obj)
$.isPlainObject(obj) // 检测obj是否一个纯粹的对象
$.contains(container, contained) // 检测一个DOM节点是否包含另一个DOM节点
URL操作
Serialize()函数是序列化表单向服务器提交数据,而他的核心则是$.param(),这个函数可以使数组或者对象按照name/value格式进行序列化.
$(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);
})
工具函数的扩展
工具函数的扩展就是自己编写类级别的插件.可以利用$.extend() .这里不过多叙述.