제이쿼리

자바 스크립트 라이브러리를 이용해 만든 언어입니다. 제이쿼리는 HTML에 포함돼 있는 클라이언트 사이드 스크립트 언어를 단순화하도록 설계된 웹 브라우저 호환성을 가진 자바스크립트 라이브러리입니다.

제이쿼리 다운로드

제이쿼리를 사용하기 전에 제이쿼리 라이브러리를 다운로드 받아야 함!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Jquery</title>
    <script src="../jquery/assets/js/jquery.min_1.12.4.js">

    </script>
</head>
<body>
    
</body>
</html>

제이쿼리 준비

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

jQuery(document).ready(function(){
     //실행 코드
});
//jQuery를 $치환
$(document).ready(function(){
     //실행 코드
});
//약식
$(function(){
     //실행 코드
});

자바스크립트 사용방법

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

선택자

기본 선택자

종류 예시 설명
태그 선택자 $("div") 기본 태그를 선택합니다.
클래스 선택자 $(".div") 클래스 태그를 선택합니다.
아이디 선택자 $("#div") 아이디 태그를 선택합니다.
그룹 선택자 $("#div, .div") 여러가지 태그를 선택합니다.
전체 선택자 $("*") 전체 태그를 선택합니다.

계층 선택자

종류 예시 설명
하위 선택자 $("div p") div 태그의 모든 자식 중 p 태그를 모두 선택합니다.
자식 선택자 $("div > p") div 태그의 모든 자식 중 첫 번재 자식 p 태그를 선택합니다.
형제 선택자 $("div + p") div 태그의 인접한 형태 p 태그 중 첫번째 태그만 선택합니다.
형제들 선택자 $("div ~ p") div 태그의 인접한 형태 p 태그를 모두 선택합니다.

속성 선택자

종류 예시 설명
[name|="value"] $("li a[href |= 'web']") a 태그 속성 중에 'web'과 같은 속성 값을 선택합니다.
[name*="value"] $("li a[href *= 'web']") a 태그 속성 중에 'web'이 포함되어 있는 태그를 선택합니다.
[name~="value"] $("li a[href ~= 'web']") a 태그 속성 중에 'web'으로 시작되는 태그를 선택합니다.
[name~="value"] $("li a[href $= 'web']") a 태그 속성 중에 'web'으로 끝나는 태그를 선택합니다.
[name~="value"] $("li a[href != 'web']") a 태그 속성 중에 'web'이 포함되지 태그를 선택합니다.
[name~="value"] $("li a[href ^= 'web']") a 태그 속성 중에 'web'으로 시작하는 태그를 선택합니다.
[name] $("li a[href]") a 태그 속성 중에 일치하는 태그를 선택합니다.
[name="value"][name="value"] $("li a[href][class]") a 태그 속성 중에 일치하는 태그를 선택합니다.

기본 필터 선택자

종류 설명
:animated 선택된 집합에서 show, hide, slideDown 등의 애니메이션 태그를 선택합니다.
:eq(index) 선택된 태그들의 인덱스 번호를 통해 선택합니다.
:lt(index) 선택된 태그들의 인덱스 보다 작은 인덱스를 가지고 있는 태그들을 선택합니다.
:gt(index) 선택된 태그들의 인덱스 보다 큰 인덱스를 가지고 있는 태그들을 선택합니다.
:header 선택된 집합에서 제목 요소들을 선택합니다.
:first 선택된 집합에서 첫번째 요소를 선택합니다.
:last 선택된 집합에서 첫번째 요소를 선택합니다.
:odd 선택된 집합에서 홀수 요소를 선택합니다.
:even 선택된 집합에서 짝수 요소를 선택합니다.
:not() 선택된 집합에서 현재 선택한 반대 요소를 선택합니다.

내용 필터 선택자

종류 설명
:contains() 선택된 집합에서 일치하는 문자열 요소를 선택합니다.
:empty() 선택된 집합에서 텍스트가 없는 요소를 선택합니다.
:has() 선택된 집합의 일치하는 요소를 선택합니다.
:parent() 선택된 집합에서 텍스트가 있는 요소를 선택합니다.

보임 필터 선택자

컨텐츠 요소를 보이지 않게 하는 방법
  • display: none
  • visibility: hidden
  • opactiy: 0
  • width:0; height:0
  • form 요소 중에 type="hidden"
  • 부모 요소가 보이지 않거나 숨겨져 있을 때
종류 설명
:hidden() 보이지 않는 요소를 선택합니다.
:visible() 보이는 요소를 선택합니다.

자식요소 필터 선택자

종류 설명
:first-child() 첫 번째 자식 요소를 선택합니다.
:first-of-type 자식 중 첫 번째 유형의 자식 요소를 선택합니다.
:last-child() 첫 번째 자식 요소를 선택합니다.
:last-of-type 자식 중 첫 번째 유형의 자식 요소를 선택합니다.
:nth-child(index) index 번째 자식 요소를 선택합니다.
:nth-last-child(index) index 번째 마지막 자식 요소를 선택합니다.
:nth-last-of-type(index) index 번째 마지막 유형의 자식 요소를 선택합니다.
:nth-of-type(index) 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 텍스트 박스 양식을 선택합니다. 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JQuery</title>
</head>
<body>
    <h1>제이쿼리</h1>
    <!-- #sample>#list$.list>one$> -->
    <div id="sample">
        <div id="list1" class="list">
            <li class="one1"><a href="#list2">one1</a></li>
            <li class="one2"><a href="https://www.naver.com">one2</a></li>
            <li class="one3"><a href="https://www.daum.net" target="">one3</a></li>
            <li class="one4"><a href="#">one4</a></li>
            <li class="one5"><a href="#">one5</a></li>
            <li class="one6"><a href="#">one6</a></li>
            <li class="one7"><a href="#">one7</a></li>
            <li class="one8"><a href="#">one8</a></li>
            <li class="one9"><a href="#">one9</a></li>
            <li class="one10"><a href="#">one10</a></li>
            <ul>
                <li style="width: 0; height: 0; overflow: hidden;">one10-1</li>
                <li style="opacity: 0;">one10-2</li>
                <li style="visibility: hidden;">one10-3</li>
                <li style="display: none;">one10-4</li>
                <li>one10-5</li>
            </ul>
        </div>
        <div id="list2" class="list">
            <li class="one1"><a href="#">one1</a></li>
            <li class="one2"><a href="#">one2</a></li>
            <li class="one3"><a href="#">one3</a></li>
            <li class="one4"><a href="#">one4</a></li>
            <li class="one5"><a href="#">one5</a></li>
            <li class="one6"><a href="#">one6</a></li>
            <li class="one7"><a href="#"></a></li>
            <li class="one8"><a href="#">one8</a></li>
            <li class="one9"><a href="#">one9</a></li>
            <li class="one10"><a href="#">one10</a></li>
        </div>
    </div>

    <script src="../jquery/assets/js/jquery.min_1.12.4.js"></script>
    <script>
        //기본 선택자
        // $("li").css("background-color","#bbdefb");
        $("li").css("margin","3px");

        // $("li").css("border","1px dashed #303f9f");
        // $(".one3").css({"background-color":"#bbdefb","border":"1px dashed #303f9f"});
        // $("#list1").css({"background-color":"#bbdefb","border":"1px dashed #303f9f"});
        // $("div, li").css({"background-color":"#bbdefb","border":"1px dashed #303f9f"});
        // $("*").css({"background-color":"#bbdefb","border":"1px dashed #303f9f"});

        //계층선택자
        // $(".list li").css({"background-color":"#bbdefb","border":"1px dashed #303f9f"});
        // > li는 첫 번째 자식 li만 지정
        // $(".list > li").css({"background-color":"#bbdefb","border":"1px dashed #303f9f"});
        // $(".one4 + li").css({"background-color":"#bbdefb","border":"1px dashed #303f9f"});
        // $(".one4 ~ li").css({"background-color":"#bbdefb","border":"1px dashed #303f9f"});

        //속성 선택자 
        //a태그는 inline 구조라 a 요소에만 속성 지정됨!
        // $("li a[href ='#list2']").css({"background-color":"#bbdefb","border":"1px dashed #303f9f"});
        // s$("li a[href^='https']").css({"background-color":"#bbdefb","border":"1px dashed #303f9f"});
        //$("li a[href$='com']").css({"background-color":"#bbdefb","border":"1px dashed #303f9f"});
        // $("li a[href*='www']").css({"background-color":"#bbdefb","border":"1px dashed #303f9f"});
        // $("li a[href!='https://www.naver.com']").css({"background-color":"#bbdefb","border":"1px dashed #303f9f"});
        // $("li a[href][target]").css({"background-color":"#bbdefb","border":"1px dashed #303f9f"});
        //eq선택자는 0부터 시작! 해당 선택자까지는 선택 안 되고 그 다음 태그부터 선택됨!! 자식 선택 안 됨!!
        // $("li:eq(1)").css({"background-color":"#bbdefb","border":"1px dashed #303f9f"});
        //$("li:gt(4)").css({"background-color":"#bbdefb","border":"1px dashed #303f9f"});
        // $(".one5 ~ li").css({"background-color":"#bbdefb","border":"1px dashed #303f9f"});와 같음!!
        // $(":header").css({"background-color":"#bbdefb","border":"1px dashed #303f9f"});
        // $("li:first").css({"background-color":"#bbdefb","border":"1px dashed #303f9f"});
        // $("li:last").css({"background-color":"#bbdefb","border":"1px dashed #303f9f"});
        // $("li:odd").css({"background-color":"#bbdefb","border":"1px dashed #303f9f"});
        // $("li:even").css({"background-color":"#bbdefb","border":"1px dashed #303f9f"});

        //내용 필터 선택자
        // $("li:contains('one5')").css({"background-color":"#bbdefb","border":"1px dashed #303f9f"});
        // $("li a").css({"display": "block", "height":"20px"})
        // $("li a:empty").css({"background-color":"#bbdefb","border":"1px dashed #303f9f"});
        // $("li a:parent").css({"background-color":"#bbdefb","border":"1px dashed #303f9f"});
        //$("li:has(li)").css({"background-color":"#bbdefb","border":"1px dashed #303f9f"});

        //보임 필터 선택자
        //$("li:hidden").css({"background-color":"#bbdefb","border":"1px dashed #303f9f"});
        //$("li:hidden").css({"background-color":"#bbdefb","border":"1px dashed #303f9f"});
        //$("li:visible").css({"background-color":"#bbdefb","border":"1px dashed #303f9f"});

        //자식요소 필터 선택자
        //$("li:first").css({"background-color":"#bbdefb","border":"1px dashed #303f9f"});
        //$("li:first-child").css({"background-color":"#bbdefb","border":"1px dashed #303f9f"});
        //$("li:last").css({"background-color":"#bbdefb","border":"1px dashed #303f9f"});
        //$("li:last-child").css({"background-color":"#bbdefb","border":"1px dashed #303f9f"});
        //$("li:nth-child(3)").css({"background-color":"#bbdefb","border":"1px dashed #303f9f"});
        //$("li:nth-child(even)").css({"background-color":"#bbdefb","border":"1px dashed #303f9f"});
        //$("li:nth-child(odd)").css({"background-color":"#bbdefb","border":"1px dashed #303f9f"});
        //$("li:nth-child(3n+1)").css({"background-color":"#bbdefb","border":"1px dashed #303f9f"});
    </script>
</body>
</html>

탐색(Traversing)

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JQuery</title>
    <script src="../jquery/assets/js/jquery.min_1.12.4.js">

    </script>

    <style>
        .choice a {
            border: 1px solid #ff9100;
            padding: 7px 20px;
            border-radius: 5px;
            margin: 5px;
            display: inline-block;
            text-decoration: none;
            color: rgb(0, 0, 0);
        }

        .choice:hover {
            text-decoration: none;
        }

        .on {
            background-color: rgb(255, 136, 0);
            border: 1px dashed #000000;
        }
    </style>
</head>

<body>
    <div class="choice">
        <a href="#" class="reset">Reset</a>
        <a href="#" class="btn1">.children()</a>
        <a href="#" class="btn2">.find()</a>
        <a href="#" class="btn3">.next()</a>
        <a href="#" class="btn4">.nextAll()</a>
        <a href="#" class="btn5">.parent()</a>
        <a href="#" class="btn6">.parents()</a>
        <a href="#" class="btn7">.parentsUntil()</a>
        <a href="#" class="btn8">.prev()</a>
        <a href="#" class="btn9">.prevAll()</a>
        <a href="#" class="btn10">.prevUntil()</a>
    </div>
    <div class="choice">
        <a href="#" class="sbtn1">.eq(index)</a>
        <a href="#" class="sbtn2">.filter()</a>
        <a href="#" class="sbtn3">.first()</a>
        <a href="#" class="sbtn4">.last()</a>
        <a href="#" class="sbtn5">.has()</a>
        <a href="#" class="sbtn6">.not()</a>
        <a href="#" class="sbtn7">.slice()</a>
    </div>
    <div class="list">
        <ul>
            <li>첫 번째 리스트1입니다.</li>
            <li>첫 번째 리스트2입니다.</li>
            <li>첫 번째 리스트3입니다.
                <ul>
                    <li>첫 번째 리스트3-1입니다.</li>
                    <li>첫 번째 리스트3-2입니다.</li>
                    <li>첫 번째 리스트3-3입니다.
                        <ul>
                            <li>첫 번째 리스트3-3-1입니다.</li>
                            <li class="select">첫 번째 리스트3-3-2입니다.</li>
                            <li>첫 번째 리스트3-3-3입니다.</li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
        <ul class="slist">
            <li class="list1">두 번째 리스트1입니다.</li>
            <li class="list2">두 번째 리스트2입니다.</li>
            <li class="list3">두 번째 리스트3입니다.</li>
            <li class="list3">두 번째 리스트4입니다.</li>
            <li class="list3">두 번째 리스트5입니다.</li>
            <li class="list3">두 번째 리스트6입니다.</li>
            <li class="list3">두 번째 리스트7입니다.</li>
        </ul>
    </div>
    <script src="../jquery/assets/js/jquery.min_1.12.4.js"></script>
    <script>
        //reset을 클릭하면 모든 태그에 on클래스를 삭제
        $(".reset").click(function () {
            $("*").removeClass("on");
        });

        //children()을 클릭하면  태그에 on클래스를 추가
        $(".btn1").click(function () {
            $(".list li").children().addClass("on");
        });

        //find()을 클릭하면 모든 태그에 on클래스를 삭제
        $(".btn2").click(function () {
            $(".list li").find("li").addClass("on");
        });

        $(".btn3").click(function () {
            $(".list li li:first").next().addClass("on");
        });

        $(".btn4").click(function () {
            $(".list li li:first").nextAll().addClass("on");
        });

        $(".btn5").click(function () {
            $(".list2").parent().addClass("on");
        });

        $(".btn6").click(function () {
            $(".list2").parents().addClass("on");
        });

        $(".btn7").click(function () {
            $(".list2").parentsUntil(".list").addClass("on");
        });

        $(".btn8").click(function () {
            $(".list3").prev().addClass("on");
        });

        $(".btn9").click(function () {
            $(".list3").prevAll().addClass("on");
        });

        $(".btn10").click(function () {
            $(".list3").prevUntil().addClass("on");
        });

        $(".sbtn1").click(function () {
            $(".list li").eq(1).addClass("on");
        });

        $(".sbtn2").click(function () {
            // $(".list li").filter(":even").addClass("on");
            $(".list li").filter(".select").addClass("on");
        });

        $(".sbtn3").click(function () {
            $(".list li").first().addClass("on");
        });

        $(".sbtn4").click(function () {
            $(".list li").last().addClass("on");
        });

        //select 있으면 true가 돼서 작동함
        $(".sbtn5").click(function () {
            $(".list li").has("select").addClass("on");
        });

        $(".sbtn6").click(function () {
            $(".list li").not("select").addClass("on");
        });

        //원하는 부분만 슬라이스 하기!!
        $(".sbtn7").click(function () {
            //$(".list li").slice(2).addClass("on");
            //$(".slist li").slice(2,4).addClass("on");
            $(".slist li").slice(-4,-1).addClass("on");
        });
    </script>
</body>

</html>

속성

유형 메서드 설명
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() ♥ 선택한 요소의 세로 스크롤 값을 설정하거나 반환합니다.
속성 VIEW
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Jquery</title>
    <style>
        li {margin: 8px;}
        a {border: 1px solid #5f6368; padding: 7px 20px 7px 20px; display: inline-block;
        border-radius: 20px; text-decoration: none; color: #000; margin: 4px; }
    </style>
</head>
<body>
    <div class="choice">
        <a href="#" class="btn1">이미지 크기를 100px</a>
        <a href="#" class="btn2">주소값 가져오기</a>
        <a href="#" class="btn3">alt값 가져오기</a>
        <a href="#" class="btn4">이미지 주소값 변경</a>
    </div>
    <div class="list">
        <p class="text"></p>
        <img src="../../illustrator/img/illustrator01.jpg" alt="이미지1">
    </div>

    <script src="../jquery/assets/js/jquery.min_1.12.4.js"></script>
    <script>
        //버튼 1을 클릭하면 이미지 사이즈를 100px로 변경하세요
        $(".btn1").click(function(){
            $(".list img").css("width","100px");
        })

        $(".btn2").click(function(){
            let text = $(".list img").attr("src");
            $(".list .text").text(text);
        })

        $(".btn3").click(function(){
            let text = $(".list img").attr("alt");
            $(".list .text").text(text); 
        })

        $(".btn4").click(function(){
            $(".list img").attr("src","../../photoshop/img/sample01.jpg")
        })
    </script>
    </body>
    </html>
attr()VIEW