제이쿼리 요소 jQuery element 정리

ㅁ 제이쿼리 스타일 조작(jQuery Style Manipulate)

addClass( ) : 클래스 추가

removeClass( ) : 클래스 제거

toggleClass( ) : 지정한 클래스가 있으면 제거 없으면 추가

css( ) : 스탕리 속성을 읽거나 설정

hasClass( ) : 요소에 파라미터값으로 전달한 클래스 지정되었는지 확인 (true/false) 리턴

ㅁ addClass( ) : 클래스 추가 / removeClass( ) : 클래스 제거

<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $("#a").find("button.default").mouseenter(function() {
        $(this).addClass("hover");
    }).mouseleave(function() {
        $(this).removeClass("hover");
    })
});
</script>

ㅁ toggleClass의 사용 (위의 결과와 동일한 결과가 나온다)

<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $("#a").find("button.default").mouseenter(function() {
        $(this).toggleClass("hover", true);
    }).mouseleave(function() {
        $(this).toggleClass("hover", false);
    })
});
</script>

ㅁ hasClass( )

hasClass("main")과 is(".main)은 사실상 같은 기능을 수행한다.

but is는 셀렉터도 사용할 수 있고 두글자로 짧으므로 더 편리할 수 있다.

ㅁ HTML DOM에 요소 추가 

remove( ) : 요소를 삭제

empty( ) : 콘텐트 부분만 삭제 

detach( ) : 요소 삭제 but 나중에 사용할 수 있음

wrap( ) : 선택된 요소를 파라미터 전달 요소로 감싼다.

upwrap( ): wrap을 해제 

관련글보기

[문돌이의 IT/jQuery] - 제이쿼리 성능 jQuery performance

[문돌이의 IT/jQuery] - 제이쿼리 선택자 jQuery selector

[문돌이의 IT/jQuery] - 제이쿼리 횡단탐색(jQuery Traversing) 공부 정리

[문돌이의 IT/JavaScript] - Front-end Framework trend