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

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

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

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

실행화면입니다.

=============================== 
$('.b1').on('click',function(){
   $('.div0').find('p').css("color","red").end().find('span').css("color","blue");
//    $('.div0').find('p').css("color","red").find('span').css("color","blue");
  });
=============================== 
class b1가 click되면 <== end()버튼입니다.
<p>태그 대상으로 find('p').css("color","red").메서드를 실행하고
자식요소의 <p>태그를 선택하여 css를 변경합니다.
find()메서드는 자식요소를 선택하는 메서드입니다. 다음에 배워보도록할께요.
그다음 end()메서드를 실행하고 find('span').css("color","blue");메서드를 실행합니다.
주석처리부분도 한번 실행해보세요^ㅡ^ 차이점을 알수있답니다.

※end()란 처음대상을 선택한부분으로 돌아간다고 생각하시면된답니다.
예) $('.div0').find('p').css("color","red").end().find('span').css("color","blue");
파란색부분의 소스가 실행을한뒤 end()메서드를 만나면 파란색/빨간색 부분은 없어지고
주황색 소스만 남는다고 생각하시면된답니다.
$('.div0').find('span').css("color","blue"); <== 이렇게된답니다.

=============================== 
$('.div0').find('p').css("color","red");
$('.div0').find('span').css("color","blue");
=============================== 
예 부분이랑 위에부분이랑 결과는 똑같답니다.
end()메서드를 사용하는 이유는 간단하게표현하여 이해하기쉽게하기위하여 사용한답니다.

이해가 안되는 분들은 ↓↓↓↓↓↓
http://api.jquery.com/end/

end()버튼을 클릭한뒤의 모습입니다.

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