A collection of jquery methods for traversing and filtering arrays and json objects

This time I bring you a collection of methods for jquery to traverse and filter arrays and json objects. What are the precautions for jquery to traverse and filter arrays and json objects? The following is a practical case, let's take a look.

jquery grep() filter

Traverse the array

$().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 alert for>jquery each() filter the traverse array<p style="text-align: left;"></p>
<pre class="brush:php;toolbar:false">$().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() filter the traverse array

$().ready( 
function(){ 
var anArray = ['one','two','three']; 
var index = $.inArray(‘two',anArray); 
alert(index);//返回该值在数组中的键值，返回1 
alert(anArray[index]);//value is two 
} 
);

jquery map() filters and traverses the array

$().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 traverses and parses json object 1

var json = [{dd:'SB',AA:'东东',re1:123},{cccc:'dd',lk:'1qw'}]; 
for(var i=0,l=json.length;i<l for alert>js traverses and parses json object 2 <p style="text-align: left;">There are the following json objects: <br></p>
<pre class="brush:php;toolbar:false">var obj ={”name”:”冯娟”,”password”:”123456″,”department”:”技术部”,”sex”:” 女”,”old”:30}; 遍历方法： 
for(var p in obj){ str = str+obj[p]+','; return str; }

The following is an example to illustrate the specific implementation method

How JQuery gets the object

$(‘#id') ：通过元素的id 
$(‘tagName') : 通过元素的标签名 
$(‘tagName tagName') : 通过元素的标签名,eg: $(‘ul li') 
$(‘tagName#id): 通过元素的id和标签名 
$(‘:checkbox'):拿取input的 type为checkbox'的所有元素: 
Eg: <input value="imperial"> 
$('span[price] input[type=text]') ：拿取下面的input元素 
<span> 
<input disabled> 
</span> 
$('p',$(this).parents('p:first'))：拿取该p的上（至少都是父节点）的第一个p节点 
$('~ span:first',this)： locates the first sibling of this that's a <span> element.</span>

Lazy loading of js files:

$.getScript
Example:
Html file:

nbsp;HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
 
 
<title>$.getScript Example</title> 
<link> 
<script src="../scripts/jquery-1.2.1.js"></script> 
<script> 
$(function(){ 
$(&#39;#loadButton&#39;).click(function(){ 
$.getScript(//在Firefox/3.0.1中会出现一个错误(语法错误,定义的变量不起作用,ff2没问题) 
&#39;new.stuff.js&#39;//,function(){$(&#39;#inspectButton&#39;).click()} 
); 
}); 
$(&#39;#inspectButton&#39;).click(function(){ 
someFunction(someVariable); 
test() 
}); 
}); 
</script> 
 
 
<button>Load</button> 
<button>Inspect</button> 
 
 
nbsp;HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
 
 
<title>$.getScript Example</title> 
<link> 
<script src="../scripts/jquery-1.2.1.js"></script> 
<script> 
$(function(){ 
$(&#39;#loadButton&#39;).click(function(){ 
$.getScript(//在Firefox/3.0.1中会出现一个错误(语法错误,定义的变量不起作用,ff2没问题) 
&#39;new.stuff.js&#39;//,function(){$(&#39;#inspectButton&#39;).click()} 
); 
}); 
$(&#39;#inspectButton&#39;).click(function(){ 
someFunction(someVariable); 
test() 
}); 
}); 
</script> 
 
 
<button>Load</button> 
<button>Inspect</button> 
 

Js file:

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 array processing:

nbsp;HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
 
 
<title>Hi!</title> 
<script> 
</script> 
<script> 
var $ = &#39;Hi!&#39;; 
jQuery(function(){ 
alert(&#39;$ = &#39;+ $);//这里的 $ 为 Hi!,把它变回jquery的符号:jQuery(function($){...}/这样就可以了 
//alert(jQuery) 
}); 
jQuery(function($){ 
//------------遍历数组 .each的使用------------- 
var anArray = [&#39;one&#39;,&#39;two&#39;,&#39;three&#39;]; 
$.each(anArray,function(n,value) { 
//do something here 
//alert(n+&#39; &#39;+value); 
}); 
var anObject = {one:1, two:2, three:3}; 
$.each(anObject,function(name,value) { 
//do something here 
//alert(name+&#39; &#39;+value); 
}); 
//-----------过滤数组 .grep的使用------------ 
var originalArray =[99,101,103]; 
var bigNumbers = $.grep(originalArray,&#39;a>100&#39;);//第2种写法,还可以用正则表达式来过滤 
$.each(bigNumbers,function(n,value) { 
//do something here 
//alert(n+&#39; &#39;+value); 
}); 
//------------转换数组 .map的使用------------ 
var strings = [&#39;1&#39;,&#39;2&#39;,&#39;3&#39;,&#39;4&#39;,&#39;S&#39;,&#39;K&#39;,&#39;6&#39;]; 
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( 
[&#39;this&#39;,&#39;that&#39;,&#39;other thing&#39;], 
function(value){return value.split(&#39;&#39;);}//分离字符串用返回给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+&#39; &#39;+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+&#39; &#39;+value); 
}); 
}); 
</script> 
 
 
<p>First</p><p>Second</p><p>Third</p><p>Fourth</p><p>Fourth</p> 
 
 
nbsp;HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
 
 
<title>Hi!</title> 
<script> 
</script> 
<script> 
var $ = &#39;Hi!&#39;; 
jQuery(function(){ 
alert(&#39;$ = &#39;+ $);//这里的 $ 为 Hi!,把它变回jquery的符号:jQuery(function($){...}/这样就可以了 
//alert(jQuery) 
}); 
jQuery(function($){ 
//------------遍历数组 .each的使用------------- 
var anArray = [&#39;one&#39;,&#39;two&#39;,&#39;three&#39;]; 
$.each(anArray,function(n,value) { 
//do something here 
//alert(n+&#39; &#39;+value); 
}); 
var anObject = {one:1, two:2, three:3}; 
$.each(anObject,function(name,value) { 
//do something here 
//alert(name+&#39; &#39;+value); 
}); 
//-----------过滤数组 .grep的使用------------ 
var originalArray =[99,101,103]; 
var bigNumbers = $.grep(originalArray,&#39;a>100&#39;);//第2种写法,还可以用正则表达式来过滤 
$.each(bigNumbers,function(n,value) { 
//do something here 
//alert(n+&#39; &#39;+value); 
}); 
//------------转换数组 .map的使用------------ 
var strings = [&#39;1&#39;,&#39;2&#39;,&#39;3&#39;,&#39;4&#39;,&#39;S&#39;,&#39;K&#39;,&#39;6&#39;]; 
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( 
[&#39;this&#39;,&#39;that&#39;,&#39;other thing&#39;], 
function(value){return value.split(&#39;&#39;);}//分离字符串用返回给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+&#39; &#39;+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+&#39; &#39;+value); 
}); 
}); 
</script> 
 
 
<p>First</p><p>Second</p><p>Third</p><p>Fourth</p><p>Fourth</p> 
 

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the PHP Chinese website!

Recommended reading:

Detailed explanation of the steps for jquery to remove selected values ​​from an array

The jQuery plug-in implements interlaced table color changing and mouse events Realize interaction

The above is the detailed content of A collection of jquery methods for traversing and filtering arrays and json objects. For more information, please follow other related articles on the PHP Chinese website!