[jQuery].hasClass(), .addClass(), .removeClass() 를 접하다..

음.. 업무를 하다가 의미를 몰라서 검색해보고, 찾아봤던 jQuery 를 좀 얘기하려고 한다.. 패턴 자체는 아주 단순한것이지만, 의미를 모르는 것이어서 검색을 했던 것이다..

근무하면서 jQuery 를 사용 해오긴 했지만, 머라고 해야될까 좀 단순한 패턴..?? 항상 하던 패턴..?? 으로만 사용하기도 하고, 개발을 하면서 API 를 찾아본다던지 어떠한 기능이 있는지 사전 공부를 안하니 더욱 모르는 듯 하다.. [그래서 햄처럼 미리 관심을 갖고 공부를 하고, 하는것이 새삼 대단한것이라고 생각을 하게 된다..] 

그리고 만약 애초에 몰랐을 때 몰랐던 부분을 포스팅을 하면서 기록을 하고, 개발을 했었더라면, 지금의 상황과는 많이 틀렸을지도 모르겠다.. 그러니 앞으로 아무리 기초적인것이라도 우선 내가 몰랐다면, 인정하고 정리해서 올리고 넘어가면 된다.. [모르는것이 부끄러운게 아니고, 모르는 것을 아는척하는게 부끄러운 것이라더라..] 정리를 하는 순간 내가 더 집중해서 보고, 몇 차례 더 읽어보고, 업무에서 했던 것이 뼈대가 대기 때문에 더욱 각인이 되고 좋은 듯하다.. 햄의 글을 가져오는 것과는 차원이 틀리다..

오메.. 상황을 얘기하다보니 쓸데없이 너무 길어진 감이 좀 있는듯하다.. 그러면 내가 몰랐던 것을 풀어볼까나..

바로 .hasClass(), .addClass(), .removeClass() 세 가지다..
아래가 해당 소스 부분인데 일부만 가져왔다..

jQuery

1 2 3 4 5 6 7 8 9 10 11 12 13

$('#agree_all').click(function() { if($('#agree_all').hasClass('agron')) { $('#agree_all').removeClass('agron'); $('#agree_all').addClass('agr'); } else { $('#agree_all').addClass('agron'); $('#agree_all').removeClass('agr'); } $('.chk_agr_main').prop('checked'), $('#agree_all').hasClass('agron')); });

이해를 돕기 위해서 HTML 파트도 일부만 가져왔다..

HTML

1 2 3 4 5 6

<a href="#none" class="btn type2 agr" id="agree_all">모두 동의합니다.</a> <input class="chk_agr chk_agr_main" id="chk_agr1" type="checkbox" /> <input class="chk_agr chk_agr_main" id="chk_agr2" type="checkbox" /> <input class="chk_agr chk_agr_main" id="chk_agr3" type="checkbox" /> <input class="chk_agr chk_agr_main" id="chk_agr4" type="checkbox" />

기본적인 패턴을 보자.. HTML 을 보면 눈치가 오는가..?? 모두 동의합니다를 누르면, 아래 4개의 checkbox 가 모두 체크되었다가 풀리고 하는 것이다..
그런데 위 jQuery 소스에서 2, 3, 4 라인에 .hasClass(), .removeClass(), .addClass() 가 보일 것이다.. 1라인에 .click(function() 은 아는 부분이지만, click 이벤트가 발생했을 때 그 안에 부분이 이해가 안갔던 것이다..

2 라인 .hasClass() 를 풀어서 생각하면, 선택한 id="agree_all" 의 class 에 agron 이라는 것이 있느냐 없느냐 하는 것이다.. 즉, 존재 여부에 대한 true/false 의 개념이다.. 고로 $('#agree_all').hasClass('agron') 는 false 다..

3라인 .removeClass() 는 선택한 id="agree_all" 의 class 에 agron 을 삭제하라는 것이다..

4라인 .addClass() 는 3라인과 반대로 선택한 id="agree_all" 의 class 에 agr 을 추가하라는 것이다..

결국 전체적으로 보면, click function 이 발생하면, if else 문에서 true/false 를 확인 한 후에 false 면 if 문으로 true 면 else 로 빠지도록 하는 것이다..

처음에 소스를 봤을 때도 당연히 if else 에 대한 흐름은 파악했지만, 문제는 속성들을 몰랐다.. 그래서 찾아보게 되었고, 몰랐던 것이기에 이렇게 포스팅을 하였다..

아!!! 그리고.. 다음에 11라인을 설명해야 되지만, 이 부분은 별도로 설명을 해야된다는 필요성을 느끼기에 다음 포스팅으로 찾아오겠다..