jQuery使用工具函数

工具函数可以分为以下几类: 浏览器的检测, 数组和对象的操作, 字符串操作, 测试操作, 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() .这里不过多叙述.