jquery 遍历数组 each 方法详解

当前位置：首页 > 范文|应用文 > IT技术专栏 > 网络编程

来源：阅读：1091 次日期：2016-06-23 11:33:55

温馨提示：小编为您整理了“jquery 遍历数组 each 方法详解”,方便广大网友查阅！

下面小编就为大家带来一篇jquery 遍历数组 each 方法详解。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。

JQuery拿取对象的方式：

$(‘#id') ：通过元素的id

$(‘tagName') : 通过元素的标签名

$(‘tagName tagName') : 通过元素的标签名,eg: $(‘ul li')

$(‘tagName#id): 通过元素的id和标签名

$(‘:checkbox'):拿取input的 type为checkbox'的所有元素:

Eg：

代码如下:

<input type="checkbox" name="appetizers"

value="imperial"/>

$('span[price] input[type=text]') ：拿取下面的input元素

<input type="text" name="imperial.quantity"

disabled="disabled" value="1"/>

</span>

$('div',$(this).parents('div:first'))：拿取该div的上（至少都是父节点）的第一个div节点

$('~ span:first',this)： locates the first sibling of this that's a <span> element.

延迟加载js文件：

$.getScript

例子：

Html文件:

Java代码

代码如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<title>$.getScript Example</title>

src="../scripts/jquery-1.2.1.js"></script>

$(function(){

$('#loadButton').click(function(){

$.getScript(//在Firefox/3.0.1中会出现一个错误(语法错误,定义的变量不起作用,ff2没问题)

'new.stuff.js'//,function(){$('#inspectButton').click()}

);

});

$('#inspectButton').click(function(){

someFunction(someVariable);

test()

});

</script>

</head>

<body>

<button type="button" id="inspectButton">Inspect</button>

</body>

</html>

Js文件:

Java代码

代码如下:

alert("I'm inline!");

var someVariable = 'Value of someVariable';

function someFunction(value) {

alert(value);

}

function test() {

alert('test');

}

alert("I'm inline!");

var someVariable = 'Value of someVariable';

function someFunction(value) {

alert(value);

}

function test() {

alert('test');

}

jquery数组处理：

Java代码

代码如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

</script>

var $ = 'Hi!';

jQuery(function(){

alert('$ = '+ $);//这里的 $ 为 Hi!,把它变回jquery的符号:jQuery(function($){...}/这样就可以了

//alert(jQuery)

});

jQuery(function($){

//------------遍历数组 .each的使用-------------

var anArray = ['one','two','three'];

$.each(anArray,function(n,value) {

//do something here

//alert(n+' '+value);

});

var anObject = {one:1, two:2, three:3};

$.each(anObject,function(name,value) {

//do something here

//alert(name+' '+value);

});

//-----------过滤数组 .grep的使用------------

var originalArray =[99,101,103];

var bigNumbers = $.grep(originalArray,'a>100');//第2种写法,还可以用正则表达式来过滤

$.each(bigNumbers,function(n,value) {

//do something here

//alert(n+' '+value);

});

//------------转换数组 .map的使用------------

var strings = ['1','2','3','4','S','K','6'];

var values = $.map(strings,function(value){

var result = new Number(value);

return isNaN(result) ? null : result;//如果result不是数字则返回null（返回null在这里相当于不返回）

});

$.each(values,function(n,value) {

//do something here

//alert(value);

});

var characters = $.map(

['this','that','other thing'],

function(value){return value.split('');}//分离字符串用返回给characters

);

//alert(characters.length);

//------------.inArray(value,array)的使用------------返回value在array下标的位置，如果value不在array中则返回

-1

var index = $.inArray(2,[1,2,3,4,5]);

//alert(index);

//------------makeArray(obj)的使用------------将类数组对象转换为数组对象。

var arr = jQuery.makeArray(document.getElementsByTagName_r("div"));

//arr.reverse(); // 使用数组翻转函数

$.each(arr,function(n,value) {

//do something here

//alert(n+' '+value);

//alert(value.html());

});

var arr2 =$.unique(document.getElementsByTagName_r("div")); //获得唯一的对象，看API,说得很模

糊,http://docs.jquery.com/Utilities/jQuery.unique

alert();

$.each(arr2,function(n,value) {

//do something here

alert(n+' '+value);

});

</script>

</head>

<body>

<div>First</div><div>Second</div><div>Third</div><div>Fourth</div><div>Fourth</div>

</body>

</html>

以上这篇jquery 遍历数组 each 方法详解就是小编分享给大家的全部内容了，希望能给大家一个参考

上一篇：浅析jQuery 遍历函数，javascript中的each遍历

下一篇：jquery分隔Url的param方法(推荐)

手机网站地址：jquery 遍历数组 each 方法详解

由于各方面情况的不断调整与变化，提供的所有考试信息和咨询回复仅供参考，敬请考生以权威部门公布的正式信息和咨询为准！