手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >jquery遍历筛选数组的几种方法和遍历解析json对象
jquery遍历筛选数组的几种方法和遍历解析json对象
摘要:jquerygrep()筛选遍历数组复制代码代码如下:$().ready(function(){vararray=[1,2,3,4,5,6,...

jquery grep()筛选遍历数组

复制代码 代码如下:

$().ready(

function(){

var array = [1,2,3,4,5,6,7,8,9];

var filterarray = $.grep(array,function(value){

return value > 5;//筛选出大于5的

});

for(var i=0;i<filterarray.length;i++){

alert(filterarray[i]);

}

for (key in filterarray){

alert(filterarray[key]);

}

}

);

jquery each()筛选遍历数组

复制代码 代码如下:

$().ready(

function(){

var anObject = {one:1,two:2,three:3};//对json数组each

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

alert(name);

alert(value);

});

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

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

alert(n);

alert(value);

}

);

}

);

jquery inArray()筛选遍历数组

复制代码 代码如下:

$().ready(

function(){

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

var index = $.inArray(‘two',anArray);

alert(index);//返回该值在数组中的键值,返回1

alert(anArray[index]);//value is two

}

);

jquery map()筛选遍历数组

复制代码 代码如下:

$().ready(

function(){

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

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

var result = new Number(value);

return isNaN(result) ? null:result;//isNaN:is Not a Number的缩写

}

);

for (key in values) {

alert(values[key]);

}

}

);

js遍历解析json对象1

复制代码 代码如下:

var json = [{dd:'SB',AA:'东东',re1:123},{cccc:'dd',lk:'1qw'}];

for(var i=0,l=json.length;i<l;i++){

for(var key in json[i]){

alert(key+':'+json[i][key]);

}

}

js遍历解析json对象2

有如下 json对象:

var obj ={”name”:”冯娟”,”password”:”123456″,”department”:”技术部”,”sex”:” 女”,”old”:30};

遍历方法:

复制代码 代码如下:

for(var p in obj){

str = str+obj[p]+',';

return str;

}

下面通过例子来说明下具体实现方法

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元素

<span price="3">

<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文件:

复制代码 代码如下:

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

<html>

<head>

<title>$.getScript Example</title>

<link rel="stylesheet" type="text/css" href="../common.css">

<script type="text/javascript"

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

<script type="text/javascript">

$(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="loadButton">Load</button>

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

</body>

</html>

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

<html>

<head>

<title>$.getScript Example</title>

<link rel="stylesheet" type="text/css" href="../common.css">

<script type="text/javascript"

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

<script type="text/javascript">

$(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="loadButton">Load</button>

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

</body>

</html>

Js文件:

复制代码 代码如下:

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数组处理:

复制代码 代码如下:

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

<html>

<head>

<title>Hi!</title>

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

</script>

<script type="text/javascript">

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>

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

<html>

<head>

<title>Hi!</title>

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

</script>

<script type="text/javascript">

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遍历筛选数组的几种方法和遍历解析json对象】相关文章:

jQuery实现将页面上HTML标签换成另外标签的方法

js对象和json对象互相转换的问题

jQuery处理图片加载失败的常用方法

js验证上传图片的方法

javaScript中push函数用法实例分析

JavaScript数组去重的3种方法和代码实例

jQuery实现不断闪烁文字的方法

jQuery实现给页面换肤的方法

checkbox实现全选的多种方法 不断更新 原创

jQuery实现首页图片淡入淡出效果的方法

精品推荐
分类导航