JJGODCOM

제이쿼리

제이쿼리는 자바스크립트 라이브러리를 이용해 만든 언어입니다. 라이브러리는 자주 사용하는 코드를 재사용 및 효율성 있게 사용할 수 있도록 만들어진 함수의 집합을 의합니다.

제이쿼리는 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 요청전에 발생하는 이벤트 핸들러
    */