jquery遍历筛选数组的几种方法和遍历解析json对象
2023-06-13 09:15:14 时间
jquerygrep()筛选遍历数组
复制代码代码如下:
$().ready(
function(){
vararray=[1,2,3,4,5,6,7,8,9];
varfilterarray=$.grep(array,function(value){
returnvalue>5;//筛选出大于5的
});
for(vari=0;i<filterarray.length;i++){
alert(filterarray[i]);
}
for(keyinfilterarray){
alert(filterarray[key]);
}
}
);
jqueryeach()筛选遍历数组
$().ready(
function(){
varanObject={one:1,two:2,three:3};//对json数组each
$.each(anObject,function(name,value){
alert(name);
alert(value);
});
varanArray=["one","two","three"];
$.each(anArray,function(n,value){
alert(n);
alert(value);
}
);
}
);
jqueryinArray()筛选遍历数组
$().ready(
function(){
varanArray=["one","two","three"];
varindex=$.inArray(‘two",anArray);
alert(index);//返回该值在数组中的键值，返回1
alert(anArray[index]);//valueistwo
}
);
jquerymap()筛选遍历数组
$().ready(
function(){
varstrings=["0","1","2","3","4","S","6"];
varvalues=$.map(strings,function(value){
varresult=newNumber(value);
returnisNaN(result)?null:result;//isNaN:isNotaNumber的缩写
}
);
for(keyinvalues){
alert(values[key]);
}
}
);
js遍历解析json对象1
varjson=[{dd:"SB",AA:"东东",re1:123},{cccc:"dd",lk:"1qw"}];
for(vari=0,l=json.length;i<l;i++){
for(varkeyinjson[i]){
alert(key+":"+json[i][key]);
}
}
js遍历解析json对象2
有如下json对象：
varobj={”name”:”冯娟”,”password”:”123456″,”department”:”技术部”,”sex”:”女”,”old”:30};
遍历方法：
for(varpinobj){
str=str+obj[p]+",";
returnstr;
}
下面通过例子来说明下具体实现方法
JQuery拿取对象的方式
$(‘#id")：通过元素的id
$(‘tagName"):通过元素的标签名
$(‘tagNametagName"):通过元素的标签名,eg:$(‘ulli")
$(‘tagName#id):通过元素的id和标签名
$(‘:checkbox"):拿取input的type为checkbox"的所有元素:
Eg:<inputtype="checkbox"name="appetizers"
value="imperial"/>
$("span[price]input[type=text]")：拿取下面的input元素
<spanprice="3">
<inputtype="text"name="imperial.quantity"
disabled="disabled"value="1"/>
</span>
$("div",$(this).parents("div:first"))：拿取该div的上（至少都是父节点）的第一个div节点
$("~span:first",this)：locatesthefirstsiblingofthisthat"sa<span>element.
延迟加载js文件：
$.getScript
例子：
Html文件:
<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01//EN""http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>$.getScriptExample</title>
<linkrel="stylesheet"type="text/css"href="../common.css">
<scripttype="text/javascript"
src="../scripts/jquery-1.2.1.js"></script>
<scripttype="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>
<buttontype="button"id="loadButton">Load</button>
<buttontype="button"id="inspectButton">Inspect</button>
</body>
</html>
<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01//EN""http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>$.getScriptExample</title>
<linkrel="stylesheet"type="text/css"href="../common.css">
<scripttype="text/javascript"
src="../scripts/jquery-1.2.1.js"></script>
<scripttype="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>
<buttontype="button"id="loadButton">Load</button>
<buttontype="button"id="inspectButton">Inspect</button>
</body>
</html>
Js文件:
alert("I"minline!");
varsomeVariable="ValueofsomeVariable";
functionsomeFunction(value){
alert(value);
}
functiontest(){
alert("test");
}
alert("I"minline!");
varsomeVariable="ValueofsomeVariable";
functionsomeFunction(value){
alert(value);
}
functiontest(){
alert("test");
}
jquery数组处理：
<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01//EN""http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Hi!</title>
<scripttype="text/javascript"src="../scripts/jquery-1.2.1.js">
</script>
<scripttype="text/javascript">
var$="Hi!";
jQuery(function(){
alert("$="+$);//这里的$为Hi!,把它变回jquery的符号:jQuery(function($){...}/这样就可以了
//alert(jQuery)
});
jQuery(function($){
//------------遍历数组.each的使用-------------
varanArray=["one","two","three"];
$.each(anArray,function(n,value){
//dosomethinghere
//alert(n+""+value);
});
varanObject={one:1,two:2,three:3};
$.each(anObject,function(name,value){
//dosomethinghere
//alert(name+""+value);
});
//-----------过滤数组.grep的使用------------
varoriginalArray=[99,101,103];
varbigNumbers=$.grep(originalArray,"a>100");//第2种写法,还可以用正则表达式来过滤
$.each(bigNumbers,function(n,value){
//dosomethinghere
//alert(n+""+value);
});
//------------转换数组.map的使用------------
varstrings=["1","2","3","4","S","K","6"];
varvalues=$.map(strings,function(value){
varresult=newNumber(value);
returnisNaN(result)?null:result;//如果result不是数字则返回null（返回null在这里相当于不返回）
});
$.each(values,function(n,value){
//dosomethinghere
//alert(value);
});
varcharacters=$.map(
["this","that","otherthing"],
function(value){returnvalue.split("");}//分离字符串用返回给characters
);
//alert(characters.length);
//------------.inArray(value,array)的使用------------返回value在array下标的位置，如果value不在array中则返回-1
varindex=$.inArray(2,[1,2,3,4,5]);
//alert(index);
//------------makeArray(obj)的使用------------将类数组对象转换为数组对象。
vararr=jQuery.makeArray(document.getElementsByTagName_r("div"));
//arr.reverse();//使用数组翻转函数
$.each(arr,function(n,value){
//dosomethinghere
//alert(n+""+value);
//alert(value.html());
});
vararr2=$.unique(document.getElementsByTagName_r("div"));//获得唯一的对象，看API,说得很模
糊,http://docs.jquery.com/Utilities/jQuery.unique
alert();
$.each(arr2,function(n,value){
//dosomethinghere
alert(n+""+value);
});
});
</script>
</head>
<body>
<div>First</div><div>Second</div><div>Third</div><div>Fourth</div><div>Fourth</div>
</body>
</html>
<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01//EN""http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Hi!</title>
<scripttype="text/javascript"src="../scripts/jquery-1.2.1.js">
</script>
<scripttype="text/javascript">
var$="Hi!";
jQuery(function(){
alert("$="+$);//这里的$为Hi!,把它变回jquery的符号:jQuery(function($){...}/这样就可以了
//alert(jQuery)
});
jQuery(function($){
//------------遍历数组.each的使用-------------
varanArray=["one","two","three"];
$.each(anArray,function(n,value){
//dosomethinghere
//alert(n+""+value);
});
varanObject={one:1,two:2,three:3};
$.each(anObject,function(name,value){
//dosomethinghere
//alert(name+""+value);
});
//-----------过滤数组.grep的使用------------
varoriginalArray=[99,101,103];
varbigNumbers=$.grep(originalArray,"a>100");//第2种写法,还可以用正则表达式来过滤
$.each(bigNumbers,function(n,value){
//dosomethinghere
//alert(n+""+value);
});
//------------转换数组.map的使用------------
varstrings=["1","2","3","4","S","K","6"];
varvalues=$.map(strings,function(value){
varresult=newNumber(value);
returnisNaN(result)?null:result;//如果result不是数字则返回null（返回null在这里相当于不返回）
});
$.each(values,function(n,value){
//dosomethinghere
//alert(value);
});
varcharacters=$.map(
["this","that","otherthing"],
function(value){returnvalue.split("");}//分离字符串用返回给characters
);
//alert(characters.length);
//------------.inArray(value,array)的使用------------返回value在array下标的位置，如果value不在array中则返回
-1
varindex=$.inArray(2,[1,2,3,4,5]);
//alert(index);
//------------makeArray(obj)的使用------------将类数组对象转换为数组对象。
vararr=jQuery.makeArray(document.getElementsByTagName_r("div"));
//arr.reverse();//使用数组翻转函数
$.each(arr,function(n,value){
//dosomethinghere
//alert(n+""+value);
//alert(value.html());
});
vararr2=$.unique(document.getElementsByTagName_r("div"));//获得唯一的对象，看API,说得很模
糊,http://docs.jquery.com/Utilities/jQuery.unique
alert();
$.each(arr2,function(n,value){
//dosomethinghere
alert(n+""+value);
});
});
</script>
</head>
<body>
<div>First</div><div>Second</div><div>Third</div><div>Fourth</div><div>Fourth</div>
</body>
</html>
相关文章
- jQuery 的随机密码生成详解编程语言
- 通过jQuery预加载图片的方法详解编程语言
- jQuery使用个人心得
- checkbox全选/取消全选以及checkbox遍历jQuery实现代码
- jQuery温习篇强大的JQuery选择器
- javascript,jquery闭包概念分析
- Jquery从头学起第四讲jquery入门教程
- jQuery代码优化遍历篇
- jquery怎样实现ajax联动框(一)
- jQuery学习笔记(4)--Jquery中获取table中某列值的具体思路
- 『jQuery』.html(),.text()和.val()的概述及使用
- Jquery实现三层遍历删除功能代码
- jQuery遍历-关于closest()的方法介绍以及与parents()的方法区别分析
- Jquery表单验证类介绍与实例
- jquery获取一组checkbox的值(实例代码)
- jquery遍历数组与筛选数组的方法
- jquery获取元素索引值index()示例
- jquery数组封装使用方法分享(jquery数组遍历)
- jQuery学习笔记之Ajax操作篇（三）-过程处理
- jQuery删除或是清空某个HTML元素示例
- JQuery$.each遍历JavaScript数组对象实例