jQuery란 무엇인가?
jQuery란 JavaScript의 생산성을 향상시켜주는 JavaScript 라이브러리이다.
라이브러리란?
자주 사용하는 코드들을 재사용할 수 있는 형태로 가공해서 프로그래밍 효율을 높여주는 코드들이다.
jQuery의 특징
- Element를 선택하기 쉽게 할 수 있다.
- 선택된 Element들을 효율적으로 제어할 수 있다.
- JavaScript로 만들어진 라이브러리이다.
jQuery 사용방법
jQuery를 사용하는 방법에는 아래와 같이 2가지가 있다.
-
직접 서비스 하는 방법
jQuery 사이트에서 jQuery 파일을 다운받고 자신의 웹 서버나 온라인 상에 존재하는 공간에 업로드 한 후 script src의 속성값으로 전달한다. -
구글의 자바스크립트 라이브러리를 사용하는 경우
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의 내용을 보며 공부한 것을 정리한 내용입니다.
참고사이트
