제이쿼리 횡단탐색(jQuery Traversing) 공부 정리

제이쿼리 횡단탐색의 목적 : 성능

필터링 메서드 : 선택 요소에 추가적인 조건을 부여해서 걸러냄. 문서 전체에서 찾는 작업을 최소화해서 성능을 높인다.

ㅁ is( ) 메서드 / map( ) 메서드

<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $("#save").click(function() {
        var arr = $("#content > input:checked").map(function(index, element) {
            return element.value;
        }).get(); // get까지 호출하면 배열이 만들어짐
        $("#list").html(arr.join(","));
    })
});
</script>

ㅁ ** find() : 후손 선택 

1. $("#a h1") 
2. $("#a).find("h1") // 성능 좋음

ㅁ prev( ), next( )의 사용

<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    var current = $("#content > div").first().css("font-weight", "bold");
    
    $("#prev").click(function() {
        var prev =  current.prev();
        if (prev.length > 0) {
            current.css("font-weight", ""); // 빈문자열 주면 스타일 제거
            current = prev.css("font-weight", "bold");
        }
    });
    $("#next").click(function() {
        var next =  current.next();
        if (next.length > 0) {
            current.css("font-weight", ""); // 빈문자열 주면 스타일 제거
            current = next.css("font-weight", "bold");
        }        
    });
});
</script>

ㅁ each( ) 메서드

실행속도 : for > while > forEach() > $.each() > for ( ... in ..) 

each( ) 메서드의 장점: 실행속도는 느리지만 반복문에서 closure 문제가 그냥 해결된다. ** 유사배열

<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $("input.test").each(function(index, element) {
        $(element).click(function() {
            alert((index+1) + " btn click");
        })
    })
});
</script>

관련글보기

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

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