[jQuery] 제이쿼리의 선택자

Legacy/Web

[jQuery] 제이쿼리의 선택자

Foo 2015. 7. 14. 10:35

728x90

앞서 자바스크립트의 선택자에서와 같은 주의사항이 있다.

DOM을 선택하려면 body보다 제이쿼리가 나중에 실행되어야 한다는 것이었다.

이렇게 하는데에 jQuery에는 두 가지 방법이 있다.

1. $(document).ready(function(){실행문});

2. $(function(){실행문});

위의 두 방법은 <body> 영역에 모든 문서 객체를 로딩한 후 실행문을 실행한다.

직접 선택자와 인접 관계 선택자

제이쿼리를 이용한 CSS와 속성 변경방법

1. $("#tistoryWrap").css("color", "blue"); => id가 tistoryWrap인 요소를 찾아 css를 적용한다.

2. $("img").attr("width", "300"); => img 태그의 속성(attribute) 을 적용

기본 선택자의 종류

직접 선택자

전체 선택자 - $("*") 모든 요소를 선택한다.

아이디 선택자 - $("#아이디명") id 속성으로 선택

클래스 선택자 - $(".클래스명") class 속성으로 선택

요소명(태그) 선택자 - $("요소명") 요소명으로 선택

그룹 선택자 - $("선택1, 선택2, 선택3, ... 선택n) 지정된 요소들을 한번에 선택

인접 관계 선택자

부모 요소 선택자 - $("요소 선택").parent() 선택한 요소의 부모 요소를 선택한다.

상위 요소 선택자 - $("요소 선택").parents() 선택한 요소의 상위 요소를 모두 선택한다.

하위 요소 선택자 - $("요소 선택 하위 요소") 선택한 요소에 지정한 하위 요소를 선택한다.

자식 요소 선택자 - $("요소 선택>자식 요소") 선택한 요소를 기준으로 자식 관계에 지정한 요소만 선택한다.

자식 요소들 선택자 - $("요소 선택").children() 선택한 요소의 모든 자식 요소를 선택한다.

앞 요소 선택자 - $("요소 선택").prev() 선택한 요소의 앞 요소(형제 요소 중 형)을 선택한다.

앞 요소들 선택자 - $("요소 선택").prevAll() 선택한 요소의 앞 요소 모두를 선택한다.

지정 앞 요소들 선택자 - $("요소 선택").prevUntil 선택한 요소부터 지정한 요소의 앞 요소까지 모두 선택한다.

뒷 요소 선택자 - $("요소 선택").next 또는 $("요소 선택+다음 요소") 선택한 요소의 다음 요소(형제 요소 중 동생)를 선택한다.

뒷 요소들 선택자 - $("요소 선택").nextAll("요소 선택").nextAll() 선택한 요소의 다음 요소를 모두 선택한다.

직접 선택자들은 매우 직관적이므로 설명을 생략하고 인접 관계 선택자들 중 주의해서 봐야할 것이 몇가지 있다.

부모 요소 선택자 - $("요소 선택").parent() 선택한 요소의 부모 요소를 선택한다.

상위 요소 선택자 - $("요소 선택").parents() 선택한 요소의 상위 요소를 모두 선택한다.

하위 요소 선택자 - $("요소 선택 하위 요소") 선택한 요소에 지정한 하위 요소를 선택한다.

자식 요소와 하위 요소는 서로 다르다. 자식 요소는 바로 아래에 있는 요소를 의미하고 하위 요소는 자식 뿐만 아니라 손자 요소 그 너머까지 포함하는 요소이다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ko" xml:lang="ko">
    <head>
        <title> new document </title>
        <meta http-equiv="content-type" content="text/html;charset=utf-8" />
        <script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
        <script type="text/javascript">
        //<![CDATA[
        $(function() {
            $("#wrap li").css("border", "1px solid red");
        });
        //]]>
        </script>
    </head>
    <body>
        <h1>인접 관계 선택자</h1>
        <ul id="wrap">
            <li>내용1
                <ul>
                    <li>내용2</li>
                </ul>
            </li>
        </ul>
    </body>
</html>
Colored by Color Scripter
cs

위 예제를 실행시켜보면 wrap 하위에 있는 모든 li 요소에 적용된 것을 확인할 수 있다.

자식 요소 선택자 - $("요소 선택 > 자식 요소") 선택한 요소를 기준으로 자식 관계에 지정한 요소만 선택한다.

위의 예제에서 10행에 있는 #wrap li를 #wrap > li로 바꿔보자. 자식 요소와 하위 요소의 차이에 대해 알 수 있을 것이다.