주요 선택자 정리

728x90

728x170

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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

<!-- 주요 선택자 정리 -->
 
<!-- 문단 태그 영역 -->
<style type="text/css">
    div{background-color:yellow;}
    .tit{background-color:orange;}
</style>
<body>
    <h1 align="center"><strong>내용1</strong></h1>
    <h2><strong>내용2</strong></h2>
    <h2>내용3</h2>
    <h2 class="tit">내용4</h2>
    <ul class="myList">
        <li>리스트1</li>
        <li id="two">리스트2</li>
        <li class="three">리스트3</li>
        <li>리스트4</li>
    </ul>
</body>
 
<!-- 메서드 적용 -->
<script type="text/javascript">
    $(function(){
        $("h1").attr("align","left");
        // <h1> 태그의 "align" 속성값을 "left"로 적용
        $("li:first").text("첫 번째 리스트");
        // <li> 태그 중에 첫 번째 요소의 텍스트를 새 텍스트로 바꿈.
        $("h2>strong").css("color","red");
        // <h2> 태그에 자식 요소인 <strong> 태그의 글자를 빨간색으로 적용
        $("#two").prev().css("color","blue");
        // id="two"인 요소의 이전 요소의 글자를 파란색으로 적용
        $("#two").next().css("color","purple");
        // id="two"인 요소의 다음 요소의 글자를 보라색으로 적용
        $("#two").parent().css("border","2px dashed navy");
        // id="two"인 요소의 부모 요소에 파선을 생성
        $(".myList").prepend("<li>Front</li>");
        // class="myList"인 요소 내의 가장 앞의 위치에 새 요소를 추가
        $(".myList").append("<li>back</li>");
        // class="myList"인 요소 내의 마지막 위치에 새요소를 추가
        $("<li>앞에 삽입</li>").insertBefore(".three");
        // class="three"인 요소의 이전 위치에 새 요소를 생성
        $("<li>뒤에 삽입</li>").insertAfter(".three");
        // class="three"인 요소의 다음 위치에 새 요소를 생성
        $("h2").eq(1).wrap("<div />");
        // <h2> 태그 중에 두 번째 요소를 <div> 태그로 감쌈.
        $("h2:has('strong')").addClass("tit");
        // <h2> 태그 중에 하위 요소를 <strong> 태그를 포함하는 <h2>에 class="tit" 속성을 추가
        $("h2:last").removeClass("tit");
        // <h2> 태그 중에 마지막 요소에 class="tit" 속성을 제거
    });
</script>
 
Colored by Color Scripter

cs