---
title: "jQuery 정리 01"
date: "2019-02-20"
tags: ["jQuery"]
status: archived
verified: false
---

---

## jQuery

* 2000년대 초 **John Resig**가 개발
* **jQuery는 JavaScript Library**
     * **Library란 자주 사용될 기능을 미리 구현해 놓은 것**
* **단순화, 크로스 브라우징, 쉽게 사용하는 AJAX**
     * 적게 쓰고 많은 일을 하기 위해서 jQuery를 사용
     * 단순화 - 코딩이 간단해짐
     * 크로스 브라우징 - 모든 브라우저에서 동일한 동작을 하는 것
* [jQuery사이트](http://jQuery.com) 에서 다운받거나 **CDN(Content Delievery Network) URL**을 제공받는다.
    * **compressed** : 코드 압축기로 코드를 압축한 버전 
         * 코드 압축기는 코드 내 필요없는 공백, \t, \n등 코드를 없애는 툴
         * 실행에는 문제가 없으나 읽기 어렵다.
    * **uncompressed** : 코드 압축되지 않은 버전
         * 파일의 크기가 커진다.
         * 개발자가 읽기 좋게 만든 것
* **head태그에 CDN jQuery 라이브러리 추가 후 사용가능해진다.**

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

* **제공하는 기능**
     * DOM(Document Object Model), Event, Effect, AJAX 등을 제공
     * 다양한 selector의 사용(selector 기반)
          * css의 selector와 비슷
* **'$'란 jQuery Object를 사용**
* **plugin을 지원**
     * **plugin이란 jQuery를 사용하여 특정 기능을 미리 구현해 놓은 것**
* Mobile UI용 jQuery Mobile도 제공

## jQuery 기본 문법

```javascript
$(function() {
    코드
});
```

```javascript
$(document).ready(function(){
    // HTML의 태그 정보만 로딩되면 동작(2)
});

$(window).load(function() {
    // HTML에 필요한 모든 대상(외부파일, 이미지)들이 로딩된 후 동작(1)
});
```

* **사용 예**
  * window.load보단 거의 document.ready만 사용
  * document.read 내용 다음으로 window.load 내용이 수행됨

```javascript
$(window).load(function() {
          alert("window.load : HTML에서 사용할 모든 자원(파일,  이미지, ... )이 로딩 된 후 동작 2.(느리다)");
});

$(document).ready(function() {
          alert("document.ready : HTML의 tag 정보가 로딩된 후  동작 1.");
});
```

![01](/md/legacy-assets/Web/jQuery/01/01.webp)

* **document.ready를 많이 사용해서 짧게 줄인 걸 많이 사용**

```javascript
/* $(document).ready(function() {
     alert("document.ready : HTML의 tag 정보가 로딩된 후  동작");
}); */

$(function() {
     alert("document.ready : HTML의 tag 정보가 로딩된 후  동작");
});
```

* **jQuery는 [API](https://api.jquery.com/)를 제공해준다.**