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元素

　　<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>

　　<script type="text/javascript"

　　src="../scripts/jquery-1.2.1.js"></script>

　　$(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="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>

　　<script type="text/javascript"

　　src="../scripts/jquery-1.2.1.js"></script>

　　$(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="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>

　　</script>

　　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>

　　</script>

　　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>

教程首页更多教程