jQuery 란?

기존에 복잡했던 클라이언트 측 HTML 스크립팅을 간소화 하기 위해 고안된 Javascript 라이브러리.

jQuery는 적은양의 코드로 빠르고 풍부한 그능을 제공함.
( * 라이브러리(libary) : 프로그램, 프로그래밍 언어에 없는 추가적인 기능)

jQuery 라이브러리 연결 방법

• jQuery 공식 홈페이지 : https://jquery.com/
• jQuery CDN 코드 제공 페이지 : https://code.jquery.com/

1. jQuery 라이브러리를 다운로드 하여 external방식으로 연결하는 방법

2. CDN(Content Delivery Network)을 이용하여 CDN을 이용하여 온라인 환경에서 페이지 로딩 시 다운로드하여 연결하는 방법

주의사항 !
같은 라이브러리를 한 페이지에 중복해서 받는 일 없도록 해야한다.
충돌 발생 위험!

---

자바스크립트와 제이쿼리 사용 예시

    <script>
        document.getElementById("btn1").addEventListener("click", () => {
            alert("자바스크립트 버튼이 클릭되었습니다.");
        });

        $("#btn2").on("click", () => {
            alert("제이쿼리 버튼이 클릭되었습니다.");
        });
    </script>

---

html 문서 해석 순서와 window.onload(), jQuery의 ready() 함수
HTML 문서는 항상 위에서 아래로 순서대로 해석된다.
-> 아래쪽에 작성되어 아직 해석이 안된 코드는 사용할 수 없다.

window.onload()

HTML(현재 창)이 모두 로딩이 되었을 때 라는 이벤트 리스너
-> 일단 HTML 문서 내용을 모두 다 해석한 후 마지막에 onload 옆에 작성된 함수 수행

• window.onload의 단점 : 한 페이지 내에서 한번만 작성할 수 있다.
  (여러번 작성되면 마지막 내용이 수행됨)

window.onload = function() {
	document.getElementById("test1").innerText = "HTML 해석 순서 테스트";
}

---

jQuery의 ready() 함수

HTML 문서 로딩이 완료된 후 수행할 기능을 작성하는 함수.

• onload의 단점인 한번만 작성할 수 있다라는 점을 개선함 == 여러번 작성 가능

** 중요 ! jQuery를 나타내는 기호는 '$' 이다

---

ready() 함수 작성 방법 3가지

1. jQuery(document).ready(function() {코드;});
2. $(document).ready(function() {코드;});
3. $(function() {코드;});

ready() 함수 테스트새로운 내용 추가

<!-- ready() 함수 테스트 -->
    <script>

        // 문서 로딩이 완료된 후 마지막에 수행
        jQuery(document).ready(function() {
            $("#test2").text("ready() 함수 테스트");
            // $("#test2")아이디가 #test2인 요소
            // .text("ready() 함수 테스트") : 요소의 내용으로 "ready()함수 테스트"를 출력
            // text() == innerText
        });

        $(document).ready(function() {
            $("#test2").css("backgroundColor", "pink");
            // .css("backgroundColor", "pink"); 배경색을  pink로 변경
            // css() == style
        });

        $(function() {
            $("#test2").css("fontSize", "30px");

            console.log("자바스크립트 코드로 사용 가능!");
            document.getElementById("test2").style.fontWeight = "bold";
            document.getElementById("test2").innerText += "새로운 내용 추가";
        });
    </script>