ENG
더 나은 웹개발을 꿈꾸는 기술 블로그. 웹이즈프리.
jQuery의 메소드 first()에 대하여 알아봅니다. 제이쿼리 first() 메소드는 어떤 메소드로 어떤 기능을 가지고 있을까요?
# jQuery 메소드 first() 알아보기
제이쿼리를 사용하는 경우 엘리먼트를 찾은 후 해당 엘리먼트 내부에서 특정한 엘리먼트를 찾아야 하는 경우 몇 가지 메소드가 존재합니다. 이 중에서 first() 메소드는 현재 위치에 해당하는 가장 첫 번째 엘리먼트를 반환합니다. 즉, 가장 가까운 엘리먼트를 선택할 수 있습니다.
예를들어 다음과 같이 태그가 존재하는 경우...
<div>
<p>web</p>
<p>is</p>
<p>free</p>
<p>com</p>
</div>
<p>web</p>
<p>is</p>
<p>free</p>
<p>com</p>
</div>
여기서 p 태그를 제이쿼리로 선택하는 경우 아래와 같이 사용합니다.
var ele = $('div p');
// p 모든 태그가 선택됨
// p 모든 태그가 선택됨
여기서 만약 첫 번째 엘리먼트만 가져오려면 어떻게 할까요? 이때 사용 가능한 메소드가 바로 first()입니다. 즉 아래와 같이 사용할 수 있습니다.
var ele = $('div p').first();
// 오직 첫 번째 p 태그만 반환
// 오직 첫 번째 p 태그만 반환
이처럼 첫 번째 요소만 반환할 경우 매우 쉽게 가져올 수 있습니다.
! 첫 번째 요소를 가져오는 다른 방법 알아보기
물론 다른 선택자 메소드를 사용하는 방법들도 존재합니다. 각각 알아볼까요? 아래의 모든 메소드는 위의 first()와 동일하게 첫 번째만 가져올 수 있습니다.
$('div p').eq(0)
$('div p:nth-child(1)')
$('div p:nth-child(1)')
eq()는 몇 번째 엘리먼트를 선택할 수 있는 선택자 메소드로 1을 인자로 넘기면 첫 번째만 가져올 수 있습니다.
그리고 그 아래는 선택자 내부에 nth-child()를 사용하여 선택자에서 첫 번째를 지정해 넘기는 방법입니다.
만약 순수 자바스크립트라면 어떻게 하는지 알아봅니다. 아래와 같은 방법으로 가능합니다.
var ele = document.querySelector('div p');
// querySelector는 하나만 가져오므로 첫 번째 p만 가져옴
var ele = document.querySelectorAll('div p')[0];
// [0]을 사용하여 첫 번째만 선택
// querySelector는 하나만 가져오므로 첫 번째 p만 가져옴
var ele = document.querySelectorAll('div p')[0];
// [0]을 사용하여 첫 번째만 선택
여기까지 첫 번째 엘리먼트 요소를 가져오는 first()에 대하여 알아봤습니다.
제이쿼리 css 메소드로 스타일 지정하기
