[웹/jQuery] jQuery에 관한 개요 및 설정들,,

jQuery 란??

자바스크립트의 DOM(Document Object Model)을 이용해 HTML문서의 노드, 스타일, 속성, 이벤트, 위치 및 크기 등을 다룰 수 있다.

DOM 객체는 HTML 문서의 모든 요소에 접근하는 방법을 정의한 API이다.

jQuery는 자바스크립트의 DOM 객체를 이용한 작업을 좀 더 쉽게 만들어주는 자바스크립트 라이브러리이다. 자바스크립트로 작업하는 것보다 jQuery를 

이용하면 효율적으로 코드를 작성할 수 있으며, 코드 길이도 줄일 수 있다. 또한, CSS에서 사용하는 선택자를 이용하여 jQuery에서 노드를 쉽게 찾을 수 있다는

장점이 있다.

- jQuery 라이브러리 사이트

https://jquery.com

jQuery 기능

jQuery DOM

jQuery의 핵심기능

노드 찾기, 수정하기, 삭제하기 등 노드와 관련된 모든 기능을 제공한다.

jQuery Ajax

서버와 데이터를 쉽게 주고 받을 수 있는 통신 기능을 제공하며 서버로부터 받은 데이터를 jQuery DOM과 연계할 수 있어 동적인 페이지를 쉽게 

제작할 수 있게 한다.

jQuery 플러그인 

jQuery의 기능을 확장하여 사용할 수 있도록 만들어진 기능들

다양한 기능들의 플러그인이 존재하며 필요한 기능이 있다면 미리 만들어져있는 플러그인을 찾아서 활용할 수 있다.

jQuery 효과 

웹 페이지를 구성할 때 사용하는 쵸과 기능을 기본적으로 포함하고 있다.

DOM 요소와 연계하여 효과를 쉽게 적용할 수 있다.

jQuery 개발 환경 설정

jQuery 라이브러리 삽입

- CDN 이용

jQuery의 다양한 CDN을 이용해 웹페이지에 삽입

- 구글 Ajax API CDN : http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js

- 마이크로소프트 CDN : http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.0.min.js

- jQuery CDN : http://code.jquery.com/jquery-1.11.0.min.js

- jQuery CDN을 이용하여 웹페이지에 jQuery 라이브러리 삽입 예

- 다운로드한 파일을 이용

jQuery 홈페이지를 통해 jQuery 파일을 다운받아 링크를 웹페이지에 삽입

- jquery-1.11.0.min.js 파일을 다운받아 라이브러리 삽입하는 예제

- jQuery 버전

jQuery 사이트를 보면 2.0x 버전과 1.10x 버전 두 가지가 존재한다.

2.0x 버전은 표준을 지원하는 브라우저의 기능만으로 만들어진 라이브러리이며 1.10x 버전은 표준 및 비표준 모두 지원한다. 추후에는 1.10x 버전이 사라지고 

2.0x 버전만 남겠지만 현재에는 아직 비표준 브라우저(ex. IE7)를 사용하기도 하므로 1.10x 버전의 사용을 고려해야 한다.

ready() 메소드 설정

Java 코드의 프로그램 시작점인 main() 메소드처럼 jQuery의 진입점인 ready() 메소드가 존재

- jQuery 진입한 ready() 메소드 설정 4가지 방법

어떠한 방법을 써도 상관은 없지만 보통 3번째 방식을 공식적으로 추천하고 있다.

jQuery 와 $ 은 jQuery 코어라고 부르며 jQuery를 사용하겠다는 의미를 가지고 있다. 간편하게 사용할 수 있는 $ 를 주로 사용하지만 jQuery 이외의 

자바스트립트 라이브러리를 사용할 경우 충돌이 일어날 수 있으므로 jQuery를 사용해아 한다. jQuery 코어를 간단하게 변수에 담아 사용할 수도 있다.

노드 찾기

노드 추가, 삭제, 이동 등의 작업을 하려면 우선 노드를 찾아야 한다.

스타일이나 속성을 다루거나 이벤트를 등록하고 제거할 때도 마찬가지로 노드 찾기가 선행되어야 한다.

노드 생성/추가/삭제/이동

- 노드 생성

var $신규노드 = $("신규DOM");

$( ) 함수 내부에서 매개변수로 받은 태그 노드 정보를 파싱해 태그에 맞는 HTMLElement 객체를 생성한다. 자바스크립트 DOM 객체를 만들어진 정보는

jQuery DOM 객체로 변환하여 반환한다.

스타일 다루기 

jQuery를 이용하면 웹문서의 스타일을 동작으로 다를 수 있다. 문서를 재실행하여 갱신해줄 필요가 없다.

- 스타일 값 구하기 

$대상.css("스타일 속성이름")

스타일 속성이름을 명시해 해당 스타일 속성값을 알아낸다.

여러 스타일 속성을 한꺼번에 구하려면 [속성이름1, 속성이름2, ...] 과 같이 배열 형식을 이용한다.

속성

태그의 속성에는 일반 속성과 사용자 정의 속성이 있다. id, class, <a>태그의 링크 정보를 담은 href, <img> 태그의 이미지 정보를 담는 src 등이 

일반 속성이다.

그 외에 data-value와 같이 사용자가 필요에 의해 만들어진 속성을 사용자 정의 속성이라고 부른다.

- 속성값 구하기

$대상.attr("속성이름")
$대상.data("data-속성이름")

일반 속성값을 구할 때에는 attr() 메소드를 사용한다.

"data-"로 시작하는 속성인 사용자 정의 속성을 구할 때에는 data() 메소드를 이용하여 속성값을 구할 수 있다. 일반 속성값을 구할 때 data() 메소드를 

사용하면 안 되며 "data-"로 시작하는 속성은 attr() 메소드를 속성값으로 구할 수 있다.

- 속성값 설정하기

$대상.attr("속성이름", "값")
$대상.data("data-속성이름", "값")

속성값을 알아낼 때와 마찬가지로 attr()메소드와 data() 메소드를 이용해 각각 일반 속성과 사용자 정의 속성의 속성값을 설정할 수 있다.