제이쿼리 선택자 jQuery selector

제이쿼리 사용 시 하위버전을 커버하려면 1.12 ver을 쓰면 된다. 

최근 트랜드는 $(document).ready( function() {} ) 보다는 $(function() {} ) 사용함. as-is도 사용에는 전혀 문제 없음

ㅁ 기본선택자

<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    // ID 셀렉터를 단독으로 사용할 경우에는 하나의 요소만 선택 된다. why? ID는 고유하게 사용하기 때문
    $("#a").css("color", "blue");
    // 클래스는 . 을 사용한다
    $(".test").css("border", "solid 1px gray");
    // 해당 태그의 속성을 준다
    $("h1").css("font-style", "italic");
})
</script>

선택자의 실행 속도는 ID가 가장 빠르다. 기본 셀렉터는 단독으로 사용하는 게 효율이 좋다(ID, tag name, class name)

선택자의 and 조건은 선택자를 붙여서 사용하고 or 조건은 , 를 사용한다.

<script type="text/javascript">
$(document).ready(function() {
    // ID 셀렉터를 복수로 사용하면 모두 선택
    $("div#a").css("color", "blue");
    // 클래스는 . 을 사용한다 and 조건
    $(".test.main").css("border", "solid 1px gray");
    // 해당 태그의 속성을 준다 or 조건
    $("#a, h1").css("font-style", "italic");
})
</script>

ㅁ 계층선택자

자식선택자(바로 아래 계층), 후손선택자(아래 계층 전부)

<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    // 한칸 공백은 후손선택자
    $("#foods tr").css("background-color", "aqua");
});
</script>

다음 형제들 중 div만 선택 예제 

<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    // 다음 형제들 중 div만 선택
    $("#korean ~ div").css("border", "dashed 3px gray");
});
</script>

** Tip 빠른 선택자들은 최대한 단독으로 사용하고 실행 속도가 느린 선택자들은 빠른 선택자와 결합해서 사용하는 게 성능이 낫다.

ex) $("div[href='...']")

ㅁ 필터 선택자(filter selector)

jQuery 확장 필터라서 매우 느리다. 가능하면 안 쓰는게 좋다.

<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $("#foods tr:odd").css("background-color", "aqua");
    $("#foods tr:even").css("background-color", "#FFCCCC");
    $("#foods tr:first").css("background-color", "purple").css("color", "yellow");
    $("#foods tr:eq(3)").css("font-style", "italic");
});
</script>

ㅁ 입력 폼 필터

역시 jQuery 확장 필터라서 매우 느리기 때문에 쓰지 않는 게 좋다.

그냥 id, name을 주고 사용하면 된다.

ㅁ 요소 상태 필터 선택자 ** 유용하게 사용가능

<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $("input:disabled").css("border", "dashed 2px gray");
    $("#inquery").click(function() {
        var value = $("#food > option:selected").val();
        
        if (value === "") {
            alert("분류를 선택하세요");
        } else {
            $("#result").val(value);
        }
    })
});
</script>