jQuery_STUDY/jQuery02.html at master · CreativePersonDW/jQuery_STUDY · GitHub

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
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
<html lang="ko">
    <head>
        <title>선택자</title>
        <script  src="http://code.jquery.com/jquery-latest.min.js"></script>

    </head>
    <body>

        <h1>기본 선택자</h1>
        <h3>전체 선택자</h3>
        <p>HTML 페이지에 있는 모든 문서 객체(DOM)를 선택하는 선택자이다.</p>
        <script>
            // $(function(){
            //     $('*').css('color', 'red');
            // });
        </script>
        <hr>
        <h3>태그 선택자</h3>
        <h4>안녕? 난 뽀로로야~!</h4>
        <p>노는게 제일 좋아 친구들 모여라 언제나 즐거워 개구쟁이 뽀로로</p>
        <h4>안녕? 난 뽀로로야~!</h4>
        <p>노는게 제일 좋아 친구들 모여라 언제나 즐거워 개구쟁이 뽀로로</p>
        <script>
            // 하나의 태그를 선택하고 싶을떄
            $(function(){
                $('h4').css('color', 'tomato');
            });

            // 하나 이상의 태그 선택자를 동시에 사용하고 싶을때
            $(function(){
                $('h4, p').css('background', 'lightgray');
            });
        </script>

        <hr>

        <h3>아이디 선택자</h3>
        <p>특정한 아이디 속성을 가지고 있는 문서 객체를 선택하는 선택자이다.</p>
        <h1>테스트</h1>
        <h1 id="test2">테스트2</h1>
        <script>
            $(function(){
                $("#test2").css("color", "cyan");
            });
        </script>

        <h3>클래스 선택자</h3>
        <p>특정한 클래스 속성을 가진 문서 객체를 선택하는 선택자이다.</p>
        <h1 class="item">테스트1</h1>
        <h1 class="item select">테스트2</h1>
        <h1 class="item">테스트3</h1>
        <script>
            $(function(){
                $(".item").css("color","orange");

                // 두 개 클래스 속성을 모두 갖는 문서 객체를 선택하고 싶을때
                $(".item.select").css("background","deepskyblue") // and의 의미
                // $(".item, .select").css("background","deepskyblue") // or의 의미
            });
        </script>

        <br>

        <h3>자식 선택자와 후손 선택자</h3>
        <p>기본 선택자의 앞에 붙여 사용하며 기본 선택자의 범위 제한</p>
        <div>
            <ul>
                <li><h3>apple</h3></li>
                <li>banana</li>
                <li>orange</li>
                <li>pineapple</li>
                <li>peach</li>
            </ul>
            <h3>pear</h3>
        </div>
        <script>
            // 직계자식(자손) 선택자
            $(function(){
                $("div > h3").css("color", "deepskyblue");
            });

            // 후손 선택자
            $(function(){
                $("div h3").css("background", "orange");
            });

        </script>

        <hr>

        <h3>속성 선택자</h3>
        <p>기본선택자 뒤에 붙여 사용한다.</p>
        <p>
            요소[속성] : 특정 속성을 가지고 있는 객체 선택<br>
            요소[속성 = 값] : 속성 안의 값이 특정 값과 같은 객체 선택<br>
            요소[속성 ~= 값] : 속성 안의 값이 특정 값을 단어로써 포함하는 객체 선택(띄어쓰기로 구분되어야함)<br>
            요소[속성 *= 값] : 속성 안의 값이 특정 값을 포함하는 객체 선택<br>
            요소[속성 ^= 값] : 속성 안의 값이 특정 값으로 시작하는 객체 선택<br>
            요소[속성 $= 값] : 속성 안의 값이 특정 값으로 끝나는 객체 선택
        </p>
        <input type="search" class="hello" name="world">
        <button onclick="test1();">확인1</button><br>
        <input type="number" class="hello test" name="jQuery">
        <button onclick="test2();">확인2</button><br>

        <input type="text" class="tel" name="tel1">
        <input type="text" class="tel" name="tel2">
        <input type="text" class="tel" name="tel3"> &nbsp;
        <button onclick="test3();">확인3</button><br>

        <input type="checkbox" name="chk">A &nbsp;&nbsp;
        <input type="checkbox" name="chk">B &nbsp;&nbsp;
        <input type="checkbox" name="chk">C &nbsp;&nbsp;
        <button onclick="test4();">확인4</button><br>
        <button onclick="test5();">확인5</button><br>

        <script>
            function test1(){
                    $("input[class]").css("background", "gray");
                    $("input[type=search]").val('뿅');
            }

            function test2(){
                // 특정 단어 일치
                // $("input[class ~= test]").val('123456');

                // 포함 여부
                $("input[class *= test]").val('000');
            }

            function test3(){
                // 특정 단어로 시작하기
                $("input[name ^= te]").css("background", "lightgray");

            }
            function test4(){
                // 특정 단어로 끝
                $("input[name $= hk]").attr("checked", true);
            }
            function test5(){
                // css메소드 체이닝
                // $('input[name=chk]').css('width','100px').css('height','100px');

                // css속성을 지닌 객체를 매개변수로 하면 css메소드 한번 실행 가능
                $('input[name=chk]').css({'width':'100px', 'height':'100px'});

            }
        </script>

    </body>

</html>