Jquery[제이쿼리]first,first-child,first-of-type셀렉터 배우기

안녕하세요~ 제이쿼리공장장 주니주니 입니다.

오늘은 제이쿼리[jquery] :first, :first-child, :first-of-type 셀렉터를 배워보겠습니다.

이렇게 준비해보았습니다.

실행화면입니다.
그럼 출발해볼까요~

=============================== 
$('.input1').on("click",function(){
   $('div:first').css("border","2px solid blue");
   setTimeout(function(){
    $('div:first').css("border","2px solid black");
   }, 1000);   
  }); 
=============================== 
class input1가 click되면 <== ":first"버튼입니다.
<div>태그들 중 first의 css부분을 ("border","2px solid blue"); <== 이렇게 바꾸고
setTimeout()메서드를 이용하여 1초뒤에 <div>태그들 중 first의 css부분을 다시 원상복귀
하도록 하였습니다.
※:first란 대상의 첫번째요소를 찾아주는 셀렉터입니다.
※setTimeout()란 지정한 시간뒤에 한번만 실행하는 메서드입니다.

=============================== 
$('.input2').on("click",function(){
   $('div h3:first-child').css("color","blue");
   setTimeout(function(){
    $('div h3:first-child').css("color","black");
   }, 1000);
  }); 
=============================== 
class input2가 click되면 <== ":first-child"버튼입니다.
<div>태그들의  <h3>태그들 중 first-child의 css부분을 ("color","blue"); <== 이렇게 바꾸고
setTimeout()메서드를 이용하여 1초뒤에 다시 css부분을 원상복귀하도록 하였습니다.
※:first-child란 부모의 기준으로 찾고자하는 요소가 첫번째인경우를 찾아주는 셀렉터입니다.
즉 앞에 다른태크가 있으면 해당이안된답니다.!

=============================== 
$('.input3').on("click",function(){
   $('div span:first-of-type').css("color","blue");
   setTimeout(function(){
    $('div span:first-of-type').css("color","black");
   }, 1000);
  }); 
=============================== 
class input3가 click되면 <== ":first-of-type"버튼입니다.
<div>태그들의  <span>태그의 first-of-type의 css부분을 ("color","blue"); <== 이렇게 바꾸고
setTimeout()메서드를 이용하여 1초뒤에 다시 css부분을 원상복귀하도록 하였습니다.
※:first-of-type란 부모의 기준에서 찾고자하는 요소의 첫번째를 찾아주는 셀렉터입니다.
앞에 다른태크가 있어도 상관은 없답니다.

버튼을 누르기전 입니다.!

:first 버튼을 누른뒤 <div>태그들중 :first에 해당하는 css가 변경된 모습입니다.

:first-child 버튼을 누른뒤 <div>태그안의 <h3>태그의 :first-child에 해당하는 
css가 변경된 모습입니다.

오늘은 제이쿼리[jquery] :first, :first-child, :first-of-type 셀렉터를 배워보았습니다.
그럼 다음에 또만나요~