티스토리 뷰

[개발]프로그래밍/jquery

[jquery] 자식 선택자 - >의 포함여부에 따른 선택

좋은 블로그 2016. 9. 28. 10:04

1. 자식 선택자 - 역할

기본 선택자의 범위를 제한


좀 더 세부적인 문서객체를 선택하고자 하는 경우에 사용


2. 자식 선택자 - 예제코드

1. >가 포함되어 있는 경우


◈ 코드


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<script src="https://code.jquery.com/jquery-1.11.3.js" type="text/javascript"></script>
 
<script>
$(document).ready(function () 
{
    $('div > *').css('color','blue');
});
</script>
 
<body>
    <div>
        <ul>
            <li>test목록1</li>
            <li>test목록2</li>
            <li>test목록3</li>
        </ul>
        <h1>테스트1</h1>
        <h2>테스트2</h2>
    </div>
</body>


]


◈ 결과화면




2. >가 포함되지 않은 경우


◈ 코드


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<script src="https://code.jquery.com/jquery-1.11.3.js" type="text/javascript"></script>
 
<script>
$(document).ready(function () 
{
    $('div *').css('color','blue');
});
</script>
 
<body>
    <div>
        <ul>
            <li>test목록1</li>
            <li>test목록2</li>
            <li>test목록3</li>
        </ul>
        <h1>테스트1</h1>
        <h2>테스트2</h2>
    </div>
</body>


]


◈ 결과화면


3. 자식 선택자 - 예제코드 설명

1. >가 포함되어 있는 결과


◈ 코드


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<script src="https://code.jquery.com/jquery-1.11.3.js" type="text/javascript"></script>
 
<script>
$(document).ready(function () 
{
    $('div > *').css('color','blue');
});
</script>
 
<body>
    <div>        
        <ul style="color: blue;">
            <li> test목록1</li>
            <li> test목록2</li>
            <li> test목록3</li>
        </ul>
        <h1 style="color: blue;"> 테스트1</h1>
        <h2 style="color: blue;">테스트2</h2>
    </div>
</body>




◈ 설명


 ※ div 태그의 바로 밑에 있는 자식 태그(ul,h1,h2)에만 color:blue 가 생성됩니다




2.>가 포함되어 있지 않는 결과


◈ 코드


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<script src="https://code.jquery.com/jquery-1.11.3.js" type="text/javascript"></script>
 
<script>
$(document).ready(function () 
{
    $('div *').css('color','blue');
});
</script>
 
<body>
    <div>        
        <ul style="color: blue;">
            <li style="color: blue;"> test목록1</li>
            <li style="color: blue;"> test목록2</li>
            <li style="color: blue;"> test목록3</li>
        </ul>
        <h1 style="color: blue;"> 테스트1</h1>
        <h2 style="color: blue;">테스트2</h2>
    </div>
</body>





◈ 설명


 ※ div 태그의 밑에 있는 전체 태그에 color:blue 가 생성됩니다




'[개발]프로그래밍 > jquery' 카테고리의 다른 글

[jquery] 필터 선택자 - :을 포함한 선택자  (0) 2016.09.28
[jquery] 속성 선택자 - 속성,구분기호,값  (0) 2016.09.28
[jquery] 기본 선택자 - *,아이디,클래스  (0) 2016.09.28
[jqgrid] 기본적인 함수 정리  (0) 2016.09.05
[jquery] hide() , show() - 숨기기 , 보이기  (0) 2016.09.05
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday