[JQuery] JQuery의 정의, 사용법, CDN, 문법, 예제

목차

1. 정의

2. 사용법

3. 문법

4. 예제

5. 실행화면

---

1. 정의

 실무에서 자주 사용하는 자바스크립트 코드들을 쉽게 사용할 수 있도록 정의된 일종의 라이브러리이다.

 자바스크립트 코드를 이용한 기능들을 쉽게 구현할수 있다. (생산성 향상)

 chain 기법을 사용한다. - 명령을 '.(온점)'을 기준으로 줄줄이 나열하여 사용하는 것.

 

2. 사용법

 JQuery를 사용하려면 JQuery를 import 해야한다.

 import 하는 방법은 기본적으로 두가지이다.

 

 - 직접 파일을 다운받는 방식

 - CDN(Content Delivery Network) 방식

 

 1) 직접 파일 다운 방식

  1.1) https://jquery.com/ 접속한다.

  1.2) Download JQuery 를 클릭한다.

Download JQuery 클릭

 

  1.3) compressed 버전을 다운받는다.

   - compressed 버전 : jQuery를 압축한 형태로 크기가 적고 속도가 빠르다. 

   - uncompressed 버전 : JQuery의 원본파일. JQuery를 직접 수정할만큼의 복잡한 작업을 수행할 때 사용. 크기가 큼.

   우리는 입문 단계이기때문에 compressed를 클릭한다.

  1.4) 작업 위치에 저장

  

 

  1.5) 코드 입력

<script src="jquery-3.4.1.min.js"></script>

 

 2) CDN 방식

 CDN이란 Content Delivery Network의 약자로 전세계의 분산된 네트워크 서버에 파일에 대한 캐시를 저장시켜 사용자와 가장 가까운 서버의 캐시를 이용해 데이터를 전달받는 것. 

 

 2.1) 코드입력

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

3. 문법

 $('.클래스명').method1().method2();

 

 css selector 문법과 동일하며 제어하고싶은 클래스명을 '.classname' 형태로 입력해준다.

 classname 이라는 클래스를 가진 모든 엘리먼트들을 제어할 수 있다.

 

4. 예제 

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <div class='ssk'></div>
    <script>
        $('.ssk').html('my name is ssk'); //css select 문법 - welcome 의 클래스를 참조한다
    </script>

 $('.ssk') - ssk라는 클래스의 제어권을 가져옴

 .html('my name is ssk') - 해당 클래스의 html 태그에 문자열을 입력함

 

5. 실행화면

출력