jQuery_STUDY/jQuery01.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
<html lang="ko">
    <head>
        <title></title>
        <!-- <script src="js/jquery-3.5.1.min.js"></script> -->
        <!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> -->
        <script  src="http://code.jquery.com/jquery-latest.min.js"></script>
    </head>
    <body>

        <h1>제이쿼리 개요</h1>
        <h3>jQuery란?</h3>
        <p>존 레식에 의해 개발된 경량 javascript 라이브러리로 복잡한
            javascript코드를 손쉽게 구현하기 위해 개발되었다.<br>
            jQuery의 장점<br>
            1. DOM과 관련된 처리를 쉽게 구현할 수 있다.<br>
            2. ajax통신, 이벤트 처리 등을 폭넓게 지원한다.<br>
            3. 별도의 플러그인을 통해 차트, 슬라이드쇼, 테이블 등을 간단히 구현할 수 있다.
        </p>
        <h3>제이쿼리 연결</h3>
        <p id = "p1">
            1. jQuery 홈페이지에서 js파일을 다운로드 받아 연결하는 방법<br>
            2. CDN(Content Delivery Network)를 통한 연결
        </p>
        <script>
            $(function(){
                $('#p1').css("background", "red");
            });
        </script>

        <hr>
        <h3>$(document).ready()</h3>
        <p id="p2">
            페이지를 로드 한 후 ready의 메소드를 실행한다.<br>
            자바스크립트의 window.onload속성과 거의 같은 개념의 메소드이다.
            window.onload속성을 복수개 기입하면, 마지막에 쓴 것으로 덮어써짐과 달리
            $(document).ready(function(){});함수를 복수개 기입하면, 모두 연달아 실행됨
        </p>
        <script>
            // window.onload=function(){
            //     alert('aa');
            // }
            // window.onload=function(){
            //     alert('bb');
            // }
            // $(document).ready(function(){
            //     alert('cc');
            // })
            // $(document).ready(function(){
            //     alert('dd');
            // })
            // 결론은, cc -> dd -> bb가 나옴 (aa가 덮어씌어져서 안나오는거임)

            jQuery(document).ready(function(){
                $("#p2").css("background", "cyan");
            });
            $(document).ready(function(){
                $("#p2").css("border", "1px solid black");
            });
            jQuery(function(){
                $("#p2").css("background", "yellow");
            });
            jQuery(function(){
                $("#p2").css("font-family", "바탕체");
            });

        </script>


    </body>

</html>