Rumah >hujung hadapan web >tutorial js >jquery遍历筛选数组与json对象的方法合集
jquery遍历筛选数组与json对象的方法合集
- php中世界最好的语言asal
- 2018-04-24 14:36:462591semak imbas
这次给大家带来jquery遍历筛选数组与json对象的方法合集，jquery遍历筛选数组与json对象的注意事项有哪些，下面就是实战案例，一起来看一下。
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" "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("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,说得很模
糊,http://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" "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("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,说得很模
糊,http://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>
相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
Atas ialah kandungan terperinci jquery遍历筛选数组与json对象的方法合集. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：jquery从数组移除选中值步骤详解Artikel seterusnya：Jquery操作js数组及对象步骤详解
Artikel berkaitan
Lihat lagi- Analisis mendalam bagi komponen kumpulan senarai Bootstrap
- Penjelasan terperinci tentang fungsi JavaScript kari
- Contoh lengkap penjanaan kata laluan JS dan pengesanan kekuatan (dengan muat turun kod sumber demo)
- Angularjs menyepadukan UI WeChat (weui)
- Cara cepat bertukar antara Cina Tradisional dan Cina Ringkas dengan JavaScript dan helah untuk tapak web menyokong pertukaran antara kemahiran_javascript Cina Ringkas dan Tradisional