JQuery의 each( ) 메서드

JQuery 란?

• JQeury는 javascript 라이브러리 이며 javaScript를 더 쉽게 작성하고 다루기 위해 설계된 라이브러리로, 주로 DOM 조작 , 이벤트 처리 , 애니메이션 , Ajax 처리 등을 간단하게 수행할 수 있게 도와준다.

JQuery의 역할

• DOM 조작 : HTML 요소를 선택하고, 조작할 수 있는 기능을 제공한다.
• 이벤트 처리 : 클릭, 마우스 이동, 키보드 입력 등 다양한 이벤트를 쉽게 처리할 수 있다.
• 애니메이션 : 애니메이션 효과를 간단하게 구현할 수 있다.
• Ajax:서버와 비동기적으로 데이터를 주고받는 Ajax 기능을 쉽게 구현할 수 있다.
• 브라우저 호환성 : 다양한 브라우저에서 일관된 동작을 보장한다.

JQuery의 주요 함수

• 선택자:(#id) , $(.class),(tag) 등 CSS 스타일의 선택자를 사용하여 HTML 요소를 선택한다.
• DOM 조작: .html() , .text() , .css() , .addClass(), .removeClass()등을 사용하여 요소의 내용을 변경하거나 스타일을 적용할 수 있다.
• 이벤트 처리: .click(), .on() , .hover() , .focus() , .blur() 등을 사용하여 다양한 이벤트 처리할 수 있다.
• 애니메이션 : .hide() , .show(), .fadeIn() , .fadeOut(), .slideUp(), .slide()등을 사용하여 애니메이션 효과를 적용할 수 있다.
• Ajax: .ajax(), .get() , .post() 등을 사용하여 서버와 비동기적으로 데이터를 주고받을 수 있다.

jQuery는 이러한 기능들을 제공하여 javaScript 코드를 더 간단하고 효율적으로 작성할 수 있게 해준다.

each 메서드

• jQeury에서 each 함수는 배열이나 객체의 각 요소를 순회하면서 특정 작업을 수행할 때 사용이 된다. javascript의 forEach와 비슷한 역할을 하고 each 함수는 주로 DOM 요소를 순회 하거나 배열의 요소를 순회할 때 사용이된다.
• 콜백 함수는 두 개의 인수 (index , element 또는 value)를 받는다.
• each 함수 내에서 특정 조건에 따라 순회를 중단하려면 return false 를 사용하면 된다.

기본구조

``

$(selector).each(function(index,element){
//작업수행
})

``

• selector 는 순회하려는 DOM 요소를 선택하는 JQuery 선택자이다.
• 콜백 함수는 각 요소에 대해 호출되며, 두 개의 인수를 받는다.
  • index : 현재 요소의 인덱스
  • element : 현재요소 (일반 DOM요소)

JQuery 객체 순회

``

• Item 1
• Item 2
• Item 3

$(document).ready(function() {
$('.list li').each(function(index, element) {
console.log(index, $(element).text());
$(element).css('color', 'blue'); // 각 요소의 텍스트 색상을 파란색으로 변경
});
});
``

• $('.list li') 는 class=list 내의 모든 li 요소를 선택한다.
• each 함수는 선택된 li 요소 각각에 대해 콜백 함수를 호출한다.
• 콜백 함수는 현재 요소의 인덱스와 요소 자체를 인수로 받는다.
• 각 li 요소의 텍스트를 콘솔에 출력하고, 텍스트 색상을 파란색으로 변경한다.

배열 순회

``

div 태그에 id 가 array-output 이 있다고 가정

$(document).ready(function(){
var array= ['Apple','Banana','Cherry'];
$.each(array, function(index, value){
console.log(index,value);
$('#array-output').append('

'+index + ':' + value+'

');
})

})

``

• .each 함수는 배열의 각 요소에 대해 콜백 함수를 호출한다.
• 콜백 함수는 현재 요소의 인덱스 값을 인수로 받는다.
• 각 요소의 인덱스와 값을 콘솔에 출력하고 #array-output에 해당 내요을 추가한다.
• 이 외에도 jQuery에서 유용한 메서드들이 있는데
  map : 배열의 각 요소를 변환하여 새로운 배열을 반환한다. javascript map과 유사
  grep : 배열에서 특정 조건을 만족하는 요소만 필터링 하여 새로운 배열을 반환한다. javascript의 filter와 유사
  extend : 객체를 합칠 때 유용하다. 여러 객체를 하나의 객체로 병합할 수 있다.
  inArray : 배열 내에서 특정 값의 인덱스를 찾는다. if 값이 존재하지 않으면 -1을 반환한다.

JQuery는 주로 DOM 조작에 중점을 두지만, 배열이나 객체의 조작도 지원한다. 그러나 복잡한 배열이나 객체 조작에는 javaScript의 내장 메서드를 사용하는 것이 더일반적이고 효율적이다.