티스토리 뷰

jQuery

[jQuery] Basic

제이쿼리 기초

제이쿼리를 사용하기 위한 기본 사용방법입니다.


제이쿼리 사용방법

제이쿼리를 사용하기 위해서는 자바스크립트 라이브러리 파일이 필요합니다. jQuery 라이브러리는 jQuery 공식사이트에서 다운 받을 수 있습니다. jQuery는 1.x, 2.x, 3.x 버전이 있습니다. 1.x 버젼은 IE6, IE7, IE8 버젼을 지원합니다.

제이쿼리 다운로드

제이쿼리를 사용하기 위해서는 제이쿼리 파일을 다운 받아야 합니다. 다운 받기

Script
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>jquery</title>
    <script type="text/javascript" src="assets/js/jquery-1.10.2.min.js"></script>
    <script>
        //제이쿼리 소스
    </script> 
</head>
<body>
    
</body>
</html>

CDN 사용하기

CDN(Content Distribution Network)는 전 세계적으로 분산되어 있는 서버 네트워크를 사용하는 시스템입니다. 콘텐츠를 효율적으로 사용하기 위한 네트워크 시스템을 의미합니다. 다음은 구글에서 제공하는 CDN입니다.

Script
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>jQuery</title>
</head>
<body>
    <!-- 3.x -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

    <!-- 2.x -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

    <!-- 1.x -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

    <!-- jQuery UI 1.x -->
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>  
</body>
</html>

제이쿼리 준비

제이쿼리를 사용하기 위해서 다음과 같이 준비합니다.

jQuery(document).ready(function(){
     //실행코드
});

$(document).ready(function(){
     //실행코드
});

jQuery를 $로 치환하여 사용할 수 있습니다.

$(function(){
     //실행코드
});

간단한 형태로도 단축해서 사용할 수 있습니다.

자바스크립트 사용방법

window.onload = function(){      //실행코드
};

Script
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>jquery</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            //실행할 코드
        });
    </script> 
</head>
<body>
    
</body>
</html>

제이쿼리 메서드

기본 선택자
종류 예시 설명
기본 선택자 태그 선택자 기본 태그를 선택합니다.
클래스 선택자 클래스 태그를 선택합니다.
아이디 선택자 아이디 태그를 선택합니다.
그룹 선택자 여러가지 태그를 선택합니다.
전체(*) 선택자 전체 태그를 선택합니다.
계층 선택자 자손 선택자 자식(하위) 태그 모두 선택합니다.
child(>) 선택자 자식(하위) 태그만 선택합니다.(자손은 포함안됨)
sibling(+) 선택자 자식 태그 다음 형제 태그를 선택합니다.
siblings(~) 선택자 자식 태그 다음 모든 형제태그를 선택합니다.
속성 선택자 [name="value"] 속성 중에 '#page'와 일치하는 태그를 선택합니다.
[name^="value"] 속성 중에 'http'로 시작하는 태그를 선택합니다.
[name$="value"] 속성 중에 '.com'로 끝나는 태그를 선택합니다.
[name~="value"] 속성 중에 '.com'이 포함되는 바로 옆 형제 태그를 선택합니다.
[name*="value"] 속성 중에 'web'가 포함되어 있는 태그를 선택합니다.
[name|="value"] 속성 중에 'web'으로 시작하는 속성의 태그를 선택합니다.
[name!="value"] 속성 중에 'naver.com'와 일치하지 않는 태그를 선택합니다.
[name="value"][name="value"] 속성 중에 'href' 속성과 'class' 속성이 모두 있는 태그를 선택합니다.
기본 필터 선택자 :animated show, hide, slideDown, slideUp등의 애니메이션 태그를 선택합니다.
:eq(index) 선택된 태그들의 인덱스 번호를 통해 선택합니다.
:gt(index) 선택된 집합에서 인덱스보다 큰 인덱스를 가지고 있는 태그들을 선택합니다.
:lt(index) 선택된 집합에서 인덱스보다 작은 인덱스를 가지고 있는 태그들을 선택합니다.
:header 제목 요소(h1~h6) 태그들을 선택합니다.
:first 선택된 요소 중에서 첫 번째 요소를 찾아 선택합니다.
:last 선택된 요소 중에서 마지막 번째 요소를 찾아 선택합니다.
:odd 선택된 요소 중에서 홀수 번째 요소를 찾아 선택합니다.
:even 선택된 요소 중에서 짝수 번째 요소를 찾아 선택합니다.
:not() 현재 선택한 요소의 반대 요소를 선택합니다.
:root() 문서의 가장 기본 루트 태그를 선택합니다.
:lang() 선택된 요소 중에서 언어 속성을 선택합니다.
내용 필터 선택자 :contains() ()안의 텍스트와 일치하는 문자열이 요소의 내용 중에 있을 때 그 요소를 반환합니다.
:empty 요소에 텍스트 없을 때 선택됩니다.
:has() 요소 내부에서 찾고 싶은 태그를 후손 요소까지 살펴본 후 요소가 있으면 반환합니다.
:parent empty와 반대로 요소에 텍스트가 존재할 때에 선택됩니다.
보임 필터 선택자 :hidden 보이지 않는 요소를 선택합니다.
:visible 보이는 요소를 선택합니다.
자식 요소 필터 선택자 :first-child 첫 번째 자식 요소를 선택합니다.
:last-child 마지막 번째 자식 요소를 선택합니다.
:first-of-type 자식 중 첫 번째 유형의 자식 요소를 선택합니다.
:last-of-type 자식 중 마지막 번째 유형의 자식 요소를 선택합니다.
:nth-child() index번째에 있는 자식 요소를 선택합니다.
:nth-last-child() index번째에 있는 마지막 자식 요소를 선택합니다.
:nth-last-of-type() index번째에 있는 마지막 유형의 자식 요소를 선택합니다.
:nth-of-type() index번째에 있는 유형의 자식 요소를 선택합니다.
:only-child 자식 요소가 오직 하나인 요소를 선택합니다.
:only-of-type() 자식 요소 중 오직 하나 유형인 요소를 선택합니다.
폼 선택자 :button 버튼 입력 양식을 선택합니다.
:checkbox 체크박스 입력 양식을 선택합니다.
:checked :checked된 입력 양식을 선택합니다.
:disabled :disabled된 입력 양식을 선택합니다.
:enabled :enabled된 입력 양식을 선택합니다.
:focus 입력 양식에 포커스된 태그를 선택합니다.
:file 파일 업로드 양식을 선택합니다.
:image 이미지 입력 양식을 선택합니다.
:input 모든 입력 양식을 선택합니다.
:password 암호 입력 양식을 선택합니다.
:radio 라디오 버튼 입력 양식을 선택합니다.
:reset 리셋 입력 양식을 선택합니다.
:selected :selected된 입력 양식을 선택합니다.
:submit 데이터 보내기 입력 양식을 선택합니다.
:text 텍스트 박스 양식을 선택합니다.

탐색(Traversing)

유형 메서드 설명
트리구조 탐색(Tree Traversal) .children() 선택한 요소의 바로 아래 자식 요소만 선택합니다.
.closest() 선택한 요소를 포함하면서 가장 가까운 상위 요소를 선택합니다.
.find() 선택한 요소의 자식 요소 중 조건에 맞는 요소를 선택합니다.
.next() 선택한 요소의 다음 요소를 선택합니다.
.nextAll() 선택한 요소의 다음 모든 요소를 선택합니다.
.nextUntil() 선택한 요소의 다음 요소 중 조건에 맞을 때까지 찾습니다.
.parent() 선택한 요소의 부모 요소를 선택합니다.
.parents() 선택한 요소의 모든 부모 요소를 선택합니다.
.parentsUntil() 선택한 요소의 부모 요소 중 조건에 맞을 때까지 찾습니다.
.prev() 선택한 요소의 이전 요소를 선택합니다.
.prevAll() 선택한 요소의 이전 모든 요소를 선택합니다.
.prevUntil() 선택한 요소의 이전 요소 중 조건에 맞을 때까지 찾습니다.
.siblings() 선택한 요소의 형제 요소를 모두 찾습니다.
필터링(Filtering) .eq() 선택한 요소에 인덱스 번호에 해당하는 요소를 찾습니다.
.filter() 선택된 요소에서 선택하거나 함수를 사용할 수 있습니다.
.first() 선택된 요소에서 첫번째 자식 요소를 찾습니다.
.has() 선택된 요소의 자식 요소에서 주어진 선택자를 찾습니다.
.is() 선택된 요소 객체의 특징을 판별합니다.
.last() 선택된 요소에서 마지막번째 자식 요소를 찾습니다.
.map() 선택된 요소의 배열 집합을 새롭게 변경합니다.
.not() 선택된 요소에서 조건에 맞지 않는 것을 선택합니다.
.slice() 선택된 요소에서 조건의 범위로 재선택합니다.
기타(Miscellaneous Traversing) .add() 선택한 요소에 새로운 요소를 추가합니다.
.addBack() 선택한 요소의 상위 요소도 같이 선택합니다.
.contents() 선택한 요소와 일치하는 콘텐츠 요소를 선택합니다.
.each() 선택한 여러 요소들을 각각 순차적으로 실행합니다.
.end() 선택한 요소의 필터링이 일어나기 이전의 요소를 선택합니다.

속성(Attributes)

유형 메서드 설명
속성(Attributes) .attr() 선택한 HTML 요소의 속성 값을 설정하거나 반환합니다.
.prop() 선택한 JavaScript 요소의 속성 값을 설정하거나 반환합니다.
.removeAttr() 선택한 HTML 요소에서 하나 이상의 속성을 제거합니다.
.removeProp() 선택한 JavaScript 요소에서 하나 이상의 속성을 제거합니다.
.val() 선택한 폼 요소의 속성 값을 설정하거나 반환합니다.
스타일(CSS) .addClass() 선택한 요소에 클래스를 추가합니다.
.css() 선택한 요소에 CSS 속성 값을 설정하거나 변경합니다.
.hasClass() 선택한 요소에 클래스가 있는지를 찾습니다.
.removeClass() 선택한 요소에 클래스를 삭제합니다.
.toggleClass() 선택한 요소에 클래스의 추가/제거를 연속하여 사용 할 수 있습니다.
디멘션(Dimensions) .height() 선택한 요소의 높이(패딩/마진/보더 불포함)를 설정하거나 반환합니다.
.innerHeight() 선택한 요소의 높이(패딩 포함, 보더/마진 불포함)를 설정하거나 반환합니다.
.innerWidth() 선택한 요소의 가로(패딩 포함, 보더/마진 불포함)를 설정하거나 반환합니다.
.outerHeight() 선택한 요소의 높이(패딩/보더 포함, 마진 불포함)를 설정하거나 반환합니다.
.outerWidth() 선택한 요소의 가로(패딩/보더 포함, 마진 불포함)를 설정하거나 반환합니다.
.width() 선택한 요소의 가로(패딩/마진/보더 불포함)를 설정하거나 반환합니다.
오프셋(offset) .offset() 선택한 요소의 위치 좌표 값(문서 기준)을 설정하거나 반환합니다.
.offsetParent() 선택한 요소의 부모 위치 좌표 값(문서 기준)을 설정하거나 반환합니다.
.position() 선택한 요소의 위치 좌표 값(기준점 기준)을 설정하거나 반환합니다.
.scrollLeft() 선택한 요소의 가로 스크롤 값을 설정하거나 반환합니다.
.scrollTop() 선택한 요소의 세로 스크롤 값을 설정하거나 반환합니다.

변경(Manipulation)

유형 메서드 설명
Copying .clone() 선택한 요소 본사본을 만듭니다
DOM Insertion, Around .wrap() 선택한 요소에 새로운 태그를 추가합니다.
.wrapAll() 선택한 요소에 새로운 태그를 추가합니다.
.wrapInner() 선택한 각각의 요소에 각각 새로운 태그를 추가합니다.
DOM Insertion, Around .append() 선택한 요소 마지막 위치에 새로운 요소를 추가합니다.
.appendTo() 선택한 타겟 마지막 위치에 새로운 요소를 추가합니다.
.html() 선택한 요소 내부의 HTML을 읽거나 변경합니다.
.prepend() 선택한 요소 처음 위치에 새로운 요소를 추가합니다..
.prependTo() 선택한 타겟 처음 위치에 새로운 요소를 추가합니다.
.text() 선택한 요소 내부의 텍스트를 읽거나 변경합니다.
DOM Insertion, Outside .after() 선택한 요소 다음에 새로운 요소를 추가합니다.
.before() 선택한 요소 이전에 새로운 요소를 추가합니다.
.insertAfter() 선택한 타겟 요소 다음에 새로운 요소를 추가합니다.
.insertBefore() 선택한 타겟 요소 이전에 새로운 요소를 추가합니다.
DOM Removal .detach() 선택한 요소(데이터 및 이벤트 불포함)를 제거합니다.
.empty() 선택한 요소의 하위 요소를 제거합니다.
.remove() 선택한 요소(데이터 및 이벤트 포함)를 제거합니다.
.unwrap() 선택한 요소의 부모요소를 제거합니다.
DOM Replacement .replaceAll() 선택한 요소를 새로운 요소로 바꿉니다.
.replaceWith() 선택한 요소를 새로운 컨텐츠로 바꿉니다.

효과(Effect)

유형 메서드 설명
Basic .hide() 선택한 요소를 숨김니다.
.show() 선택한 요소를 보여줍니다.
.toggle() 선택한 요소를 숨김/노출합니다.
Basic .fadeIn() 선택한 요소를 천천히 보여줍니다.
.fadeOut() 선택한 요소를 천천히 숨김니다.
.fadeTo() 선택한 요소의 투명도를 조절합니다.
.fadeToggle() 선택한 요소를 숨김/노출을 천천히 합니다.
Fading .fadeIn() 선택한 요소를 천천히 보여줍니다.
.fadeOut() 선택한 요소를 천천히 숨김니다.
.fadeTo() 선택한 요소의 투명도를 조절합니다.
.fadeToggle() 선택한 요소를 숨김/노출을 천천히 합니다.
Sliding .slideDown() 선택한 요소를 슬라이딩으로 보여줍니다.
.slideToggle() 선택한 요소를 슬라이딩으로 숨김/노출합니다.
.slideUp() 선택한 요소를 슬라이딩으로 숨깁니다.
Custom .animate() 선택한 요소에 애니메이션을 적용합니다.
.clearQueue() 선택한 요소에 첫 번째 큐만 실행하고 나머지 대기 중인 큐는 모두 삭제합니다.
.delay() 선택한 요소의 애니메이션를 효과를 지연합니다.
.dequeue() 선택한 요소 스택에 쌓인 큐를 모두 제거합니다.
.finish() 선택한 요소의 진행중인 애니메이션을 강제로 종료합니다.
.queue() 선택한 요소 스택에 대기 중인 큐를 반환하거나 추가할 수 있습니다.
.stop() 선택한 요소의 실행중인 애니메이션을 정지합니다.

이벤트(Event)

유형 메서드 설명
Browser Events .resize() 웹 브라우저 사이즈의 변화가 있을 때 이벤트가 발생합니다.
.scroll() 웹 브라우저 스크롤의 변화가 있을 때 이벤트가 발생합니다.
.ready() 웹 페이지가 로딩 되었을 때 이벤트가 발생합니다.
Browser Events .bind() 선택한 요소에 한 개 이상의 이벤트를 등록합니다.
.delegate() 선택한 요소 하위 요소에 이벤트를 등록합니다.
.off() 선택한 요소의 이벤트를 제거합니다.
.on() 선택한 요소의 이벤트를 설정합니다.
.one() 선택한 요소의 이벤트 처리를 한번만 설정합니다.
.trigger() 선택한 요소의 이벤트를 수동으로 발생시킵니다.
.triggerHandler() 선택한 요소의 이벤트를 수동으로 발생시킵니다.
.unbind() 선택한 요소의 이벤트를 제거합니다.
.undelegate() 선택한 요소 하위 요소에 이벤트를 제거합니다.
Browser Events .bind() 선택한 요소에 한 개 이상의 이벤트를 등록합니다.
.delegate() 선택한 요소 하위 요소에 이벤트를 등록합니다.
.off() 선택한 요소의 이벤트를 제거합니다.
.on() 선택한 요소의 이벤트를 설정합니다.
.one() 선택한 요소의 이벤트 처리를 한번만 설정합니다.
.trigger() 선택한 요소의 이벤트를 수동으로 발생시킵니다.
.triggerHandler() 선택한 요소의 이벤트를 수동으로 발생시킵니다.
.unbind() 선택한 요소의 이벤트를 제거합니다.
.undelegate() 선택한 요소 하위 요소에 이벤트를 제거합니다.
Form Events .blur() 선택한 요소에 포커스가 떠날 때 이벤트가 발생합니다.
.change() 선택한 요소에서 값이 변경될 때 이벤트가 발생합니다.
.focus() 선택한 요소에 포커스를 획득했을 때 이벤트가 발생합니다.
.focusin() 선택한 요소에 포커스가 마주어지기 바로 전에 발생합니다.
.focusout() 선택한 요소에 포커스가 사라지기 바로 전에 발생합니다.
.select() 선택한 요소 입력 양식의 텍스트를 선택했을 때 이벤트가 발생합니다.
.submit() 선택한 요소의 submit 버튼을 누르면 이벤트가 발생합니다.
Keyboard Events .keydown() 선택한 요소에서 키보드를 눌렀을 때 이벤트가 발생합니다.
.keypress() 선택한 요소에서 키보드를 계속 누르고 있을 때 이벤트가 발생합니다.
.keyup() 선택한 요소에서 키보드를 눌렀다가 떼었을 때 이벤트가 발생합니다.
Mouse Events .click() 선택한 요소를 클릭했을 때 이벤트가 발생합니다.
.contextMenu() 선택한 요소에서 마우스 오른쪽 버튼을 클릭하면 이벤트가 발생합니다.
.dblclick() 선택한 요소에서 선택한 요소를 더블 클릭했을 때 이벤트가 발생합니다.
.hover() 선택한 요소에서 마우스를 올렸을 때와 벗어 났을 때 각각 이벤트가 발생합니다.
.mousedown() 선택한 요소에서 마우스 버튼을 놀렀을 때 이벤트가 발생합니다.
.mouseenter() 선택한 요소 범위 내에서 마우스를 올렸을 때 이벤트가 발생합니다.
.mouseleave() 선택한 요소 범위 내에서 마우스가 벗어 났을 때 이벤트가 발생합니다.
.mousemove() 선택한 요소 범위 내에서 마우스를 움직였을 때 이벤트가 발생합니다.
.mouseout() 선택한 요소에서 마우스가 벗어 났을 때 이벤트가 발생합니다.
.mouseover() 선택한 요소에서 마우스를 올렸을 때 이벤트가 발생합니다.
.mouseup() 선택한 요소에서 마우스를 눌렀다가 떼었을 때 이벤트가 발생합니다.

공유하기(Share) 더보기

  • 네이버 블러그 공유하기
  • 페이스북 공유하기
  • 트위터 공유하기
  • 트위터 공유하기
  • 트위터 공유하기

공감하기(Like) 더보기

UP NEXT : Ads by Google

질문하기(Questions)
댓글쓰기 폼