jQuery#1

jQuery란?

기존에 복잡했던 클라이언트 측 HTML 스크립팅(JS)을
간소화 하기 위해 고안된 Javascript Library이다.

• 라이브러리(library) : 프로그램, 프로그래밍 언어에 없는 추가적인 기능)

• 단점 : jQuery 라이브러리를 다운로드 받아서 사용 -> 로딩 속도가 느림
  순수 JS보다 속도가 조금 느림

jQuery 라이브러리 연결 방법

jQuery 라이브러리는 .js 확장자로 작성되어있어
script 태그를 이용하여 연결 할 수 있다.

1) jQuery 라이브러리를 다운로드 받아서 직접 연결

• 장점 : 서버 컴퓨터에 라이브러리가 존재하기 때문에 연결 속도가 빠름
• 단점 : 폴더 구조 변경 시 경로가 꼬이게되는 문제가 발생할 수 있다.

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

2) CDN(Content Delivery Network)을 이용한 연결 방법

• 장점 : 언제 어디서든 jQuery를 이용할 수 있다.
• 단점 : 온라인 환경에서 이용 가능. 인터넷 속도에 따라 지연이 될수 있다.

JS와 jQuery 차이점
JS 버튼 jQuery 버튼
HTML 문서 해석 순서와 window.onload / ready()의 차이점
HTML 문서는 기본적으로 위 -> 아래 순서대로 해석된다.
-----> 아랫쪽에 작성되어 미해석된 코드는 윗쪽 코드에서 호출할 수 없다!

window.onload / ready() 공통점
(JS) (jQuery)

-> 윗쪽에 코드가 작성되어도 제일 마지막에 해석(문서 로딩이 끝나는 시점)

• 장점 : 코드가 미해석되어 오류가 발생하는 경우가 없어짐
• 단점 : 먼저 해석되는 코드가 너무 크면 수행되는 시간이 뒤쳐질 수 있음

• window.onload / ready() 차이점

• window.onload는 페이지 내에서 딱 한번만 작성할 수 있다!

• ready()는 여러번 작성 가능하다

ready() 작성 방법 3가지

• 1) jQuery(document).ready(function(){ 코드; });
• 2) $(document).ready(function(){코드; }); ('$' 기호는 jQuery를 의미한다.)
• 3) $(function(){코드; });

js 코드

// JS와 jQuery 차이점

  // 배경 : black
  // 글자색 : yellow
  // 글자 크기 : 20px

  // javascript
  document.querySelector("#jsBtn").addEventListener("click", function () {

      this.style.backgroundColor = "black";
      this.style.color = "yellow";
      this.style.fontSize = "20px";

  });

  // jQuery
  // 어떤 이벤트 요소를 올린다 on == addEventListener (JS)
  $("#jQueryBtn").on("click", function () {
      $(this).css("backgroundColor", "black").css("color", "yellow").css("fontSize", "20px");
  })

  // window.onload 확인
  window.onload = function () { // 문서로딩이 완료된 후 수행
      console.log("1");
  }
  // window.onload를 중복 작성할때 -> 앞서 작성한 window.onload를 덮어 씌움!!!
  window.onload = function () {
      console.log("3");
  }
  console.log("2");

  // ready() 함수 확인
  $(document).ready(function () {
      $("#readyTest").on("click", function () {
          alert("클릭이 되었습니다!")
      })
  })

  // ready() 중복 작성 => 작성한 모든 내용이 적용된다!
  $(document).ready(function () {
      document.getElementById("readyTest").style.color = "pink";
  })

  // ready() 함수의 다른 형태
  $(function () {
      console.log("ready() 함수의 다른 형태");
  })

  // ready() + 화살표 함수
  $(() => { console.log("이렇게도 됩니다.") })

결론 : 자바스크립트 보다 훨씬 간편하다 ㅎ