Framework & Library/JQeury

[JQuery] 제이쿼리 기본

gangintheremark 2023. 7. 13. 10:47
728x90

JQuery 란?

제이쿼리는 자바스크립트언어를 쉽게 활용할 수 있도록 단순화시킨 오픈소스 기반의 자바스크립트 라이브러리이다.

  • 간결하고 직관적인 문법 : CSS 선택자를 사용해 HTML 요소를 선택하고 조작
  • 이벤트 처리 : 다양한 이벤트에 대한 처리를 간편하게 구현
  • AJAX 요청 : AJAX 요청을 쉽게 생성하고 처리할 수 있는 기능 제공
  • 애니메이션 효과 구현 : HTML 요소에 애니메이션 효과를 쉽게 적용

JQuery 적용

1. JQuery 파일을 다운로드 받은 후 적용

<head>
  <script src="JQuery 파일경로"></script>
</head>

2. CDN(Content Delivery Network) 을 이용하여 로드 👉 URL 제공

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>

JQuery 기본 문법

$(css선택자)

$ 기호는 제이쿼리를 의미하며, 제이쿼리에 접근할 수 있게 해주는 식별자이다. 선택자를 이용하여 원하는 HTML 요소에 접근하고, 함수를 정의하여 요소에 원하는 동작을 부여한다.

  • Js객체가 아닌 JQuery 객체를 반환한다. 👉 Js와 사용하는 메서드가 다름
  • Js객체 -> $( Js객체 ) -> JQuery 객체
  • $(document).ready(익명함수); : DOM 트리가 준비되었을 때 실행될 코드 설정
    💡 자바스크립트의 onload="함수명" 기능이랑 똑같다
<head>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
    <script>
        // DOM 트리가 모두 완료된 후 호출
        $(document).ready(function() {
            console.log("ready");
        });
    </script>
</head>
728x90