实例解析jQuery工具函数

2020-05-24 21:41:15易采站长站整理

一、$.browser对象属性

  属性列表                  说明

    webkit       webkit相关浏览器则返回true,否则返回false,如google,傲游。

    mozilla       mozilla相关浏览器则返回true,否则返回false,如火狐

       safari         safari相关浏览器则返回true,否则返回false,如safari

       opera        opera相关浏览器则返回true,否则返回false,如opera

       msie        msie相关浏览器则返回true,否则返回false,如IE,360,搜狗

       version       返回对应浏览器的版本


$(function () {
if ($.browser.msie) {
alert("IE浏览器");
}
if ($.browser.webkit) {
alert("webkit浏览器");
}
if ($.browser.mozilla) {
alert("mozilla浏览器");
}
if ($.browser.safari) {
alert("safari浏览器");
}
if ($.browser.opera) {
alert("opera浏览器");
}
alert($.browser.version);
})

二、boxModel

  返回一个布尔值,如果是W3C盒子模型则返回true,否则返回false。

  盒子模型分两类,一类是W3C盒子模型,一类是IE盒子模型。两者的根本区别在于W3C的盒子模型不包括padding与border,仅指content的Height和Width,而IE盒子模型  包含padding与border。


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="jQuery.1.8.3.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
if ($.support.boxModel) {
alert("W3C盒子模型!");
}
else {
alert("IE盒子模型!");
}
})
</script>
</head>
<body>
</body>
</html>

  上面的例子弹出W3C盒子模型,如果删除掉顶部的两行,<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> <html xmlns=”http://www.w3.org/1999/xhtml”>。则弹出的是IE盒子模型。

数组和对象的操作

三、$.each()

  此工具函数不仅能够完成指定数组的遍历,还能够实现页面中元素的遍历。

  语法:$.each(obj,fn(para1,para2))  obj要遍历的数组或对象,fn为每个遍历元素执行的回调函数,para1表示数组的序号或对象的属性,para2表示数组的元素和对象的属性。