제이쿼리
제이쿼리는 자바스크립트 라이브러리를 이용해 만든 언어입니다. 라이브러리는 자주 사용하는 코드를 재사용 및 효율성 있게 사용할 수 있도록 만들어진 함수의 집합을 의합니다.
제이쿼리는 HTML에 포함되어 있는 클라이언트 사이트 스크립트 언어를 단순화하도록 설계된 웹 브라우저 호환성을 가진 자바스크립트 라이브러리입니다.
제이쿼리의 장점
- 제이쿼리는 CSS를 쉽게 적용할 수 있습니다.
- 제이쿼리는 크로스브라우징을 지원합니다.
- 제이쿼리는 플러그인이 풍부합니다.
- 제이쿼리는 코드를 적게 효율적으로 작성할 수 있습니다.
- 제이쿼리는 좋은 확장성과 Ajax 기능을 구현합니다.
제이쿼리 사용방법
제이쿼리 라이브러리 파일은 jquery.com 사이트에서 다운받아 연동합니다.
제이쿼리 설정
라이브러리 파일 다운로드
기본 설정
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Sample01</title>
<!-- jquery 설정 -->
<script src="assets/js/jquery-1.12.4.min.js"></script>
<!-- jquery UI 설정 -->
<script src="assets/js/jquery-ui-1.12.1.min.js"></script>
<!-- 구글 CDN 설정 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>
</head>
<body>
제이쿼리 사용방법
제이쿼리를 쓰기 위한 준비 작업입니다.
jQuery(document).ready(function(){
//실행코드
});
jQuery를 $로도 사용할 수 있습니다.
$(document).ready(function(){
//실행코드
});
생략하여 사용 할 수 있습니다.
$(function(){
//실행코드
});
자바스크립트
window.onload = function(){
//실행코드
};
선택자
제이쿼리 선택자는 HTML 태그를 선택하여, 제이쿼리 기능을 쉽게 구현할 수 있습니다.
$("선택자").메서드(매개변수, 함수);
기본 선택자
종류 |
예시 |
설명 |
태그 선택자 |
$("p") |
기본 태그를 선택합니다. |
클래스 선택자 |
$(".class") |
클래스 태그를 선택합니다. |
아이디 선택자 |
$("#id") |
아이디 태그를 선택합니다. |
그룹 선택자 |
$("#id, p, .class") |
여러가지 태그를 선택합니다. |
전체 선택자 |
$("*") |
전체 태그를 선택합니다. |
계층 선택자
종류 |
예시 |
설명 |
자손 선택자 |
$("div p") |
자식(하위) 태그 모두 선택합니다. |
child 선택자 |
$("div > p") |
자식(하위) 태그만 선택합니다.(자손은 포함안됨) |
sibling 선택자 |
$("div + p") |
자식 태그 다음 형제 태그를 선택합니다. |
siblings 선택자 |
$("div ~ p") |
자식 태그 다음 모든 형제 태그를 선택합니다. |
속성 선택자
종류 |
예시 |
설명 |
[name="value"] |
$("li a[href='#page']") |
속성 중에 #page와 일치하는 속성을 선택합니다. |
[name^="value"] |
$("li a[href^='http']") |
속성 중에 http로 시작하는 속성을 선택합니다. |
[name$="value"] |
$("li a[href$='com']") |
속성 중에 com으로 끝나는 속성을 선택합니다. |
[name*="value"] |
$("li a[href*='web']") |
속성 중에 "web"이 포함되어 있는 속성을 선택합니다. |
[name!="value"] |
$("li a[href!='naver']") |
속성 중에 "naver"이 포함되어 있는 않는 속성을 선택합니다. |
[name="value"][name="value"] |
$("li a[href][class]") |
속성 중에 "href"와"class"속성이 있는 속성을 선택합니다. |
기본 필터 선택자
종류 |
설명 |
:animated |
show, hide, slideDown, SlidUp등의 애니메이션 태그를 선태가합니다. |
:eq(index) |
선택된 태그들의 인덱스 번호를 통해 선택합니다. |
:gt(index) |
선택된 집합에서 인덱스보다 큰 인덱스를 가지고 있는 태그를 선택합니다. |
:lt(index) |
선택된 집합에서 인덱스보다 작은 인덱스를 가지고 있는 태그를 선택합니다. |
:header |
제목 요소(h1~h6) 태그들을 선택합니다. |
:first |
선택된 요소 중에서 첫 번째 요소를 찾아 선택합니다. |
:last |
선택된 요소 중에서 마지막 번째 요소를 찾아 선택합니다. |
:odd |
선택된 요소 중에서 홀수 번째 요소를 찾아 선택합니다. |
:even |
선택된 요소 중에서 짝수 번째 요소를 찾아 선택합니다. |
:not() |
현재 선택한 요소의 반대 요소를 선택합니다. |
내용 필터 선택자
종류 |
설명 |
:contains() |
()안의 텍스토와 일치하는 문자열이 요소의 내용 중에 있을 때 선택합니다. |
:empty |
요소에 텍스트가 없을 때 선택합니다. |
:has() |
요소 내부에 찾고 싶은 태그를 후손 요소까지 살펴본 후 있으면 선택합니다. |
:parent |
empty와 반대 요소로 텍스트가 존재할 때 선택합니다. |
보임 필터 선택자
종류 |
설명 |
:hidden |
보이지 않는 요소를 선택합니다. |
:visible |
보이는 요소를 선택합니다. |
컨텐츠 영역을 보이지 않게 방법
display: none;
visibility: hidden;
opacity: 0;
width:0; height:0;
form 요소 중에 type="hidden"
// visibility: hidden이나 opacity:0;은 위치가 제거되지 않았기 때문에 :hidden 선택자에게 선택되지 않습니다.
자식요소 필터 선택자
종류 |
설명 |
:first-child |
첫 번째 자식 요소를 선택합니다. |
:last-child |
마지막 번째 자식 요소를 선택합니다. |
:nth-child(index) |
index 번째 자식 요소를 선택합니다. |
:nth-child(even) |
짝수 번째 자식 요소를 선택합니다. |
:nth-child(odd) |
홀수 번째 자식 요소를 선택합니다. |
:nth-child(2n) |
2배수 번째 자식 요소를 선택합니다. |
:only-child |
자식 요소가 오직 하나인 요소를 선택합니다. |
폼 필터 선택자
종류 |
설명 |
:input |
모든 입력 양식을 선택합니다. |
:file |
파일 업로드 양식을 선택합니다. |
:hidden |
숨겨진 입력 양식을 선택합니다. |
:image |
이미지 입력 양식을 선택합니다. |
:password |
암호 입력 양식을 선택합니다. |
:radio |
라디오 버튼 입력 양식을 선택합니다. |
:reset |
리셋 입력 양식을 선택합니다. |
:submit |
데이터 보내기 입력 양식을 선택합니다. |
:text |
텍스트 박스 양식을 선택합니다. |
탐색(Traversing)
제이쿼리의 선택자를 기준으로 선택한 요소 중 원하는 요소를 다시한번 더 선택할 수 있는 탐색과 관련된 제이쿼리 메서드입니다. 탐색은 크게 트리구조와 필터로 나눌 수 있습니다.
트리구조탐색(Tree Traversal)
종류 |
설명 |
.children() |
선택한 요소의 모든 자식 요소를 선택합니다.(자손 요소는 포함안됨) |
.find() |
선택한 요소의 자손 요쇼 중 조건에 맞는 요소를 선택합니다. |
.next() |
선택한 요소의 다음 형제 요소를 선택합니다. |
.nextAll() |
선택한 요소의 다음 모든 형제 요소를 선택합니다. |
.parent() |
선택한 요소의 부모 요소를 선택합니다. |
.parents() |
선택한 요소의 모든 부모 요소를 선택합니다. |
.prev() |
선택한 요소의 이전 형제 요소를 선택합니다. |
.prevAll() |
선택한 요소의 이전 모든 형제 요소를 선택합니다. |
.closest() |
선택한 요소를 포함하면서 가장 가까운 상위 요소를 선택합니다. |
.nextUntil() |
다음에 위치한 요소를 조건에 맞을 때까지 찾습니다. |
.parentUntil() |
조건이 참이 될 때까지 부모요소를 찾습니다. |
.prevUntil() |
이전에 위치한 요소를 조건에 맞을 때까지 찾습니다. |
.siblings() |
형제 요소를 모두 찾습니다. |
필터링(Filtering)
종류 |
설명 |
.eq() |
인덱스 번호에 해당하는 요소를 찾습니다. |
.filter() |
선택한 요소 집합에서 선택자를 추출하거나 함수를 사용해서 원하는 결과를 추출해냅니다. |
.first() |
선택한 요소 집합에서 첫번째 자식 요소를 선택합니다. |
.last() |
선택한 요소 집합에서 마지막번째 자식 요소를 선택합니다. |
.has() |
선택된 요소들이 자신의 자식요소에서 주어진 선택자가 있는지 확인하여 선택합니다. |
.map() |
대상이 되는 요소 집합에서 배열을 새롭게 변경합니다. |
.not() |
조건에 맞지 않는 것들만 찾아서 선택합니다. |
.slice() |
선택된 집합에서 조건의 범위를 재선택합니다. |
기타(Miscellaneous Traversing)
종류 |
설명 |
.add() |
문서 객체를 추가적을 선택합니다. |
.addBack() |
선택한 요소의 이전 선택된 요소를 추가 선택합니다. |
.contents() |
선택한 요소를 포함하여 자식 요소를 선택합니다. |
.each() |
여러개의 요소를 순차적으로 선택할 때 사용합니다. |
.end() |
문서 객체 선책을 한 단계 뒤로 돌립니다. |
변경(Manipulation)
Manipulation은 DOM 구조를 변경 할 수 있는 제이쿼리 메서드입니다.
종류 |
설명 |
.clone() |
선택한 요소를 복사합니다. |
.unwrap() |
선택한 요소의 부모 요소를 삭제합니다. |
.wrap() |
선택한 요소의 새로운 요소를 추가합니다. |
.wrapAll() |
선택한 요소의 새로운 요소를 한꺼번에 추가합니다. |
.wrapInner() |
선택한 요소의 새로운 요소를 각각 추가합니다. |
.append() |
선택한 요소 마지막 위치에 새로운 요소를 추가합니다. |
.appendTo(target) |
선택한 요소(타겟) 마지막 위치에 새로운 요소를 추가합니다. |
.prepend() |
선택한 요소 처음 위치에 새로운 요소를 추가합니다. |
.prependTo(target) |
선택한 요소(타겟) 처음 위치에 새로운 요소를 추가합니다. |
.after() |
선택한 요소 다음 위치에 새로운 요소를 추가합니다. |
.before() |
선택한 요소 이전 위치에 새로운 요소를 추가합니다. |
.insertAfter(target) |
선택한 요소(타겟) 다음 위치에 새로운 요소를 추가합니다. |
.insertBefore(target) |
선택한 요소(타겟) 이전 위치에 새로운 요소를 추가합니다. |
.empty() |
선택한 요소의 하위 내용을 삭제합니다. |
.remove() |
선택한 요소를 삭제합니다. |
.replaceAll() |
선택한 요소를 새로운 요소를 바꿉니다. |
.html() |
선택한 요소의 HTML을 읽고 쓸 수 있습니다. |
.text() |
선택한 요소의 텍스트를 읽고 쓸 수 있습니다. |
속성
문서 객체의 속성과 관련된 기능을 처리해주는 제이쿼리 메서드입니다.
Attributes
종류 |
설명 |
.attr() |
새로운 속성을 생성하거나 기존의 속성을 변경할 때 사용합니다. |
.prop() |
선택한 요소에 속성을 반환, 생성, 변환 할 때 사용합니다. |
.removeAttr() |
선택한 요소에서 기존의 속성을 삭제합니다. |
.removeProp() |
선택한 요소에서 기존의 속성을 삭제합니다. |
.val() |
입력 요소에 있는 속성 값을 불러오거나 변경 할 때 사용합니다. |
Demensions
위치와 크기를 읽고 설정하는 제이쿼리 메서드입니다.
종류 |
설명 |
.width() |
어떤 요소의 가로 크기를 반환하거나 변경합니다. |
.height() |
어떤 요소의 세로 크기를 반환하거나 변경합니다. |
.innerWidth() |
padding 값을 포함한 가로 크기를 반환하거나 변경합니다. |
.innerHeight() |
padding 값을 포함한 세로 크기를 반환하거나 변경합니다. |
.outerWidth() |
padding 값과 border 값을 포함한 가로 크기를 반환하거나 변경합니다. |
.outerHeight() |
padding 값과 border 값을 세로 크기를 반환하거나 변경합니다. |
Offset
종류 |
설명 |
.offset() |
웹 문서를 기준으로 위치 값을 읽어오며, left와 top의 속성을 x축 y축의 좌표를 알려줍니다. |
.position() |
기준점을 통해 선택한 요소의 위치값을 읽어오며, left와 top의 속성을 x축 y축의 좌표를 알려줍니다. |
.scrollLeft() |
브라우저 요소의 가로 스크롤 이동 값을 가져옵니다. |
.scrollTop() |
브라우저 요소의 세로 스크롤 이동 값을 가져옵니다. |
CSS
종류 |
설명 |
.css() |
css()요소 갑슬 알아낼 수도 있고, 설정도 할 수 있습니다. |
.addClass() |
특정한 클래스 요소를 추가할 수 있습니다. |
.hasClass() |
특정한 클래스가 있는지 찾을 수 있습니다 |
.removeClass() |
특정한 클래스를 요소에서 제거할 수 있습니다. |
.toggleClass() |
특정한 클래스의 추가 제거를 한번에 할 수 있습니다. |
효과
다양한 움직임과 효과를 줄 수 있는 제이쿼리 메서드입니다.
종류 |
설명 |
.hide() |
선택한 요소를 숨깁니다. |
.show() |
선택한 요소를 보여줍니다. |
.toggle() |
숨겨져 있던 요소를 노출시키고, 노출되어 있던 요소는 숨깁니다. |
.fadeIn() |
opacity를 0에서 1로 전환하면서 서서히 나타나게 처리합니다. |
.fadeOut() |
opacity를 1에서 0로 전환하면서 서서히 사라지게 처리합니다. |
.fadeToggle() |
fadeIn()과 fadeOut()을 번갈아 가면서 실행합니다. |
.fadeTo() |
불투명도를 지정하여 fade를 조절합니다. |
.slideDown() |
슬라이딩 스타일로 요소를 보이게 합니다. |
.slideUp() |
슬라이딩 스타일로 요소를 숨기게 합니다. |
.slideToggle() |
slideDown()과 slideUp()을 번갈아 가면서 실행합니다. |
// duration: 이펙트가 지속되는 시간을 의미합니다. 1/1000밀리세컨드 단위이며, 'slow','normal','fast'표현합니다.
// easing : 이펙트 스피드를 조절하는 효과입니다.
// callback : 콜백함수는 스스로 호출되는 함수의 의미로 애미메이션 효과가 완료되면 자동으로 호출되는 함수를 말합니다.
$(selector).method();
$(selector).method(duration);
$(selector).method(duration, callback);
$(selector).method(duration, eading, callback);
Animate
종류 |
설명 |
.animate() |
선택한 요소에 애니메이션을 적용합니다. |
.stop() |
실행중인 애니메이션을 정지합니다. |
.delay() |
애니메이션 효과를 지연합니다. |
.queue() |
선택한 요소 스택에 대기 중인 큐를 반환하거나 추가할 수 있습니다. |
.clearQueue() |
첫 번째 큐에 해당하는 효과 또는 애니메이션만 실행하고 대기 중인 큐를 모두 삭제합니다. |
.dequeue() |
스택에 쌓인 큐를 모두 제거합니다. |
.finish() |
선택한 요소의 진해중인 애니메이션을 강제로 종료합니다. |
// properties에 올수 있는 값
// border, margin, padding, height, width, font-size, left, top, bottom, right, line-height
// properties에 올수 없는 값
// background-color, 축약형
$(selector).animate(properties);
$(selector).animate(properties,duration);
$(selector).animate(properties,duration,easing);
$(selector).animate(properties,duration,easing,collback);
//폰트 사이즈를 현제 크기에서 20px로 2초동안 애니메이션 한다.
$("selector").animate({fontSize:"20px"},2000);
$("selector").animate({"fontSize":"20px"},2000);
//선택한 요소의 왼쪽 마진 값을 100px로 600밀리세컨드 동안 애니메이션 합니다.
$("selector").animate({marginLeft:100,marginRight:100},600);
$("selector").animate({"marginLeft":"100","marginRight":"100"},"slow");
이벤트
브라우저에서 사용자가 취하는 모든 동작을 이벤트라고 합니다. 마우스로 클릭을 하거나 마우스를 올리는 행위가 이벤트에 해당되며, 이벤트 발생했을 때 자바스크립트 실행문을 실행하는 것을 이벤트 핸들러라고 합니다
종류 |
설명 |
.bind() |
선택한 요소에 한개 이상의 이벤트를 등록할 수 있습니다. |
.unbind() |
선택한 요소에 이벤트를 제거합니다. |
.delegate() |
선택한 요소의 지정된 하위 요소에 이벤트를 등록합니다. |
.undelegate() |
선택한 요소의 지정된 하위 요소에 이벤트를 제거합니다. |
.on() |
선택한 요소의 이벤트를 설정합니다. |
.off() |
선택한 요소의 이벤트를 제거합니다. |
.triggle() |
선택한 요소의 이벤트를 수동으로 발생시킵니다. |
jQuery 1.9버전 이전에는 bind(),delegate(),live() 이벤트가 있었지만 1.9버전 이후에는 on()으로 통일되었습니다.
마우스 이벤트
종류 |
설명 |
.click() |
선택한 요소를 클릭했을 때 이벤트가 발생합니다. |
.dbclick() |
선택한 요소를 더블 클릭했을 때 이벤트가 발생합니다. |
.hover() |
선택한 요소에 마우스를 올렸을 때(mouseenter)와 벗어 났을 때 (mouseleave) 각각 이벤트가 발생합니다. |
.mousedown() |
선택한 요소에서 마우스 버튼을 눌렀을 때 이벤트가 발생합니다. |
.mouseout() |
선택한 요소에서 마우스가 벗어 났을 때 이벤트가 발생합니다. |
.mouseover() |
선택한 요소에서 마우스를 올렸을 때 이벤트가 발생합니다. |
.mouseup() |
선택한 요소에서 마우스를 눌렀다가 떼었을 때 이벤트가 발생합니다. |
.mouseenter() |
선택한 요소 범위 내에서 마우스를 올렸을 때 이벤트가 발생합니다. |
.mouseleave() |
선택한 요소 범위 내에서 마우스가 벗어 났을 때 이벤트가 발생합니다. |
.mousemove() |
선택한 요소 범위 내에서 마우스를 움직였을 때 이벤트가 발생합니다. |
// 마우스 오버 아웃 이벤트
$(".class").hover(function(){
console.log("마우스 오버");
}, function(){
console.log("마우스 아웃");
});
입력 양식 이벤트
메서드 |
설명 |
.blur() |
요소에서 포커스가 떠날 때 이벤트가 발생합니다. |
.change() |
요소에서 값이 변경될 때 이벤트가 발생합니다. |
.focus() |
요소에 포커스를 획득했을 때 이벤트가 발생합니다. |
.focusin() |
선택한 요소에 포커스가 맞추어지기 바로 전에 발생합니다. |
.focusout() |
선택한 요소에서 포커스가 사라지기 바로 전에 발생합니다. |
.select() |
입력 양식 텍스트를 선택했을 때 이벤트가 발생합니다. |
.submit() |
submit 버튼을 누르면 이벤트가 발생합니다. |
.reset() |
reset 버튼을 누르면 이벤트가 발생합니다. |
키보드 이벤트
메서드 |
설명 |
.keydown() |
선택한 요소에서 키보드를 눌렀을 때 이벤트가 발생합니다. |
.keypress() |
선택한 요소에서 키보드를 계속 누르고 있을 때 이벤트가 발생합니다. |
.keyup() |
선택한 요소에서 키보드를 눌렀다가 떼었을 때 이벤트가 발생합니다. |
웹브라우저 이벤트
메서드 |
설명 |
.resize() |
웹 브라우저 사이즈의 변화가 있을 때 이벤트가 발생합니다. |
.scroll() |
웹 브라우저 스크롤의 변화가 있을 때 이벤트가 발생합니다. |
.ready() |
웹 페이지가 로딩 되었을 때 이벤트가 발생합니다. |
.load() |
문서를 불러 들일 때 이벤트가 발생합니다. |
.unload() |
해당 페이지를 빠져 나갈 때 이벤트가 발생합니다. |
.error() |
해당 페이지가 에러 났을 때 이벤트가 발생합니다. |
.index() |
이벤트가 발생한 요소의 인덱스 값을 반환합니다. |
웹브라우저 객체
메서드 |
설명 |
.altKey |
이벤트 발생시 [Alt] 키를 누르고 있었는지 boolean으로 알려줍니다. |
.ctrlKey |
이벤트 발생시 [Ctrl] 키를 누르고 있었는지 boolean으로 알려줍니다. |
.shiftKey |
이벤트 발생시 [Shift] 키를 누르고 있었는지 boolean으로 알려줍니다. |
.clintX |
document에서 스크롤 이동값을 제외하고 마우스의 x좌표 값을 알려줍니다. |
.clintY |
document에서 스크롤 이동값을 제외하고 마우스의 y좌표 값을 알려줍니다. |
.data |
이벤트 생성시 매개변수 두 번째에 값을 넘겨주면, event의 프로퍼티를 통해서 전달됩니다. |
.keyCode |
이벤트 발생시 키보드의 키를 누르면 키의 고유값을 알려줍니다. |
.offsetX |
이벤트 발생시 이벤트의 대상으로 부터 마우스의 X좌표를 알려줍니다. |
.offsetY |
이벤트 발생시 이벤트의 대상으로 부터 마우스의 Y좌표를 알려줍니다. |
.pageX |
document에서 스크롤 이동값을 포함한 마우스의 X좌표를 알려줍니다. |
.pageY |
document에서 스크롤 이동값을 포함한 마우스의 Y좌표를 알려줍니다. |
.screenX |
모니터 화면을 기준으로 마우스의 X좌표 값을 알려줍니다. |
.screenY |
모니터 화면을 기준으로 마우스의 Y좌표 값을 알려줍니다. |
.target |
이벤트가 발생한 요소를 알려줍니다. |
.type |
발생한 이벤트의 타입명을 알려줍니다. |
Ajax
//$(document).ready(function(){
$(function(){
$('#jqTest').click(function(){
// JQuery Ajax
// => 속성의 형태로 필요한 설정 지정
// => 설정 : method(Type:Get/Post), url, data(parameter) , result
$.ajax({
type:'Get', // 'Post'
url:'ax03_parameterResult.jsp',
data: {
id:$('#id').val(),
password:$('#password').val(),
name:$('#name').val()
},
success:function(result){
$('#resultArea').html(result);
},
error:function(){
$('#resultArea').html("~~ 오류발생 ~~");
}
}); //ajax
}); // click
}); // ready
/* 1. 기본형식
* $.ajax({옵션속성:값});
* 2. 옵션속성
* url:문자열 - 요청url 설정
=> type:문자열 - GET/POST설정
data:객체,문자열 - 요청 매개변수 설정
dataType: return Data Type - xml, html, json, jsonp, text, script
success:함수
=> 성공시 호출할 함수 설정
=> 매개변수가 응답 결과를 받아줌
error:함수 - 실패시 호출할 함수 설정
async:불리언 - 동기/비동기 설정 (True/False)
beforeSend:HTTP 요청전에 발생하는 이벤트 핸들러
*/