Jquery[제이쿼리] addClass(),removeClass() 메서드 배우기

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

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

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

실행 화면입니다.
이렇게 나오면된답니다.

=============================== 
$('.b1').on("click",function(){
   $('li').addClass("li_class");
  });
=============================== 
class b1가 click되면 <== addClass(className) 버튼입니다.
<li>태그에 addClass()메서드를 이용하여 class li_class를 추가해주도록 하였습니다.
모든 <li>태그에 class li_class가 생긴답니다.

addClass(className) 버튼을 누른뒤 <li>태그에 class li_class가 적용된 모습입니다.

=============================== 
$('.b2').on("click",function(){
   $('li').addClass(function(i,d){
    if(d == "li_add"){return "li_fun";}
   });
  });
=============================== 
class b2가 click되면 <== addClass(function) 버튼입니다.
<li>태그에 addClass()메서드를 이용하여 class가 li_add인 경우 
class li_fun를 추가해주도록 하였습니다.
여기서 function(i,d)의 i값은 <li>태그의 인덱스 값이고 d값은 <li>태그 class값입니다.
class가 없는경우는 공백으로 나온답니다.

※alert("<li>:"+i+"번째의 class:"+d); <== 값이 궁금하시면 if문구를 주석처리하고
옆에있는 소스를 넣어보세요^ㅡ^/

※addClass()란 지정한 대상에 클래스를 추가하는 메서드 입니다.
형식은 addClass(className) / addClass(function)로 구성되어있습니다.
className란에는 추가할 클래스의 이름을 넣어주시면된답니다.
function란에는 function(i,d)처럼 인덱스 변수값/클래스 변수값을 넣어 조건을 걸어 추가하시면
된답니다.

http://api.jquery.com/addClass/ 

addClass(function)버튼을 누른뒤 class가 li_add인 <li>태그에 
class li_fun이 추가된모습입니다.

=============================== 
$('.b3').on("click",function(){
   $('li').removeClass("li_class");
  });
=============================== 
class b3가 click되면 <== removeClass(className) 버튼입니다.
<li>태그에 removeClass()메서드를 이용하여 class가 li_class인것을
모두 삭제하도록 하였습니다.

먼저 addClass(function) 버튼을 누르고 addClass(className) 버튼을 누룬뒤의 모습입니다.
그다음

removeClass(className)버튼을 눌러보았습니다.
addClass(className)버튼을 눌러 추가된 li_class는 삭제되었지만
addClass(function)버튼을 눌러 추가된 li_fun는 남아 있습니다.

=============================== 
$('.b4').on("click",function(){
   $('li').removeClass(function(i,d){
    if(d == "li_class"){return d;}
   });
  });
=============================== 
class b4가 click되면 <== removeClass(function) 버튼입니다.
<li>태그의 class값이 li_class인 경우만 삭제를 하도록 하였습니다.

addClass(className)버튼을 누른뒤의 모습입니다.
그리고

removeClass(function)버튼을 눌러보았습니다.
"안녕하세요.", "주니주니입니다." 부분의 li_class는 삭제 되었지만
"제이쿼리공장장" 부분은 삭제가 안된모습입니다. 
이유는 <li class="li_add">제이쿼리공장장</li> 이렇게 되어있기때문에
addClass(className)버튼을 누른뒤에는 <li class="li_add li_class">
이렇게 추가되었기때문에 삭제가 안되었답니다.^ㅡ^/

=============================== 
$('.b5').on("click",function(){
   $('li').removeClass();
  });
=============================== 
class b5가 click되면 <== removeClass() 버튼입니다.
<li>태그의 class값을 모두 삭제하도록하라입니다.

※removeClass()란 지정한 대상의 클래스를 모두 삭제하는 메서드 입니다.
형식은 removeClass(className) / removeClass(function) / removeClass() 로 구성되어있습니다.
className란에는 삭제할 클래스 이름을 넣어주시면된답니다.
function란에는 addClass()메서드 사용법이랑 똑같습니다.
removeClass()는 ()안에 미입력시 모든 클래스는 삭제된답니다.

addClass(function), addClass(className) 버튼을 누른뒤의 모습입니다.
그리고

removeClass()버튼을 눌러보았습니다.
<li>태그의 모든 Class가 삭제된모습입니다.

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