jQuery란 무엇인가?

jQuery란 JavaScript의 생산성을 향상시켜주는 JavaScript 라이브러리이다.

라이브러리란?

자주 사용하는 코드들을 재사용할 수 있는 형태로 가공해서 프로그래밍 효율을 높여주는 코드들이다.

jQuery의 특징

• Element를 선택하기 쉽게 할 수 있다.
• 선택된 Element들을 효율적으로 제어할 수 있다.
• JavaScript로 만들어진 라이브러리이다.

jQuery 사용방법

jQuery를 사용하는 방법에는 아래와 같이 2가지가 있다.

1. 직접 서비스 하는 방법
   jQuery 사이트에서 jQuery 파일을 다운받고 자신의 웹 서버나 온라인 상에 존재하는 공간에 업로드 한 후 script src의 속성값으로 전달한다.

2. 구글의 자바스크립트 라이브러리를 사용하는 경우
   url을 복사해서 script src의 속성값으로 전달한다.

min 파일과 기본 파일

• min 파일 : 압축된 파일로 저사양의 컴퓨터나 네트워크가 느린 사용자한테는 압축되어 있는 파일을 사용하는 것이 좋다.
• 기본 파일 : 개발하는데에 jquery사용에 문제가 있을 경우, 완전한 코드의 형태를 필요로 할 수 있기 때문에 그런 경우에는 압축되지 않은 파일을 사용할 수 있다.

jQuery의 문법

• jquety는 $로 시작한다.
• jquery는 인자값으로 CSS selector를 줄 수 있다.

$(제어대상).method1().method2();
주어.서술어

jQuery는 jQuery의 특성한 문법 체계를 가지고 있기 때문에 JavaScript가 아닌 느낌이 들긴 하지만 사실은 JavaScript에서 허용하는 범위 안에서의 문법이다.

jQuery를 사용하게 될 경우, JavaScript를 사용했을 때보다 생산성이 드라마틱하게 높아진다.

jQery Wrapper

Wrapper란 jQuery라는 이름을 가지고 있는 함수를 호출하는 것이다.

그 인자로 Element Object를 전달하거나 문자열로 된 CSS Style Selector를 전달한다.

Element Object (엘리먼트 오브젝트)

document.getElementById로 인자를 전달하면 어떤 값을 return 해주는데 그 return한 객체가 엘리먼트 오브젝트 이다.

CSS Style Selector (CSS 스타일 선택자)

• ID Selector : #
• Class Selector : .
• Element Selector : 아무것도 붙어있지 않음

Wrapper의 안전한 사용

$와 jQuery는 같은 의미이지만 $를 사용하는 다른 라이브러리들과의 충돌 때문에 아래와 같은 방법을 사용한다.

• jQuery라는 이름 쓰기
• 함수를 만들어 사용하기

(function($){
	$('body').html('hello World!');
})(jQuery);

위와 같이 함수를 만들어 인자로 jQuery객체를 전달하여 충돌을 방지할 수 있다.

jQuery를 이용해서 제어 대상을 지정하는 방법

• jQuery(selector, [context])
  - selector : CSS와 같은 형태를 가진 문자열
  - context : 두번째 인자로 어떤 값이 전달이 되면 그 값은 컨텍스트라는 이름을 가진 인자가 되며 생략이 가능하다.
• jQuery(element) : jQuery의 인자로 Element Object가 들어간다.

jQuery Chain

jQuery의 메소드들은 반환값으로 자기 자신(Wrapper의 오브젝트, 메소드가 제어했던 대상)을 반환해야 한다는 규칙을 가지고 있다. 이를 이용하면 한번 선택한 대상에 대해서 연속적인 제어를 할 수 있다. 이를 Chain이라 한다.

Chain의 장점

• 코드가 간결해진다.
• 인간의 언어와 유사해서 자연스러운 과정과 일치한다.

jQuery Traversing

Traversing이란, Chain Context를 유지하면서 제어의 대상이 되는 Element를 변경하는 기법이다.

Traversing을 이용하게 되면 하나의 context에서 필요에 따라 제어하고자 하는 대상을 변경할 수 있기 때문에 계속해서 해당 chain context를 유지하면서 코딩 할 수 있게 됨으로 경제적이고 작업 흐름도 연속적으로 이어질 수 있다.

.end() : 마지막의 Traversing을 취소하는 메소드 ( 이전의 context로 돌아간다.)

jQuery의 Event

• 크로스브라우징의 문제를 해결해준다.
  브라우저마다 이벤트를 설치하는 api의 차이점으로 인해 어떤 브라우저인지 체크해야하던 불편함을 개선
  
• bind로 이벤트 핸들러를 설치하고 unbind로 제거한다.
• trigger로 이벤트 핸들러를 강제로 실행한다.
  마치 이벤트가 발생한 것 처럼 어떤 이벤트 핸들러를 호출할 수 있게 된다.
• click, ready와 같이 다양한 이벤트 헬퍼를 제공한다.
• live를 이용하면 현재 존재하지 않는 엘리먼트에 이벤트 핸들러를 설치할 수 있다.

jQuery Animation

• JavaScript와 CSS를 이용해서 HTML Element에 동적인 효과를 줄 수 있다.
• jQuery의 효과 메소드를 호출하는 것만으로 간단히 효과를 줄 수 있다.

---

해당 포스팅은 생활코딩 - jQuery의 내용을 보며 공부한 것을 정리한 내용입니다.

참고사이트

생활코딩 - jQuery