jQuery功能函数的全面解析

发表时间: 2023-12-21 10:49

检测浏览器

$.browser对象即jQuery.browser对象的缩写, 它自身包含了5个用于检测各种浏览器以及版本号的属性;

msie 如果是IE浏览器则为true,否则为false

mozilla 如果是mozilla相关的浏览器则为true, 例如firefox、camino、netscape等

safari 如果是safari浏览器则为true, 否则是false 例如苹果的Safari浏览器、谷歌chrome浏览器

opera 如果是opera浏览器则为true, 否则为false

version 浏览器的版本号

<script language="javascript" src="jquery.min.js"></script><script language="javascript">function detect(){    if($.browser.msie)    return "IE";    if($.browser.mozilla)    return "Mozilla";    if($.browser.safari)    return "Safari";    if($.browser.opera)    return "Opera";}var sBrowser = detect();document.write("您的浏览器是："+sBrowser+"<br>版本为："+$.browser.version)</script>

盒子模型

$.boxModel对象来检测目前所遵循的盒子模型

W3C height和width是content的宽度和高度

IE height和width是(content+padding+border)的宽度和高度

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">上述语句让IE支持标准W3C盒子模型<script language="javascript" src="jquery.min.js"></script><script language="javascript">var sBox = $.boxModel ? "标准W3C":"IE";document.write("您的页面目前支持："+sBox+"盒子模型");</script>

处理javascript对象

使用$.each()方法遍历

$.each(object,fn);其中object为需要遍历的对象,fn为object中的每个元素都执行的函数;

其中函数fn可以接受两个参数,第1个参数为数组元素的序号或者对象的属性,第2个参数为元素或者属性的值;

简单的用法见jQuery控制页面

用$.each()函数遍历数组和对象

var aArray = ["one", "two", "three", "four", "five"];$.each(aArray,function(iNum,value){//针对数组document.write("序号:" + iNum + " 值:" + value + "<br>");});var oObj = {one:1, two:2, three:3, four:4, five:5}; //创建对象$.each(oObj, function(property,value) {//针对对象document.write("属性:" + property + " 值:" + value + "<br>");});

用$.each()方法来获取未知对象的信息

$.each($.browser, function(property,value) {//遍历对象$.browserdocument.write("属性:" + property + " 值:" + value + "<br>");});

过滤数组

$.grep(array,fn,[invert])

其中array为需要过滤的数组对象;

fn为过滤函数,对数组中的每个对象,如果返回true则保留,否则去除;

可选的invert为布尔值,如果设置为true则函数fn的规则取反,满足条件的被去除;

jQuery过滤数组元素

var aArray = [2, 9, 3, 8, 6, 1, 5, 9, 4, 7, 3, 8, 6, 9, 1];var aResult = $.grep(aArray,function(value){return value > 4; //比较运算符返回bool值});document.write("aArray: " + aArray.join() + "<br>");document.write("aResult: " + aResult.join());

另外,过滤函数可以接受第2个参数,即数组元素的序号,从而使开发者可以更加灵活地控制过滤结果

jQuery过滤数组元素的高级方法

var aArray = [2, 9, 3, 8, 6, 1, 5, 9, 4, 7, 3, 8, 6, 9, 1];var aResult = $.grep(aArray,function(value, index){//元素的值value和序号index同时判断return (value > 4 && index > 3);});document.write("aArray: " + aArray.join() + "<br>");document.write("aResult: " + aResult.join());

转化数组

$.map(array,fn)

其中array为希望转化的数组,fn为转化函数,对数组中的每一项都执行,

该函数同样可以接受两个参数,第一个参数为元素的值,第2个参数为元素的序号,是可选参数;

jQuery实现数组元素的统一转化

jQuery代码:

$(function(){var aArr = ["a", "b", "c", "d", "e"];$("p:eq(0)").text(aArr.join());aArr = $.map(aArr,function(value,index){//将数组转化为大写并添加序号return (value.toUpperCase() + index);});$("p:eq(1)").text(aArr.join());aArr = $.map(aArr,function(value){//将数组元素的值双份处理return value + value;});$("p:eq(2)").text(aArr.join());});

HTML代码:

<p></p><p></p><p></p>

搜索数组元素

对于字符串,可以通过indexOf()来搜索特定子字符串所处的位置,而对于数组元素,javascript没有提供类似的方法.jQuery中的

$.inArray()函数可以很好地实现数组元素的搜索功能;

$.inArray(value,array)

其中value为希望查找的对象,而array为数组本身,如果找到了则返回第一个匹配元素在数组中的位置,如果没有找到则返回-1

jQuery代码:

$(function(){var aArr = ["one", "two", "three", "four five", "two"];var pos1 = $.inArray("two",aArr);var pos2 = $.inArray("four",aArr);$("p:eq(0)").text("“two”的位置：" + pos1);$("p:eq(1)").text("“four”的位置：" + pos2);});

HTML代码:

<p></p><p></p>

获取外部代码

$.getScript(url,[callback])

url为外部资源的地址,可以是相对地址,也可以是绝对地址,callback为加载成功后运行的回调函数

载入 <a title="
http://jquery.com/plugins/project/color" class="external text" href="
http://jquery.com/plugins/project/color">

jQuery 官方颜色动画插件</a> 成功后绑定颜色变化动画。

jQuery 代码:

jQuery.getScript("http://dev.jquery.com/view/trunk/plugins/color/jquery.color.js", function(){$("#go").click(function(){$(".block").animate( { backgroundColor: 'pink' }, 1000).animate( { backgroundColor: 'blue' }, 1000);});});

HTML 代码:

<button id="go">» Run</button><div class="block"></div>

加载并执行 test.js ，成功后显示信息。

jQuery 代码:

$.getScript("test.js", function(){alert("Script loaded and executed.");});

jQuery功能函数的全面解析

热门阅读

推荐阅读