반응형
안녕하세요. 경제적, 시간적 자유를 꿈꾸는 한량입니다.
jQuery의 .first() 사용법
first() 함수는 선택한 요소 집합에서 첫 번째 요소를 선택하는 함수입니다.
이 함수는 선택한 요소 집합 중에서 첫 번째 요소를 반환하므로,
주어진 선택자에 일치하는 여러 요소 중에서
첫 번째 요소만 선택하여 작업할 때 유용하게 사용됩니다.
간단한 예제로 버튼을 클릭 시 first() 함수가 어떻게 작동하는지 알아봅시다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>first() 함수 예시</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#firstButton').click(function(){
// 클래스가 "item"인 요소 중 첫 번째 요소를 선택하여 배경색 변경
$('.item').first().css('background-color', 'lightblue');
});
});
</script>
</head>
<body>
<div class="item">첫 번째 아이템</div>
<div class="item">두 번째 아이템</div>
<div class="item">세 번째 아이템</div>
<button id="firstButton">첫 요소 선택하기</button>
</body>
</html>
위의 예시에서는 클래스가 'item'인 요소들 중에서
first() 함수를 사용하여 첫 번째 요소를 선택하고,
선택된 첫 번째 요소의 배경색을 .css() 함수를 사용해서
변경하도록 설정하였습니다.
반응형
'IT 소스 > jQuery' 카테고리의 다른 글
| [jQuery] .last() - 마지막 요소 선택하기 (0) | 2024.03.07 |
|---|---|
| [jQuery] .parseXML() - XML 데이터를 JavaScript 객체로 변환 (0) | 2024.03.01 |
| [jQuery] .parseJSON() - JSON 문자열을 JavaScript 객체로 변환 (1) | 2024.02.29 |
| [jQuery] .parent() - 부모 요소를 선택 (0) | 2024.02.27 |
| [jQuery] .clone() - 요소를 복제 (0) | 2024.02.22 |