欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

jquery遍历筛选数组的几种方法和遍历解析json对象

程序员文章站 2023-11-25 12:37:10
jquery grep()筛选遍历数组 . 代码如下: $().ready( function(){ var array = [1,2,3,4,5,6,7,8,9];...

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>
$('p',$(this).parents('p:first'))：拿取该p的上（至少都是父节点）的第一个p节点
$('~ 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" "https://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" "https://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" "https://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("p"));
//arr.reverse(); // 使用数组翻转函数
$.each(arr,function(n,value) {
//do something here
//alert(n+' '+value);
//alert(value.html());
});
var arr2 =$.unique(document.getelementsbytagname_r("p")); //获得唯一的对象，看api,说得很模
糊,https://docs.jquery.com/utilities/jquery.unique
alert();
$.each(arr2,function(n,value) {
//do something here
alert(n+' '+value);
});
});
</script>
</head>
<body>
<p>first</p><p>second</p><p>third</p><p>fourth</p><p>fourth</p>
</body>
</html>
<!doctype html public "-//w3c//dtd html 4.01//en" "https://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("p"));
//arr.reverse(); // 使用数组翻转函数
$.each(arr,function(n,value) {
//do something here
//alert(n+' '+value);
//alert(value.html());
});
var arr2 =$.unique(document.getelementsbytagname_r("p")); //获得唯一的对象，看api,说得很模
糊,https://docs.jquery.com/utilities/jquery.unique
alert();
$.each(arr2,function(n,value) {
//do something here
alert(n+' '+value);
});
});
</script>
</head>
<body>
<p>first</p><p>second</p><p>third</p><p>fourth</p><p>fourth</p>
</body>
</html>

上一篇： 一些手写JavaScript常用的函数汇总

下一篇： Photoshop CS3教程:如何制作动画

推荐阅读