배열 및 json 개체를 탐색하고 필터링하기 위한 jquery 메서드 모음
- php中世界最好的语言원래의
- 2018-04-24 14:36:462590검색
이번에는 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 중국어 웹사이트의 다른 관련 기사도 주목해 주세요!
추천 자료:
jQuery 플러그인을 사용하여 배열에서 선택한 값을 제거하는 단계에 대한 자세한 설명은 행마다 테이블 색상을 변경하고 마우스 이벤트와 상호 작용합니다.
위 내용은 배열 및 json 개체를 탐색하고 필터링하기 위한 jquery 메서드 모음의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.