jquery遍歷篩選數(shù)組的幾種方法和遍歷解析json對(duì)象
更新時(shí)間:2013年12月13日 17:04:23 作者:
本文為大家介紹下jquery遍歷篩選數(shù)組的幾種方法和遍歷解析json對(duì)象的具體實(shí)現(xiàn),感興趣的朋友不要錯(cuò)過
jquery grep()篩選遍歷數(shù)組
$().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()篩選遍歷數(shù)組
$().ready(
function(){
var anObject = {one:1,two:2,three:3};//對(duì)json數(shù)組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()篩選遍歷數(shù)組
$().ready(
function(){
var anArray = ['one','two','three'];
var index = $.inArray(‘two',anArray);
alert(index);//返回該值在數(shù)組中的鍵值,返回1
alert(anArray[index]);//value is two
}
);
jquery map()篩選遍歷數(shù)組
$().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對(duì)象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對(duì)象2
有如下 json對(duì)象:
var obj ={”name”:”馮娟”,”password”:”123456″,”department”:”技術(shù)部”,”sex”:” 女”,”old”:30};
遍歷方法:
for(var p in obj){
str = str+obj[p]+',';
return str;
}
下面通過例子來說明下具體實(shí)現(xiàn)方法
JQuery拿取對(duì)象的方式
$(‘#id') :通過元素的id
$(‘tagName') : 通過元素的標(biāo)簽名
$(‘tagName tagName') : 通過元素的標(biāo)簽名,eg: $(‘ul li')
$(‘tagName#id): 通過元素的id和標(biāo)簽名
$(‘: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的上(至少都是父節(jié)點(diǎn))的第一個(gè)div節(jié)點(diǎn)
$('~ 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中會(huì)出現(xiàn)一個(gè)錯(cuò)誤(語法錯(cuò)誤,定義的變量不起作用,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中會(huì)出現(xiàn)一個(gè)錯(cuò)誤(語法錯(cuò)誤,定義的變量不起作用,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數(shù)組處理:
<!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的符號(hào):jQuery(function($){...}/這樣就可以了
//alert(jQuery)
});
jQuery(function($){
//------------遍歷數(shù)組 .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);
});
//-----------過濾數(shù)組 .grep的使用------------
var originalArray =[99,101,103];
var bigNumbers = $.grep(originalArray,'a>100');//第2種寫法,還可以用正則表達(dá)式來過濾
$.each(bigNumbers,function(n,value) {
//do something here
//alert(n+' '+value);
});
//------------轉(zhuǎn)換數(shù)組 .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不是數(shù)字則 返回null(返回null在這里相當(dāng)于不返回)
});
$.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下標(biāo)的位置,如果value不在array中則返回-1
var index = $.inArray(2,[1,2,3,4,5]);
//alert(index);
//------------makeArray(obj)的使用------------將類數(shù)組對(duì)象轉(zhuǎn)換為數(shù)組對(duì)象。
var arr = jQuery.makeArray(document.getElementsByTagName_r("div"));
//arr.reverse(); // 使用數(shù)組翻轉(zhuǎn)函數(shù)
$.each(arr,function(n,value) {
//do something here
//alert(n+' '+value);
//alert(value.html());
});
var arr2 =$.unique(document.getElementsByTagName_r("div")); //獲得唯一的對(duì)象,看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的符號(hào):jQuery(function($){...}/這樣就可以了
//alert(jQuery)
});
jQuery(function($){
//------------遍歷數(shù)組 .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);
});
//-----------過濾數(shù)組 .grep的使用------------
var originalArray =[99,101,103];
var bigNumbers = $.grep(originalArray,'a>100');//第2種寫法,還可以用正則表達(dá)式來過濾
$.each(bigNumbers,function(n,value) {
//do something here
//alert(n+' '+value);
});
//------------轉(zhuǎn)換數(shù)組 .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不是數(shù)字則 返回null(返回null在這里相當(dāng)于不返回)
});
$.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下標(biāo)的位置,如果value不在array中則返回
-1
var index = $.inArray(2,[1,2,3,4,5]);
//alert(index);
//------------makeArray(obj)的使用------------將類數(shù)組對(duì)象轉(zhuǎn)換為數(shù)組對(duì)象。
var arr = jQuery.makeArray(document.getElementsByTagName_r("div"));
//arr.reverse(); // 使用數(shù)組翻轉(zhuǎn)函數(shù)
$.each(arr,function(n,value) {
//do something here
//alert(n+' '+value);
//alert(value.html());
});
var arr2 =$.unique(document.getElementsByTagName_r("div")); //獲得唯一的對(duì)象,看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>
復(fù)制代碼 代碼如下:
$().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()篩選遍歷數(shù)組
復(fù)制代碼 代碼如下:
$().ready(
function(){
var anObject = {one:1,two:2,three:3};//對(duì)json數(shù)組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()篩選遍歷數(shù)組
復(fù)制代碼 代碼如下:
$().ready(
function(){
var anArray = ['one','two','three'];
var index = $.inArray(‘two',anArray);
alert(index);//返回該值在數(shù)組中的鍵值,返回1
alert(anArray[index]);//value is two
}
);
jquery map()篩選遍歷數(shù)組
復(fù)制代碼 代碼如下:
$().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對(duì)象1
復(fù)制代碼 代碼如下:
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對(duì)象2
有如下 json對(duì)象:
var obj ={”name”:”馮娟”,”password”:”123456″,”department”:”技術(shù)部”,”sex”:” 女”,”old”:30};
遍歷方法:
復(fù)制代碼 代碼如下:
for(var p in obj){
str = str+obj[p]+',';
return str;
}
下面通過例子來說明下具體實(shí)現(xiàn)方法
JQuery拿取對(duì)象的方式
$(‘#id') :通過元素的id
$(‘tagName') : 通過元素的標(biāo)簽名
$(‘tagName tagName') : 通過元素的標(biāo)簽名,eg: $(‘ul li')
$(‘tagName#id): 通過元素的id和標(biāo)簽名
$(‘: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的上(至少都是父節(jié)點(diǎn))的第一個(gè)div節(jié)點(diǎn)
$('~ span:first',this): locates the first sibling of this that's a <span> element.
延遲加載js文件:
$.getScript
例子:
Html文件:
復(fù)制代碼 代碼如下:
<!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中會(huì)出現(xiàn)一個(gè)錯(cuò)誤(語法錯(cuò)誤,定義的變量不起作用,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中會(huì)出現(xiàn)一個(gè)錯(cuò)誤(語法錯(cuò)誤,定義的變量不起作用,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文件:
復(fù)制代碼 代碼如下:
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數(shù)組處理:
復(fù)制代碼 代碼如下:
<!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的符號(hào):jQuery(function($){...}/這樣就可以了
//alert(jQuery)
});
jQuery(function($){
//------------遍歷數(shù)組 .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);
});
//-----------過濾數(shù)組 .grep的使用------------
var originalArray =[99,101,103];
var bigNumbers = $.grep(originalArray,'a>100');//第2種寫法,還可以用正則表達(dá)式來過濾
$.each(bigNumbers,function(n,value) {
//do something here
//alert(n+' '+value);
});
//------------轉(zhuǎn)換數(shù)組 .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不是數(shù)字則 返回null(返回null在這里相當(dāng)于不返回)
});
$.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下標(biāo)的位置,如果value不在array中則返回-1
var index = $.inArray(2,[1,2,3,4,5]);
//alert(index);
//------------makeArray(obj)的使用------------將類數(shù)組對(duì)象轉(zhuǎn)換為數(shù)組對(duì)象。
var arr = jQuery.makeArray(document.getElementsByTagName_r("div"));
//arr.reverse(); // 使用數(shù)組翻轉(zhuǎn)函數(shù)
$.each(arr,function(n,value) {
//do something here
//alert(n+' '+value);
//alert(value.html());
});
var arr2 =$.unique(document.getElementsByTagName_r("div")); //獲得唯一的對(duì)象,看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的符號(hào):jQuery(function($){...}/這樣就可以了
//alert(jQuery)
});
jQuery(function($){
//------------遍歷數(shù)組 .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);
});
//-----------過濾數(shù)組 .grep的使用------------
var originalArray =[99,101,103];
var bigNumbers = $.grep(originalArray,'a>100');//第2種寫法,還可以用正則表達(dá)式來過濾
$.each(bigNumbers,function(n,value) {
//do something here
//alert(n+' '+value);
});
//------------轉(zhuǎn)換數(shù)組 .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不是數(shù)字則 返回null(返回null在這里相當(dāng)于不返回)
});
$.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下標(biāo)的位置,如果value不在array中則返回
-1
var index = $.inArray(2,[1,2,3,4,5]);
//alert(index);
//------------makeArray(obj)的使用------------將類數(shù)組對(duì)象轉(zhuǎn)換為數(shù)組對(duì)象。
var arr = jQuery.makeArray(document.getElementsByTagName_r("div"));
//arr.reverse(); // 使用數(shù)組翻轉(zhuǎn)函數(shù)
$.each(arr,function(n,value) {
//do something here
//alert(n+' '+value);
//alert(value.html());
});
var arr2 =$.unique(document.getElementsByTagName_r("div")); //獲得唯一的對(duì)象,看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>
您可能感興趣的文章:
- JS數(shù)組及對(duì)象遍歷方法代碼匯總
- JavaScript遍歷數(shù)組和對(duì)象的元素簡(jiǎn)單操作示例
- js/jquery遍歷對(duì)象和數(shù)組的方法分析【forEach,map與each方法】
- JS中數(shù)組與對(duì)象的遍歷方法實(shí)例小結(jié)
- JQuery $.each遍歷JavaScript數(shù)組對(duì)象實(shí)例
- Javascript的數(shù)組與字典用法與遍歷對(duì)象的屬性技巧
- JS遍歷數(shù)組和對(duì)象的區(qū)別及遞歸遍歷對(duì)象、數(shù)組、屬性的方法詳解
- javaScript遍歷對(duì)象和數(shù)組的方法總結(jié)
相關(guān)文章
jquery 面包屑導(dǎo)航 具體實(shí)現(xiàn)
jquery 面包屑導(dǎo)航 具體實(shí)現(xiàn),需要的朋友可以參考一下2013-06-06一個(gè)實(shí)用的圖片切換支持點(diǎn)擊切換和自動(dòng)輪播
這篇文章主要介紹了一個(gè)實(shí)用的圖片切換支持點(diǎn)擊切換和自動(dòng)輪播,經(jīng)測(cè)試效果相當(dāng)不錯(cuò),需要的朋友可以參考下2014-09-09innerHTML與jquery里的html()區(qū)別介紹
我原本一直以為innerHTML和jquery里的html其實(shí)是完全一樣的,jquery是多此一舉了,直到我遇到一次問題2012-10-10實(shí)用的Jquery選項(xiàng)卡TAB示例代碼
Jquery選項(xiàng)卡想必大家并不陌生,本文為大家介紹個(gè)比較實(shí)用的jquery TAB選項(xiàng)卡,喜歡的朋友可以學(xué)習(xí)下2013-08-08jquery對(duì)table做排序操作的實(shí)例演示
這篇文章主要介紹了jquery對(duì)table做排序操作的實(shí)例演示,通過添加自定義屬性data-sort-field-ftime及表頭添加onchange事件詳細(xì)講解了操作過程,需要的朋友可以參考下2017-08-08jquery實(shí)現(xiàn)廣告上下滾動(dòng)效果
這篇文章主要為大家詳細(xì)介紹了jquery實(shí)現(xiàn)廣告上下滾動(dòng)效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-03-03