JQuery Basic

    ** 제이쿼리(jQuery) :
    - 자바스크립트 언어를 간편하게 사용할 수 있도록 단순화시킨 오픈 소스 기반의 자바스크립트 라이브러리
    - 문서 객체 모델(DOM)과 이벤트에 관한 처리를 손쉽게 구현할 수 있음
    - 이전까지배운 JS는 바닐라JSON이었음. 이게 완벽하면 제이쿼리는 쉬울텐데! 일단 나는 JSON부터 제대로....ㅠ_ㅠ

    ** 제이쿼리의 사용 :
    - 제이쿼리 라이브러리를 추가해야 합니다
    - 방법은 여러가지가 있지만 대표적으로 아래의 세 가지 방법을 많이 사용합니다. 

    ** 적용방법 1 : API를 직접 다운받아 사용
    <script src="js/jquery.js"></script>
    적용방법 2 : (구글)CDN을 이용하는 방법★★★
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    적용방법 3 : jquery에서 제공하는 최신 버전의 jQuery url 가져오기
    <script src="http://code.jquery.com/jquery-latest.js"></script>

    ** JQuery (강사님 요약)
    - 전세계적으로 가장 많이 사용되었던 라이브러리
    - 급속도로 레거시화 되고 있음
    - 아직 국내에서는 상당히 많이 사용됨!
    - 생산성, 안정성이 확보되어있음
    - 가급적 JQuery활용시 ES5 문법을 활용하는게 낫다
    - 바닐라JS가 몸에 익어있을 경우 상당히 쉽게 배울 수 있음

 // 1. 제이쿼리 호출, API활용
        // --> 달러($) 기호는 제이쿼리를 의미
        function test1(){

            // 1-1. 생산성 극대화!! 기차놀이가 가능해져.
            $(".c1").text("제이쿼리 호출, text변경, 내부에서 알아서 반복문이 돌아간다... 개쩌는거라거...");

            // 1-2. 클래스 조작도 가능
            $("#u1").css("color", "blue")
                .css("font-size", "2em")
                .addClass("btn")
                .addClass("btn-secondary");
                
        }

        // 2. create element
        function test2(){
            $("<span></span>").text("생성을 했으면 붙여야지").appendTo(".x1");
            //  --> tag를 만드는건 <> 이런거 꼭 써줘야지. (test7번 보세염)

            // ** append / append to
            // - append : 여기뒤에 바로 붙이겠다.
            // - to : 어디어디 뒤에 이걸 붙이겠다.
        }

        // 3. setter / getter
        function test3(){
            // 3-1. setter
            // --> set이후에 JQuery객체를 리턴함
            // --> 그러니까 .으로 기차놀이가 가능하겠지?
            $("#x1").text("이렇게 값을 전달하면 setter");     // --> document 출력 : 이렇게 값을 전달하면 setter
            $("#x1").css("font-size", "2em");               // (CSS type) , $("#x1").css("fontSize"); --> 이것도 가능해(JS type)

            // 3-2 getter
            // --> "값"을 전달하지 않으면 그에 해당하는 값을 리턴함
            // --> console에서 변경되는거겠지
            var textValue = $("#x1").text();
            console.log(textValue);                       // console 출력 : 이렇게 값을 전달하면 setter
        }

        //  4. 클래스
        function test4(){
            // $("#x1").addClass("fs-3 fw-bold");
            // $("#x1").addClass("fs-3","fw-bold"); --> 이건 안돼
            $("#x1").addClass(["fs-3", "fw-bold"]); // 이게 좀 더 멋지지 (JS style)
            $("#x1").removeClass("fs-3");           // 위에서부터 진행됨. (= bold만 남은거겠지)
        }

        // 5. 속성조작 (= setAttribute)
        function test5(){
            $("#x1").attr("a", "1234");  
            $("#x1").attr("id", "7777");
            $("#x1").attr({
                b : "이것도 되겠지",
                c : "JSON양식으로"
            });

            var getC = $("#x1").attr("c");
            console.log(getC);
        }

        // 6. 통합예제
        function test6(){
            $("#x1")
                .text("통합예제 진행중")
                .css({
                    color : "#655997",
                    fontSize : "3em"
                })
                .attr("onclick", "alert(3)")
                .addClass(["fw-bold", "text-center"]);
        }

        // 7. 요소 생성/추가
        function test7(){
            $("<li></li>")
                .append($("<span></span>").text("요소 생성/추가 진행중"))
                .append($("<span></span>").text(" X버튼").attr("onclick", "alert('이것')"))
                .appendTo("#u1")
            ;
        }

        // 8. 주요 애니메이션
        function test8(){
            // 8-1. 1초에 걸쳐서 스르륵...
            $("#u1").fadeOut(1000);

            // 8-2. 슈룩!
            $("#u1").slideDown(500);
        }

        // 9. event handling
        // 가정] 어떠한 이유에 의해서 test8을 호출했을 때 또 다른 뭔가를 하고싶다.
        function test9(){

            // 9-1. vanilla JS code
            // const x1 = document.getElementById("x1");    --> 이것도 되지뭐
            const x1 = document.querySelector("#x1");
            x1.onclick = () => {
                alert("안녕");
            };

            x1.onmouseenter = () => {
                alert("하이이이");
            };

            // 9-2. JQuery code
            // 방법1)
            // $("#x1").click(null).mouseenter(null);

            // 방법2)
            $("#x1").on({
                click: function(){
                    alert(123)
                },
                mouseenter: function(){
                    alert('마우스엔터')
                }
            });
        }

        // 시작시점잡기
        // 방법1) vanilla JS code
        window.addEventListener("DOMContentLoaded", () => {
            console.log("시작, vanilla JS")
        });

        // 방법2) JQuery code
        // -1
        $(function(){
            console.log("시작, JQuery1")
        });

        // -2
        $(document).ready(function(){
            console.log("시작, JQuery2")
        });