实例解析jQuery工具函数
一、$.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" ""> <html xmlns="">。则弹出的是IE盒子模型。
数组和对象的操作
三、$.each()
此工具函数不仅能够完成指定数组的遍历,还能够实现页面中元素的遍历。
语法:$.each(obj,fn(para1,para2)) obj要遍历的数组或对象,fn为每个遍历元素执行的回调函数,para1表示数组的序号或对象的属性,para2表示数组的元素和对象的属性。
$(function () { var arr = [1, 2, 3, 4, 5]; $.each(arr, function (index, value) { document.write(index + ":"); document.write(value + "<br/>"); }); }) 输出: 0:1 1:2 2:3 3:4 4:5
$.each()遍历数组。
$(function () { var arr = { "张三": "23","李四": 22,"王五": "21" }; $.each(arr, function (index, value) { document.write(index + ":"); document.write(value + "<br/>"); }); }) 输出:张三:23 李四:22 王五:21
元素遍历
<head> <title></title> <script src="jQuery.1.8.3.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { $("p").each(function () { $(this).css("background-color", "red"); }); //一下三行代码与以上三行效果一样 //$.each($("p"), function () { // $(this).css("background-color", "red"); /