[Traversing] JQ - first() 메서드 - 선택요소의 첫번째요소 반환 (= first메서드 = 퍼스트메서드)

1. first() 예제 - 선택요소의 첫번째 요소 반환
2. first() 정의
3. first() 구문
4. first() 예제 - (p span) 구조의 가장 첫번째 요소만 선택

first() 예제 - 선택요소의 첫번째 요소 반환 

 

<style>

  div {

    border:1px solid black;

    margin-bottom:20px;

  }

</style>

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

 

<script>

$(document).ready(function(){

    $("div p").first().css({"background-color": "blue","color":"white"});

    $("div p").last().css({"background-color": "red", "color":"white"});

});

</script>

<h1>홈짱닷컴에 오신 걸 환경합니다.</h1>

<div>

  <p>홈짱닷컴</p>

  <p>Homzzang.com</p>

</div>

<div>

  <p>홈페이지 무료 제작</p>

  <p>그누보드 웹언어 등</p>

</div>

<p>초보 입문자 대환영</p>

결과보기

first() 정의

 

선택요소의 첫번째요소 반환.

 

---

 

1. cf.

last() 메서드 - 선택요소의 마지막요소 반환.

 

2.

모든 브라우저 지원.

 

3. 공식 매뉴얼

https://api.jquery.com/first/

 

first() 구문

 

$(selector).first()

 

first() 예제 - (p span) 구조의 가장 첫번째 요소만 선택

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>

<script>

$(document).ready(function(){

  $("p span").first().css("background-color", "yellow");

});

</script>

<h1>홈짱닷컴 Homzzang.com</h1>

<p>가<span>나</span>다</p>

<p>라<span>마</span>바</p>

<p>사<span>아</span>자</p>

결과보기

PS. 제거하려면, $("p span").first().remove();