Heim > Web-Frontend > js-Tutorial > Hauptteil

Eine Sammlung von JQuery-Methoden zum Durchlaufen und Filtern von Arrays und JSON-Objekten

php中世界最好的语言
Freigeben: 2018-04-24 14:36:46
Original
2538 Leute haben es durchsucht

Dieses Mal bringe ich Ihnen eine Sammlung von Methoden für JQuery zum Durchlaufen und Filtern von Arrays und JSON-Objekten. Was sind die Vorsichtsmaßnahmen für JQuery zum Durchlaufen und Filtern von Arrays und JSON-Objekten? , lass uns einen Blick darauf werfen.

jquery grep() filtertdurchläuft das 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;i++){ 
alert(filterarray[i]); 
} 
for (key in filterarray){ 
alert(filterarray[key]); 
} 
} 
);
Nach dem Login kopieren

jquery every() filtert und durchläuft das Array

$().ready( 
function(){ 
var anObject = {one:1,two:2,three:3};//对json数组each 
$.each(anObject,function(name,value) { 
alert(name); 
alert(value); 
}); 
var anArray = [&#39;one&#39;,&#39;two&#39;,&#39;three&#39;]; 
$.each(anArray,function(n,value){ 
alert(n); 
alert(value); 
} 
); 
} 
);
Nach dem Login kopieren

jquery inArray() filtert und durchquert das Array

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

jquery map() filtert und durchläuft das Array

$().ready( 
function(){ 
var strings = [&#39;0&#39;,&#39;1&#39;,&#39;2&#39;,&#39;3&#39;,&#39;4&#39;,&#39;S&#39;,&#39;6&#39;]; 
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]); 
} 
} 
);
Nach dem Login kopieren

js durchquert und analysiert JSON-Objekt 1

var json = [{dd:&#39;SB&#39;,AA:&#39;东东&#39;,re1:123},{cccc:&#39;dd&#39;,lk:&#39;1qw&#39;}]; 
for(var i=0,l=json.length;i<l;i++){ 
for(var key in json[i]){ 
alert(key+&#39;:&#39;+json[i][key]); 
} 
}
Nach dem Login kopieren

js durchquert und analysiert JSON-Objekt 2
Da sind die folgenden JSON-Objekte:

var obj ={”name”:”冯娟”,”password”:”123456″,”department”:”技术部”,”sex”:” 女”,”old”:30}; 遍历方法: 
for(var p in obj){ str = str+obj[p]+&#39;,&#39;; return str; }
Nach dem Login kopieren

Das Folgende ist ein Beispiel zur Veranschaulichung der spezifischen Implementierungsmethode
Die Art und Weise, wie JQuery das Objekt erhält

$(‘#id&#39;) :通过元素的id 
$(‘tagName&#39;) : 通过元素的标签名 
$(‘tagName tagName&#39;) : 通过元素的标签名,eg: $(‘ul li&#39;) 
$(‘tagName#id): 通过元素的id和标签名 
$(‘:checkbox&#39;):拿取input的 type为checkbox&#39;的所有元素: 
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.
Nach dem Login kopieren

Verzögertes Laden von JS-Dateien:
$ .getScript
Beispiel:
Html-Datei:

<!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>
Nach dem Login kopieren

Js-Datei:

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'); 
}
Nach dem Login kopieren

jquery-Array-Verarbeitung:

<!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>
Nach dem Login kopieren

Ich glaube, Sie haben die Methode nach dem Lesen gemeistert Der Fall in diesem Artikel finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website.

Empfohlene Lektüre:

Detaillierte Erläuterung der JQuery-Schritte zum Entfernen ausgewählter Werte aus einem Array

Das jQuery-Plug-in implementiert Interlaced-Tabellenfarbwechsel und Mausereignisse Realisieren Sie die Interaktion

Das obige ist der detaillierte Inhalt vonEine Sammlung von JQuery-Methoden zum Durchlaufen und Filtern von Arrays und JSON-Objekten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage