jQuery功能函数详解

前端之家收集整理的这篇文章主要介绍了jQuery功能函数详解前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

在javascript编程中,开发者通常需要编写很多小程序来实现一些特定的功能。例如浏览器检测,字符串处理、数组的编辑等。jQuery对这些常用的程序进行了总结,提供了很多实用的函数

1.检测浏览器。

jQuery通过$.browser对象获取浏览器信息。

属性说明 msie如果是ie为true,否则为false mozilla如果是mozilla相关的浏览器为true,否则为false safari如果是Safari浏览器为true,否则为false poera如果是opera浏览器为true,否则为false version浏览器的版本号 在使用时,开发者可以直接调用这些属性获取浏览器属性。如下:

代码如下:
版本为:" + $.browser.version)

});

2.盒子模型

在jQuery中提供了$.BoxModel对象来检测目前所遵循的盒子模型。它是一个布尔值,当为true时,表示遵循w3c标准盒子模型,如果false则为ie的盒子模型

var sBox = $.BoxModel ? "标准W3C" : "IE"; document.write("您的页面目前支持:" + sBox + "盒子模型"); 3.处理javascript对象。

在javascript编程中,可以说一切变量都是对象,例如字符串,日期和数值等。

jQuery提供了一些编辑的方法来处理相关的对象,例如$.trim()函数(首尾去空格) 函数就是其中之一

i.使用$each()方法遍历

前文介绍到each()方法,用于选择器的中的元素遍历,同样对于javascript的数组和对象,可以使用$.each()方法进行遍历。

$.each(object,fn); 其中,object为需要遍历的对象,fn为object中每个元素都执行的函数,其中函数fn可以接受两个参数,第一个参数为数组元素的序号或者是对象的属性。第二个参数为元素或者属性的值。

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

代码如下:
"); }); var oObj = { one: 1, two: 2, three: 3, four: 4, five: 5 }; $.each(oObj,function(pro,value) { //征对对象 document.write("属性" + pro + "值" + value + "
") });

从上面的例子可以看到,$.each()对遍历数组和对象都十分方便,例如对未知的属性$.browser,使用$.each进行遍历

$.each($.browser,value) { //征对数组 document.write("属性" + iNum + "值" + value + "
"); }); 得值:

属性chrome值true 属性version值39.0.2171.99 属性webkit值true ii.过滤数据

对于数组中的数据,很多时候开发者需要对其进行筛选,如果使用纯javascript,往往需for循环进行逐一检查。jQuery提供了$.grep()方法。能够便捷的过滤数组的数据。

其语法如下:

$.grep(Array,fn,[invert]) 其中,array是需要过滤的数组对象名称,fn为过滤函数,对数组中的每个对象,如果返回true则保留,否则去除。可选的invert为布尔值,如果设置为true.则函数fn取反,满足条件的被去除

代码如下:
= 4; }); document.write(aResult.join());

首先定义了数组aArray,然后用$.grep()方法将值大于等于4挑选出来得到新的数组

例子2,过滤数组的高级方法

代码如下:
= 4 && index > 3); });

document.write(aResult.join());

iii转化数组

很多时候开发者希望某个数组中的元素能够统一的转化,例如将所有的元素都乘以2.虽然在javascript中例如for循环可以实现,但是jQuery提供了更为便利的$.map()方法。这个方法如下

$.map(array,fn) 其中,array为要转化的数组,fn为转化函数,对数组中的每一项都执行,该函数同样可以接受两个函数,1个参数为元素的值。2个参数为元素的序号,是可选参数。

代码如下:
添加了序号 return (value.toUpperCase() + index); }); $("p:eq(1)").text(aArray.join());

cArray = $.map(aArray,function(value) { return value + value; }); $("p:eq(2)").text(cArray.join()); });

执行结果

a,b,c,d,e,f,g,h,i

A0,B1,C2,D3,E4,F5,G6,H7,I8

A0A0,B1B1,C2C2,D3D3,E4E4,F5F5,G6G6,H7H7,I8I8 使用$.map()函数进行转移后,数组长度不一定与原来的数组相同。可以通过设置null来删除数组的元素。

代码如下:
1?value+1:null; }); $("p:eq(2)").text("cArray长度:" + cArray.length + "值:" + cArray.join()); });

除了删除元素外,$.map转化数组时同样可以增加数组元素。

代码如下:

执行结果

one,two,three,four,five

cArray长度:19值:o,n,t,w,o,r,u,i,v,e 以上代码在$.map转化过程中,split("")方法将元素拆分为一个个字母

iiii搜索数组元素

对于字符串,可以通过indexOf()来搜索特定字符所处的位置,对于数组元素,javascript没有提供类似的方法。在jQ中,$.inArray()函数可以很好的数组元素的搜索功能。语法如下:

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

代码如下:

4.获取外部代码

在一些较大工程中,开发者将不同的js放在不同的js文件中,有时根据补贴的需求加载不同的代码。jQuery提供了$.getScript()实现外边的代码加载。使用方法如:

$.getScript(url,[callback]) 其中,url为外部资源的地址,可以是相对的,也可以是绝对的地址。callback为加载成功后的回调函数,可选。

代码如下:

点击1

点击2

其中1.js代码

代码如下:

原文链接:https://www.f2er.com/jquery/55960.html

猜你在找的jQuery相关文章