JQuery

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

제이쿼리 다운로드

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

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

제이쿼리 준비

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

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

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

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

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

자바스크립트 사용방법

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

선택자

선택자는 HTML요소를 선택하여 가져옵니다. 제이쿼리 선택자는 CSS 선택자와 마찬가지로 선택한 요소의 디자인 속성을 적용할 때 사용할 수 있습니다.

기본 선택자

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

계층 선택자

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

속성 선택자

종류 예시 설명
[name|="value"] $("li a[href|='web']") 속성 중에 'web'과 같은 속성 값을 선택합니다.
[name*="value"] $("li a[href*='web']") 속성 중에 'web'가 포함되어 있는 태그를 선택합니다.
[name~="value"] $("li a[href~='web']") 속성 중에 'web'으로 시작하는 태그를 선택합니다.
[name$="value"] $("li a[href$='web']") 속성 중에 'web'으로 끝나는 태그를 선택합니다.
[name="value"] $("li a[href='web']") 속성 중에 'web'와 일치하는 속성 값을 선택합니다.
[name!="value"] $("li a[href!='web']") 속성 중에 'web'와 일치하지 않는 태그를 선택합니다.
[name^="value"] $("li a[href^='web']") 속성 중에 'web'로 시작하는 태그를 선택합니다.
[name] $("li a[href]") 속성 중에 일치하는 속성을 선택합니다.
[name="value"][name="value"] $("li a[href][class]") 속성 중에 '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 선택된 집합 요소에 텍스트가 있들 때에 선택됩니다.

보임 필터 선택자

종류 설명
:hidden 보이지 않는 요소를 선택합니다.
:visible 보이는 요소를 선택합니다.

자식요소 필터 선택자

종류 설명
:first-child 첫 번째 자식 요소를 선택합니다.
:first-of-type 자식 중 첫 번째 유형의 자식 요소를 선택합니다.
:last-child 마지막 번째 자식 요소를 선택합니다.
: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 텍스트 박스 양식을 선택합니다.
선택자 VIEW
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery</title>
</head>
<body>
    <h1>제이쿼리</h1>
    <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="_blank">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>
                <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>
            </li>
        </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.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"});
        // $(".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"});

        //속성 선택자
        // $("li a[href='#list2'] ").css({"background-color":"#bbdefb" , "border":"1px dashed #303f9f"});
        // $("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"});

        //기본 필터(:) 선택자
        // $("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"});
        // $("li:lt(4)").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: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>

탐색

탐색은 제이쿼리 선택자를 기준으로 선택한 요소에서 원하는 요소를 다시 한번 선택하는 메서드입니다. 탐색은 트리구조와 필터 영역으로 나눌 수 있으며 역할과 성질은 선택자와 비슷합니다.

유형 메서드 설명
트리구조 탐색(Tree Traversal) .children() 선택한 요소의 바로 아래 자식 요소만 선택합니다.
.closest() 선택한 요소를 포함하면서 가장 가까운 상위 요소를 선택합니다.
.find()♥ 선택한 요소의 자식 요소 중 조건에 맞는 요소를 선택합니다.
.next() 선택한 요소를 다음 형제 요소를 선택합니다.
.nextAll() 선택한 요소의 다음 모든 형제 요소를 선택합니다.
.nextUntil() 선택한 요소의 다음 요소 중 조건에 맞을 때까지 찾아 선택합니다.
.parent() 선택한 요소의 부모 요소를 선택합니다.
.parents() 선택한 요소의 모든 부모 요소를 선택합니다.
.parentsUntil() 선택한 요소의 모든 부모 요소 중 조건에 맞을 때까지 찾아 선택합니다.
.prev() 선택한 요소의 이전 요소를 선택합니다.
.prevAll() 선택한 요소의 모든 이전 요소를 선택합니다.
.prevUntil() 선택한 요소의 모든 이전 요소를 중 조건에 맞을 때까지 찾아 선택합니다.
.siblings() 선택한 요소의 형제 요소를 모두 선택합니다.
필터링(Filtering) .eq(index)♥ 선택한 요소의 인덱스 번호에 해당하는 요소를 찾습니다.
.filter() 선택한 요소에서 선택하거나 함수를 사용할 수 있습니다.
.first() 선택한 요소에서 첫번째 자식을 선택합니다.
.has() 선택한 요소의 자식 요소에서 주어진 선택자를 찾습니다.
.is() 선택한 요소 객체의 특징을 판별합니다.
.last() 선택한 요소에서 마지막 번째 자식을 선택합니다.
.map() 선택한 요소의 배열 집합을 새롭게 변경합니다.
.not() 선택한 요소에서 조건에 맞지 않는 것을 선택합니다.
.slice() 선택한 요소에서 조건의 범위로 재 선택합니다.
기타(Miscellaneous) .add() 선택한 요소에 새로운 요소를 추가합니다.
.addBack() 선택한 요소의 상위 요소도 같이 선택합니다.
.contents() 선택한 요소와 일치하는 콘텐츠 요소를 선택합니다.
.each()♥ 선택한 요소들을 각각 순차적으로 실행합니다.
.end() 선택한 요소의 필터링이 일어나기 이전의 요소를 선택합니다.
탐색 VIEW
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery</title>
    <style>
        .choice a {
            border-radius: 5px;
            margin: 5px;
            display: inline-block;
            border: 1px solid #5f6368; padding: 7px 20px;
            text-decoration: none;
            color: #000;
        }
        .choice a:hover {text-decoration: underline;}
        .on {background-color: #bbdefb; border: 1px dashed #303f9f;}
    </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>
    </div>
    <div class="choice">
        <a href="#" class="sbtn1">.eq(2)</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 class="list1">첫번 째 리스트1입니다.</li>
            <li class="list2">첫번 째 리스트2입니다.</li>
            <li class="list3">첫번 째 리스트3입니다.
                <ul>
                    <li>첫번 째 리스트1-1입니다.</li>
                    <li>첫번 째 리스트1-2입니다.</li>
                    <li>첫번 째 리스트1-3입니다.
                        <ul>
                            <li>첫번 째 리스트1-3-1입니다.</li>
                            <li class="select">첫번 째 리스트1-3-2입니다.</li>
                            <li>첫번 째 리스트1-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="list1">두번 째 리스트4입니다.</li>
            <li class="list2">두번 째 리스트5입니다.</li>
            <li class="list3">두번 째 리스트6입니다.</li>
        </ul>
    </div>

    <script src="../jquery.min_1.12.4.js"></script>
    <script>
        //reset을 클릭하면 모든 태그에 on클래스를 제거
        $(".reset").click(function(){
            $("*").removeClass("on");
        });
        //childern을 클릭하면 모든 태그에 on클래스를 추가
        $(".btn1").click(function(){
            $(".list li").children().addClass("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: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");
        });


        $(".sbtn1").click(function(){
            $(".list li").eq(2).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");
            $(".list li:first").addClass("on");
        });
        $(".sbtn4").click(function(){
            $(".list li").last().addClass("on");
            // $(".list li:last").addClass("on");
        });
        $(".sbtn5").click(function(){
            $(".list li").has(".select").addClass("on");
        });
        $(".sbtn6").click(function(){
            $(".list li").not(".select").addClass("on");
        });
        $(".sbtn7").click(function(){
            // $(".slist li").slice(2).addClass("on");
            // $(".slist li").slice(2,5).addClass("on");
            // $(".slist li").slice(-2).addClass("on");
            $(".slist li").slice(-4,-1).addClass("on");
        });

    </script>
</body>
</html>
each VIEW
<!DOCTYPE html>
<html lang="ko">
<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 5px 20px; display: inline-block;
        border-radius: 20px; text-decoration: none; color: #000; margin: 4px;}
        .onRed {padding: 4px 6px 2px 6px; font-size: 90%;  color: #c7254e; 
            white-space: nowrap; background-color:#f9f2f4; border-radius: 4px; border: 1px dashed #a51a3d; }
        .onBlue {padding: 4px 6px 2px 6px; font-size: 90%; color: #3d90b7;
            white-space: nowrap; background-color:#e7f6fd; border-radius: 4px; border: 1px dashed #3d90b7;}
    </style>
</head>
<body>
    <div class="choice">
        <a href="#" class="btn1">addClass()</a>
        <a href="#" class="btn2">each()</a>
        <a href="#" class="btn3">setTimeout()</a>
    </div>

    <div class="list">
        <ul>
            <li>.children()	선택한 요소의 바로 아래 자식 요소만 선택합니다.</li>
            <li>.closest()	선택한 요소를 포함하면서 가장 가까운 상위 요소를 선택합니다.</li>
            <li>.find()♥	선택한 요소의 자식 요소 중 조건에 맞는 요소를 선택합니다.</li>
            <li>.next()	선택한 요소를 다음 형제 요소를 선택합니다.</li>
            <li>.nextAll()	선택한 요소의 다음 모든 형제 요소를 선택합니다.</li>
        </ul>
    </div>
    
    <script src="../jquery.min_1.12.4.js"></script>
    <script>
        //버튼1을(선택자) 클릭(이벤트)하면 리스트(선택자)에 있는 글씨 색을 빨간색으로 변경해주세요~
        $(".btn1").click(function(){
            $(".list li").addClass("onRed");
        });
        
        $(".btn2").click(function(){
            $(".list li").each(function(){
                $(".list li").addClass("onBlue");
            });
        });
        
        $(".btn3").click(function(){
            $(".list li").each(function(index){
                setTimeout(function(){
                    $(".list li").eq(index).addClass("onRed")
                }, 1000 * (index+2));
            });
        });
    </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() ♥ 선택한 요소의 세로 스크롤 값을 설정하거나 반환합니다.
attr VIEW
<!DOCTYPE html>
<html lang="ko">
<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 5px 20px; display: inline-block;
        border-radius: 20px; text-decoration: none; color: #000; margin: 4px;}
        .onRed {padding: 4px 6px 2px 6px; font-size: 90%;  color: #c7254e; 
            white-space: nowrap; background-color:#f9f2f4; border-radius: 4px; border: 1px dashed #a51a3d; }
        .onBlue {padding: 4px 6px 2px 6px; font-size: 90%; color: #3d90b7;
            white-space: nowrap; background-color:#e7f6fd; border-radius: 4px; border: 1px dashed #3d90b7;}
    </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="../../photoshop/img/sample01-.jpg" alt="이미지2">
    </div>

    <script src="../jquery.min_1.12.4.js"></script>
    <script>
        //버튼1을 클릭하면 이미지 사이즈를 100px로 변경하세요~
        $(".btn1").click(function(){
            $(".list img").css("width","100px")
        });
        //버튼2를 클릭하면 이미지 주소값을 출력시켜주세요~
        $(".btn2").click(function(){
            let text = $(".list img").attr("src");
            $(".list .text").text(text);
        });
        //버튼3을 클릭하면 이미지의 alt값을 가져와서 출력시켜주세요~
        $(".btn3").click(function(){
            let text = $(".list img").attr("alt");
            $(".list .text").text(text);
        });
        //버튼4을 클릭하면 이미지 주소값을 변경시켜주세요~
        $(".btn4").click(function(){
            $(".list img").attr("src","../../photoshop/img/sample00.jpg")
        });

    </script>
</body>
</html>
attr VIEW
addClass() VIEW
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery</title>
    <style>
        * {margin: 0; padding: 0; text-align: center;}
        li {list-style: none;}
        a {text-decoration: none; color: #666;}
        #tab-menu {width: 350px; margin: 50px auto;}
        .tab-btn ul {overflow: hidden;}
        .tab-btn li {float: left; width: 20%;}
        .tab-btn li a {padding: 10px; display: block; background: #1e88e5; color: #fff;}
        #tab-cont {width: 350px; height: 350px;}
        #tab-cont.img1 {background: url(../../assets/img/svg-carrot.svg); background-size: 350px;}
        #tab-cont.img2 {background: url(../../assets/img/svg-hotdog.svg); background-size: 350px;}
        #tab-cont.img3 {background: url(../../assets/img/svg-pizza.svg); background-size: 350px;}
        #tab-cont.img4 {background: url(../../assets/img/svg-strawberry-magnum.svg); background-size: 350px;}
        #tab-cont.img5 {background: url(../../assets/img/svg-vanilla-cupcake.svg); background-size: 350px;}
    </style>
</head>
<body>
    <div id="tab-menu">
        <div class="tab-btn">
            <ul>
                <li><a href="#">Tab1</a></li>
                <li><a href="#">Tab2</a></li>
                <li><a href="#">Tab3</a></li>
                <li><a href="#">Tab4</a></li>
                <li><a href="#">Tab5</a></li>
            </ul>
        </div>
        <div id="tab-cont" class="img1">

        </div>

    </div>
    
    <script src="../jquery.min_1.12.4.js"></script>
    <script>
        //글씨를 클릭하면 클릭한 글씨만 파란색으로 변경
        $(".tab-btn a").click(function(){
            $(this).css("color","blue");
        });
        $(".tab-btn li:eq(0)").click(function(){
            $("#tab-cont").removeClass().addClass("img1");
        });
        $(".tab-btn li:eq(1)").click(function(){
            $("#tab-cont").removeClass().addClass("img2");
        });
        $(".tab-btn li:eq(2)").click(function(){
            $("#tab-cont").removeClass().addClass("img3");
        });
        $(".tab-btn li:eq(3)").click(function(){
            $("#tab-cont").removeClass().addClass("img4");
        });
        $(".tab-btn li:eq(4)").click(function(){
            $("#tab-cont").removeClass().addClass("img5");
        });
    </script>
</body>
</html>
css() VIEW
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="choice">
        <a href="#" class="btn1">클릭하면 글씨의 색을 빨간색으로 변경해주세요!</a><br>
        <a href="#" class="btn2">클릭하면 글씨의 컬러 값을 알려주세요!</a><br>
        <a href="#" class="btn3">클릭하면 글씨의 컬러 값을 파란색으로 폰트 사이트 30px로 변경해주세요!</a><br>
        <a href="#" class="btn4">클릭하면 글씨를 클릭할 때마다 크게 해주세요!</a><br>
        <a href="#" class="btn5">클릭하면 글씨를 클릭할 때마다 작게 해주세요!</a><br>
    </div>
    <div class="list">
        <ul>
            <li>.addClass() : 선택한 요소의 클래스를 추가합니다.</li>
            <li>.attr() : 선택한 요소의 HTML 속성 값을 설정하거나 반환합니다.</li>
            <li>.offset() :	선택한 요소의 위치 좌표 값(문서 기준)을 설정하거나 반환합니다.</li>
            <li>.scrollTop() : 선택한 요소의 세로 스크롤 값을 설정하거나 반환합니다.</li>
            <li>.toggleClass() : 선택한 요소에 클래스의 추가/제거를 연속하여 사용할 수 있습니다.</li>
        </ul>
        <p class="text"></p>
    </div>

    <script src="../jquery.min_1.12.4.js"></script>        
    <script>
        $(".btn1").click(function(){
            $(".list li").css("color","red");
        });
        $(".btn2").click(function(){
            let value = $(".list li").css("color");
            $(".text").text("이 폰트의 색은" + value + "입니다.");
        });
        $(".btn3").click(function(){
            // $(".list li").css({"color":"blue", "font-size":"30px"});
            $(".list li").css({"color":"blue", fontSize:"30px"});
        });
        $(".btn4").click(function(){
            $(".list li").css({fontSize: function(index, value){
                return parseFloat(value) * 1.2
            }})
        });
        $(".btn5").click(function(){
            $(".list li").css({fontSize: function(index, value){
                return parseFloat(value) * 0.8
            }})
        });
    </script>
</body>
</html>
hasClass() VIEW
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="choice">
        <a href="#" class="btn1">클릭하면 select 클래스를 찾은 후 효과를 주세요!</a>
    </div>
    <div class="list">
        <ul>
            <li>.addClass() : 선택한 요소의 클래스를 추가합니다.</li>
            <li>.attr() : 선택한 요소의 HTML 속성 값을 설정하거나 반환합니다.</li>
            <li class="select">.offset() :	선택한 요소의 위치 좌표 값(문서 기준)을 설정하거나 반환합니다.</li>
            <li>.scrollTop() : 선택한 요소의 세로 스크롤 값을 설정하거나 반환합니다.</li>
            <li>.toggleClass() : 선택한 요소에 클래스의 추가/제거를 연속하여 사용할 수 있습니다.</li>
        </ul>
    </div>

    <script src="../jquery.min_1.12.4.js"></script>
    <script>
        $(".btn1").click(function(){
            if( $(".list li").hasClass("select") ){
                $(".select").css({color:"red", fontSize:30});
            }
        });
    </script>
</body>
</html>
toggleClass() VIEW
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        li.on {color: red; font-size: 30px;}
    </style>
</head>
<body>
    <div class="choice">
        <a href="#" class="btn1">클릭하면 select 클래스를 찾은 후 효과를 주세요!</a>
    </div>
    <div class="list">
        <ul>
            <li>.addClass() : 선택한 요소의 클래스를 추가합니다.</li>
            <li>.attr() : 선택한 요소의 HTML 속성 값을 설정하거나 반환합니다.</li>
            <li class="select">.offset() :	선택한 요소의 위치 좌표 값(문서 기준)을 설정하거나 반환합니다.</li>
            <li>.scrollTop() : 선택한 요소의 세로 스크롤 값을 설정하거나 반환합니다.</li>
            <li>.toggleClass() : 선택한 요소에 클래스의 추가/제거를 연속하여 사용할 수 있습니다.</li>
        </ul>
    </div>

    <script src="../jquery.min_1.12.4.js"></script>
    <script>
        $(".btn1").click(function(){
            $(".list li").toggleClass("on");
        });
    </script>
</body>
</html>
toggleClass() VIEW
toggleClass() VIEW
toggleClass() VIEW
toggleClass() VIEW