jQuery 사용법

JQuery Home
jQuery는 JavaScript 프로그래밍을 크게 단순화시키는 라이브러리이며 배우기 쉽다.

JQuery Intro
jQuery의 목적은 웹 사이트에서 JavaScrpt를 훨씬 쉽게 사용할 수 있도록 하는것이다.
jQuery란 "적게 작성하고 더 많이 수행"하는 JavaScript 라이브러리이다.
수행하는데 많은 JavaScript 코드가 필요한 많은 일반적인 작업을 수행하고 한 줄의 코드로 호출할 수 있는 메서드로 래핑한다.
또한 AJAX 호출 및 DOM 조작과 같은 JavaScript의 많은 복잡한 작업을 단순화시킨다.

JQuery Get Started
웹 사이트에서 jQuery를 사용하는 방법에는 여러가지가 있다.
jQuery.com에서 jQuery 라이브러리 다운로드
Google과 같은 CDN에서 jQuery 포함
jQuery CDN
jQuery를 직접 다운로드하고 호스팅하지 않으려면 CDN(Content Delivery Network)에서 jQuery를 포함할 수 있다.

 

제이쿼리 플러그인
다양한 기능을 구현해놓은 제이쿼리 라이브러리 파일로 개발자들이 만들어 놓은 플러그인 무료파일을 다운받아 연동하면 다양한 기능을 쉽고 간단하게 구현 가능

대표적인 제이쿼리 플러그인
jqueryui.com/
http://www.jqueryrain.com
http://www.htmldrive.net
https://codepen.io

플러그인 사용방법
1)jQuery 기본plug-in 연결한다.
2)jQuery ui plug-in연결한다.
3)플러그인에서 제공하는 css link 연결

jQuery UI의 구성
Interaction : 드래그 드랍, 크기 조정 등 마우스를 사용한 대화 조작
Widgets : 아코디언 패널, 탭, 메뉴, 다이얼로그 등의 정형적인 UI 부품
Effects : jQuery효과를 확장

Widget에서 수정가능한 항목
제이쿼리 UI 위젯에서는 매개변수를 이용해 위치라던지, 효과 등을 사용자가 원하는 대로 수정 가능하다.
Options, proterty : 변경할 수 있는 데이터형의 Type을 확인하여 수정
methods : 활용할 수 있는 메소드가 무엇이 있는지 확인하여 사용가능
Events : 사용자가 사용할 수 있는 이벤트가 무엇이 있는지 확인하여 수정


JQuery Syntax
jQuery 구문은 HTML 요소를 선택하고 요소에 대해 일부 작업을 수행하기 위해 맞춤 제작되었다.
기본 구문은 $(선택자)이다.
-jQuery 정의/액세스를 위한 $ 기호
-A(선택기) HTML 요소 "조회(또는 찾기)"
-요소에서 수행할 jQuery 작업()

$(document).ready(function(){

  // jQuery methods go here...

});
*이는 문서 로드가 완료(준비)되기 전 jQuery 코드가 실행되는 것을 방지하기 위한것으로
작업하기 전에 문서가 완전히 로드되고 준비될 때까지 기다리는것이 좋다.

JQuery Selectors
 jQuery 선택기는  jQuery 라이브러리의 가장 중요한 부분 중 하나로
 jQuery 선택기를 사용하면 HTML 요소를 선택하고 조작할 수 있다.
 jQuery 선택기는 이름, ID, 클래스, 유형, 속성, 속성 값 등을 기반으로 HTML 요소를 "찾는"(또는 선택하는)데 사용 된다.
기존 CSS 선택기를 기반으로 하며 추가로 자체 사용자 지정 선택기가 있다.
 jQuery의 모든 선택기는 달러 기호와 괄호 $()로 시작한다.

JQuery Events
이벤트란 웹 페이지가 응답할 수 있는 모든 방문자의 행동을 이벤트라 한다.
이벤트는 어떤일이 발생하는 정확한 순간을 나타낸다.
예를 들면 
-요소 위로 마우스 이동
-라디오 버튼 선택
-요소 클릭
등

JQuery Hide and Show
hide()  show() 메소드를 사용하면 HTML 요소를 숨기거나 표시할 수 있다.
선택적 속도 매개변수는 숨기기/표시 속도를 지정하며 "slow","fast" 또는 밀리초 값을 사용할 수 있다.

jquery_fade
jQuery를 사용하면 요소를 fadeIn,out할 수 있다.
fadeIn() 메서드는 숨겨진 요소를 페이드 인하는데 사용된다.
fadeout() 메서드는 숨겨진 요소를 페이드 아웃하는데 사용된다.
fadeToggle()메서드는 fadeIn()fadeOut()간에 전환을 한다.
fadeTo()메서드를 사용하면 지정된 불투명도(0과 1 사이의 값)로 페이딩할 수 있다.
공통적으로 필요한 속도 매개변수로 효과의 지속 시간을 지정한다. "slow","fast" 밀리초 값을 사용

jquery_css
메서드 css()는 선택한 요소에 대해 하나 이상의 스타일 속성을 설정하거나 반환한다.

misc_index
index() 메서드는 지정된 다른 요소에 상대적인 지정된 요소의 인덱스 위치를 반환한다.
요소는 jQuery 선택기 또는 DOM 요소로 지정할 수 있다.
*:요소를 찾을 수 없으면 index()는 -1을 반환한다.

jQuery 기타 메서드
data() : 선택한 요소에 데이터를 연결하거나 요소에서 데이터를 가져온다.
each() : 일치하는 각 요소에 대해 함수 실행
get() : 선택기에서 일치하는 DOM 요소를 가져온다
index() : 일치하는 요소 중에서 지정된 요소 검색
$.noConflict() : $ 변수에 대한 jQuery의 제어 해제
$.param() : array 또는 개체의 직렬화된 표현 생성 (AJAX 요청의 URL 쿼리 문자열로 사용할 수 있음)
removeData() : 이전에 저장된 데이터를 제거한다.
size() : 번전 3.0에서 제거되었다. 대신 길이 속성 사용
toArray() : jQuery 세트에 포함된 모든 DOM 요소를 배열로 검색한다.

sel_eq
:eq() 선택자는 특정 인덱스 번호가 있는 요소를 선택한다.
색인 번호가 0부터 시작하므로 첫 번재 요소의 색인 번호는 0(1이 아님)이다.
이것은 주로 다른 선택기와 함께 사용되어 그룹에서 특별히 인덱싱된 요소를 선택한다.