Jquery[제이쿼리] children() 메서드 배우기

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

오늘은 제이쿼리[jquery] children() 메서드를 배워보겠습니다.

이렇게 준비해보았습니다.!^ㅡ^/

실행화면입니다.
준비하시고 시작해볼까요~

=============================== 
$('.b1').on("click",function(){
   $('ul').children().css("color","blue");
   setTimeout(function(){
    $('ul').children().css("color","black");
   }, 2000);
  });
=============================== 
class b1가 click되면 <== children() 버튼입니다.
<ul>태그의 children()메서드를 사용하여 css를 변경하고
setTimeout()메서드를 사용하여 2초뒤 css가 변경되기 전값으로 변경되도록
하였습니다.

※children()란 대상의 자식요소를 모두 선택하는 메서드입니다.
형식은 children([selector])로 구성되어있습니다.
[selector]에는 대상의 자식요소중 다시 필터링 하는 역활을합니다.
[]는 필요에따라 사용하시면된답니다.

실행한뒤 children()버튼을 누른뒤의 화면입니다.
<ul>태그의 자식요소들이 모두 선택되어 css가 변경된 모습이랍니다.

2초뒤 setTimeout()메서드를 사용하여 css가 변경되기전으로 변경하였습니다.

=============================== 
$('.b2').on("click",function(){
   $('ul').children('.chile_sel').css("color","blue");
   setTimeout(function(){
    $('ul').children('.chile_sel').css("color","black");
   }, 2000);
  });
=============================== 
class b2가 click되면 <== children(selector) 버튼입니다.
<ul>태그의 children()의 [selector]를 사용하여  children('.chile_sel')로
자식요소를 필터링하였습니다.
<ul>태그의 자식들중 class chile_sel인 자식요소를 선택하겠다는 의미입니다.
그리고 children()버튼처럼 setTimeout()메서드를 사용하여
2초뒤 css가 변경되기 전값으로 변경되도록 하였습니다.

실행한뒤 children(selector) 버튼을 누른뒤의 화면입니다.
<ul>태그의 자식요소들중 class chile_sel인 자식요소를 선택하여 css가 변경된 모습이랍니다.

children()버튼처럼 2초뒤 setTimeout()메서드를 사용하여 css가 변경되기전으로 변경하였습니다.

오늘은 제이쿼리[jquery] children() 메서드를 배워보았습니다.
그럼 다음에 또만나요~