Jquery의 각(콜백)을 사용하는 방법은 무엇입니까?
- 伊谢尔伦원래의
- 2017-06-16 15:58:481265검색
개요
일치하는 각 요소를 컨텍스트로 사용하여 함수를 실행합니다.
전달된 함수가 실행될 때마다 함수의 this 키워드가 다른 DOM 요소(매번 다른 일치 요소)를 가리킨다는 의미입니다. 또한, 함수가 실행될 때마다 일치하는 요소 집합에서 실행 환경인 요소의 위치를 나타내는 숫자값이 함수에 매개변수(0을 기준으로 하는 정수)로 전달됩니다. 'false'를 반환하면 루프가 중지됩니다(일반 루프에서 'break'를 사용하는 것과 같습니다). 다음 루프로 점프하려면 'true'를 반환합니다(일반 루프에서 'continue'를 사용하는 것과 같습니다).
예제는 다음과 같습니다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title> 遍历元素</title>
<script src="js/jQuery.js" type="text/JavaScript"></script>
<!--
<script src="http://code.jquery.com/jquery-latest.js"></script>
-->
<style type="text/css">
body{font-size:13px}
img{border:solid 1px #ccc;padding:3px;margin:5px;width:143px;height:101px}
</style>
<script type="text/javascript">
$(function() {
$("img").each(function(index){
// 根据形参index 设置元素的title 属性
this.title = " 第" + index +" 幅风景图片，alt 内容是" + this.alt;
if(i==1)
return false;
})
})
</script>
</head>
<body>
<p>
<img title="picture0" src="images/img05.jpg" alt=" 第0 幅风景画" />
<img title="picture1" src="images/img06.jpg" alt=" 第1 幅风景画" />
<img title="picture2" src="images/img07.jpg" alt=" 第2 幅风景画" />
</p>
</body>
</html>객체와 배열을 반복하는 데 사용할 수 있는 일반적인 반복 방법입니다.
jQuery 객체를 반복하는 $().each() 메서드와 달리 이 메서드는 모든 객체를 반복하는 데 사용할 수 있습니다. 콜백 함수에는 두 개의 매개변수가 있습니다. 첫 번째는 객체의 멤버 또는 배열의 인덱스이고 두 번째는 해당 변수 또는 콘텐츠입니다. 각 루프를 종료해야 하는 경우 콜백 함수가 false를 반환하도록 하면 다른 반환 값은 무시됩니다.
var dic={"tom" : 20,"jerry" :30, "jim":40};
$.each(dic,function(key,value){ alert(key+"的年龄是"+value); });결과: Tom의 나이는 20
Jerry의 나이는 30
Jim의 나이는 40
var arr=[1,2,3];
$.each(arr,function(key,value){ key++;alert(key+"="+value);});결과: 1=1 2=2 3=3
var arr=[1,2,3];
$.each(arr,function(item){ alert(item);});결과: 0 1 2
var dic={"tom" : 20,"jerry" :30, "jim":40};
$.each(dic,function(){ alert(this);});결과: 20 30 40
$.each()는 $(selector).each()와 다르며, 후자는 jquery 개체 반복 달력 전용입니다. 전자는 모든 컬렉션(배열이든 객체이든)을 순회하는 데 사용할 수 있습니다. 배열인 경우 콜백 함수는 매번 배열의 인덱스와 해당 값을 전달합니다(값은 다음을 통해서도 얻을 수 있습니다). 이 키워드는 있지만 JavaScript는 항상 이 값을 객체로 래핑합니다(문자열이든 숫자이든). each() 메소드는 DOM 루프 구조를 만들 수 있습니다. 간결하고 오류가 덜 발생합니다. Each() 함수는 매우 강력한 순회 함수를 캡슐화하고 사용이 매우 편리합니다.
1차원 배열, 다차원 배열, DOM, JSON 등을 순회할 수 있습니다. 자바스크립트 개발 과정에서 $each를 사용합니다. 우리의 업무량을 크게 줄일 수 있습니다.
각각은 1차원 배열을 처리합니다
var arr1 = [ "aaa", "bbb", "ccc" ];
$.each(arr1, function(i,val){
alert(i);
alert(val);
});alert(i)는 0, 1, 2를 출력합니다.
alert(val)는 aaa, bbb, ccc를 출력합니다.
각각은 2차원 배열을 처리합니다
var arr2 = [['a', 'aa', 'aaa'], ['b', 'bb', 'bbb'], ['c', 'cc', 'ccc']]
$.each(arr, function(i, item){
alert(i);
alert(item);
});arr2 2차원 배열인 항목은 이 2차원 배열의 각 배열을 가져오는 것과 같습니다. item[0]은 각 1차원 배열의 첫 번째 값을 기준으로 alert(i)는 0, 1, 2를 출력합니다. 이 2차원 배열에는 3개의 배열 요소가 포함되어 있기 때문입니다. alert(item)은 For [' a', 'aa', 'aaa'], ['b', 'bb', 'bbb'], ['c', 'cc', 'ccc']
이 두 자리 배열의 경우 처리 변경
var arr = [['a', 'aa', 'aaa'], ['b', 'bb', 'bbb'], ['c', 'cc', 'ccc']]
$.each(arr, function(i, item){
$.each(item,function(j,val){
alert(j);
alert(val);
});
});alert(j)는 0, 1, 2, 0, 1, 2, 0, 1, 2로 출력됩니다alert(val)는 a, aa, aaa, b, bb , bbb로 출력됩니다. , c, cc, ccc각각은 json 데이터를 처리합니다. 각각은 훨씬 더 강력하며 모든 속성을 반복할 수 있습니다var obj = { one:1, two:2, three:3};
each(obj, function(key, val) {
alert(key);
alert(val);
});여기서 Alert(key)는 1 2 3을 출력합니다. two, 2, three, 3여기서 키가 숫자가 아닌 속성인 이유는 무엇입니까? json 형식은 순서가 지정되지 않은 속성 값의 집합이므로 숫자는 어디에 있습니까?
그리고 이 값은 obj[key]
ecah가 dom 요소를 처리하는 것과 동일합니다. 여기서는 입력 양식 요소가 예로 사용됩니다.
돔에 이와 같은 코드 조각이 있고
<input name="aaa" type="hidden" value="111" /> <input name="bbb" type="hidden" value="222" /> <input name="ccc" type="hidden" value="333" /> <input name="ddd" type="hidden" value="444"/>
각 코드를 다음과 같이 사용한다면
$.each($("input:hidden"), function(i,val){
alert(val);
alert(i);
alert(val.name);
alert(val.value);
});그런 다음, Alert(val)은 양식 요소이므로 [object HTMLInputElement]를 출력합니다.
alert(i)는 0, 1, 2, 3을 출력합니다
alert(val.name); aaa, bbb, ccc, ddd를 출력합니다. this.name을 사용하면 동일한 결과가 출력됩니다
alert( val.value); 111,222,333,444가 출력됩니다. this.value를 사용하면 동일한 결과가 출력됩니다. 두 가지 글쓰기 방식의 차이점, 어디에 있는지는 아직 모르겠습니다. 이 변경 사항은 위의 배열 작업에 적용될 때 동일한 결과를 생성합니다.위 내용은 Jquery의 각(콜백)을 사용하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!