다연이네

[days02] 복습 - 1) 콜백함수 / 2) $.each() 본문

Web/jQuery

[days02] 복습 - 1) 콜백함수 / 2) $.each()

　다연　 2020. 12. 21. 13:47
반응형

 1. 콜백함수 

매개변수로 전달되는 함수

<script>

//함수 선언
function callTenTimes(callback) {
	for (var i = 0; i <10; i++) {
		callback(); //매개변수로 전달된 함수 호출
	}
}

//변수 선언
var callback = function() {
	alert("함수 호출");
}

callTenTimes(callback);
</script>

함수 호출 alert가 10번 반복 출력된다.

 

콜백 함수는 익명 함수로 사용할 때가 많다. 매개변수에 익명함수를 곧바로 입력할 수도 있다는 것을 기억하자.

<script>

//함수 선언
function callTenTimes(callback) {
	for (var i = 0; i <10; i++) {
		callback(); //매개변수로 전달된 함수 호출
	}
}
callTenTimes(function() {
	alert("함수 호출");
});
</script>

 

 

 2. $.each 

 

알아둘 것

jQuery()는 jQuery 라이브러리의 기본 함수라 많이 사용하며, 쉽게 사용할 수 있도록 다음 코드와 같이 변수를 대치한다. 

window.jQuery  == window.$  ==  jQuery  ==  $

 

$.add(url, data, callback, type); //jquery가 가진 메소드라는 의미 $.메소드() 

 

 

 

$.each() == jQuery.each

jQuery 객체를 반복하여 일치하는 각 요소에 대해 함수를 실행

<body>
<ul>
	<li>Lorem.</li>
	<li>Aliquam.</li>
	<li>Quia?</li>
	<li>Nihil!</li>
	<li>Non.</li>
</ul>

<script>
$(function(){
	/* 
	$("li").each(function(index) { //li태그를 하나하나 반복하겠다
		console.log(index+":"+$(this).html()); //그 안의 글자
	})
	 */
	 
	 $.each($("li"), function(i, elt) {
	 	console.log(i+"/"+elt.innerHTML); // elt.html() 불가 (요소이지 html 객체가 아니기 때문)
	 });
});
</script>
</body>

 

 

해당 div를 클릭하면 그 div의 style속성이 출력되도록 한다.

 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<style>
  div {
    height: 50px;
    margin: 5px;
    padding: 5px;
    float: left;
  }
  #box1 {
    width: 50px;
    color: yellow;
    background-color: blue;
  }
  #box2 {
    width: 80px;
    color: rgb(255, 255, 255);
    background-color: rgb(15, 99, 30);
  }
  #box3 {
    width: 40px;
    color: #fcc;
    background-color: #123456;
  }
  #box4 {
    width: 70px;
    background-color: #f11;
  }
  </style>

</head>
<body>
<p id="result">&nbsp;</p>
<div id="box1">1</div>
<div id="box2">2</div>
<div id="box3">3</div>
<div id="box4">4</div>

<script>
$( "div" ).click(function() {
	//html 문자열을 저장할 변수
  var html = [ "The clicked div has the following styles:" ];
 
	//[] : 배열 (여러 개의 스타일 속성을 css() 함수로 얻어올 때) -> styleProps 저장
  var styleProps = $( this ).css([
    "width", "height", "color", "background-color"
  ]);
	
	//타입 object -> array

	
   $.each( styleProps, function( prop, value ) {
    html.push( prop + ": " + value ); //배열 추가 : push()
  }); 
 
  //배열 join()
  $( "#result" ).html( html.join( "<br>" ) );
});
</script>
</body>
</html>

 

반응형
저작자표시 비영리

'Web > jQuery' 카테고리의 다른 글

[days02] 복습 - on()/off() 이벤트 연결/제거  (0) 2020.12.21
[days02] 복습 - attr()  (0) 2020.12.21
[days02] 복습 - 1) optgroup / 2) 미디어 쿼리 설정  (0) 2020.12.21
[days02] 복습 - 의미없는 이미지, 회원가입 폼  (0) 2020.12.21
[days02] 복습 - 1) video태그 / 2) 무한 스크롤  (0) 2020.12.21
'Web/jQuery' Related Articles more
Comments