jquery遍歷篩選數組的幾種方法和遍歷解析json對象

2019-11-20 21:28:05

字體：大中小

來源：轉載

供稿：網友

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> 