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

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

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

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

실행화면입니다.

=============================== 
$('.div0').children().on("click",function(){
   $('.div0').children().animate({
    "width":"400"
   },1000).animate({
    "width":"50"
   },1500);
  });
=============================== 
class div0의 children()가 click되면 <== 검정색 테두리(div0)의 자식(초록색)이 클릭되면
※children()메서드는 배워서 설명을 생략하겠습니다.
animate()로 검정색 테두리(div0)의 자식(초록색)의 width를 400으로 증가 한뒤에
다시 50으로 복귀하도록 하였습니다.
※animate()메서드 역시 배워서 설명을 생략하겠습니다.

검정색 테두리(div0)의 자식(초록색)을 클릭한뒤 width가 1초동안 증가하고 있는 모습입니다.

width가 1초동안 증가한뒤 1.5초동안 width가 다시 50으로 감소된 모습입니다.

=============================== 
$('.div0').children().on("click",function(){
   $('.div0').children().not(this).animate({
    "width":"400"
   },1000).animate({
    "width":"50"
   },1500);
  });
=============================== 
아까부분에서 not() 메서드가 추가되었습니다.
class div0의 children()가 click되면 <== 검정색 테두리(div0)의 자식(초록색)이 클릭되면
선택된 자식(초록색)만 빼고 width를 증가/감소 하도록 하였습니다.

※not()란 선택한 대상중 사용자가 입력한 대상을 제거하는 메서드입니다.
예) 1/2/3 을 선택한 상태에서 not(2)하면 1/3만 선택이된답니다. 

형식은 not( selector ) / not( function ) 으로 구성되어있습니다.
selector 제거할 대상을 적어주면된답니다.
function 기능을 적어주시면된답니다.

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

1번째 자식(초록색)을 클릭한 뒤의 모습입니다.

4번째 자식(초록색)을 클릭한 뒤의 모습입니다.

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