JQuery 개념

제이쿼리는 자바스크립트 라이브러리를 이용해 만든 언어입니다.
제이쿼리는 HTML에 포함되어 있는 클라이언트 스크립트 언어를 단순화하도록 설계된 웹브라우저 호환성을 가진 자바스크립트 라이브러리입니다.
라이브러리는 자주 사용하는 코드를 재사용 및 효율성 있게 사용할 수 있도록 만들어진 함수의 집합을 의미합니다.

제이쿼리 언어의 특징

  • 제이쿼리는 CSS를 쉽게 적용할 수 있습니다.
  • 제이쿼리는 크로스브라우징을 지원합니다.
  • 제이쿼리는 플러그인이 풍부합니다.
  • 제이쿼리는 코드를 적게, 효율적으로 작성할 수 있습니다.
  • 제이쿼리는 좋은 확장성과 Ajax 기능을 구현합니다.

JQuery 기본

제이쿼리 사용하는 방법

JQuery 라이브러리는 JQuery.com 공식 사이트에서 다운
JQuery는 1.x, 2.x, 3.x 버전이 있습니다. 1.x는 IE6부터 지원됩니다.
제이쿼리 사용방법 View
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JQuery</title>
</head>
<body>
    <!--3.x jquery-->
    <script src="jquery-3.4.1.min.js"></script>
    
    <!--2.x jquery-->
    <script src="jquery-2.2.4.min.js"></script>

    <!--1.x jquery-->
    <script src="jquery-1.12.4.min.js"></script>


    <!--3.x jquery Google CDN-->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

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

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


    <!--jqueryUI Google CDN-->
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

</body>
</html>

제이쿼리 준비

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

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

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

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

제이쿼리 사용하는 이유 View

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JQuery</title>
    <style>
        #list1 li {
            color: blue;
        }
    </style>

</head>

<body>
    <h1>jQuery</h1>
    <div>
        <ul id="list1" class="list">
            <li class="list1">list1</li>
            <li class="list2">list2</li>
            <li class="list3">list3</li>
            <li class="list4">list4</li>
            <li class="list5">list5</li>
            <li class="list6">list6</li>
            <li class="list7">list7</li>
            <li class="list8">list8</li>
            <li class="list9">list9</li>
            <li class="list10">list10</li>
        </ul>
        <ul id="list2" class="list">
            <li class="list1">list1</li>
            <li class="list2">list2</li>
            <li class="list3">list3</li>
            <li class="list4">list4</li>
            <li class="list5">list5</li>
            <li class="list6">list6</li>
            <li class="list7">list7</li>
            <li class="list8">list8</li>
            <li class="list9">list9</li>
            <li class="list10">list10</li>
        </ul>
        <ul id="list3" class="list">
            <li class="list1">list1</li>
            <li class="list2">list2</li>
            <li class="list3">list3</li>
            <li class="list4">list4</li>
            <li class="list5">list5</li>
            <li class="list6">list6</li>
            <li class="list7">list7</li>
            <li class="list8">list8</li>
            <li class="list9">list9</li>
            <li class="list10">list10</li>
        </ul>
    </div>
    <script src="jquery-1.12.4.min.js"></script>
    <script>
        $(document).ready(function () {
            //#list2 li
            $("#list2 li").css("color", "red");
        });
    </script>

    <!--javascript-->
    <script>
        let list3 = document.getElementById("list3");
        let liList = list3.getElementsByTagName("li");

        for (var i = 0; i < liList.length; i++) {
            let li = liList[i];
            li.style.color = "#18ba2b";
        };
    </script>
</body>

</html>

선택자

기본 선택자

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

계층 선택자

종류 예시 설명
하위 선택자 $("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() 선택된 집합에서 선택한 반대 요소를 선택합니다.
기본 필터 선택자View
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JQuery</title>
</head>
<body>
    <h2>기본필터 선택자</h2>
    <div class="list">
        <ul>
            <li>:eq()</li>
            <li>:gt()</li> 
            <li>:lt()</li>
            <li>:header</li>
            <li>:first</li>
            <li>:last</li>
            <li>:odd</li>
            <li>:even</li>
            <li>:not()</li>
        </ul>
    </div>
    <!--jquery-->
    <script src="jquery-1.12.4.min.js"></script>
    <script>
        // $(".list ul li:eq(2)").css("color","red");
        // $(".list ul li:eq(4)").css("color","red");
        // $(".list ul li:eq(-4)").css("color","red"); 
        // $(".list ul li:gt(2)").css("color","red");
        // $(".list ul li:lt(2)").css("color","red");
        // $(".list ul li:first").css("color","red");
        // $(".list ul li:last").css("color","red");
        // $(".list ul li:even").css("color","red");
        // $(".list ul li:odd").css("color","red");
        // $(".list li:not(eq(4))").css("color","red");
        // $(".list li:not(:first)").css("color","red");

    </script>

</body>
</html>

내용 필터 선택자

종류 설명
:containes() 선택된 집합에서 일치하는 문자열 요소를 선택합니다.
:empty() 선택된 집합에서 텍스트가 없는 요소를 선택합니다.
:has() 선택된 집합에 일치하는 요소를 선택합니다.
:parent() 선택된 집합에서 텍스트가 있는 요소를 선택합니다.
내용 필터 선택자View
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JQuery</title>
</head>
<body>
    <h2>기본필터 선택자</h2>
    <div class="list">
        <ul>
            <li>:eq()</li>
            <li>:gt()</li> 
            <li>:lt()</li>
            <li>:header</li>
            <li>:first</li>
            <li>:last</li>
            <li></li>
            <li>:even</li>
            <li>:not()</li>
        </ul>
    </div>
    <!--jquery-->
    <script src="jquery-1.12.4.min.js"></script>
    <script>
        // $(".list li:contains(:last)").css("color","red");
        // $(".list li:empty").css("color","red");
        // $(".list li:parent").css("color","red");
        $(".list ul:has(li)").css("color","red");

    </script>

</body>
</html>

보임 필터 선택자

컨텐츠 요소를 보이지 않게 하는 방법
  • display: none
  • visibility: hidden
  • opacity: 0
  • width: 0; height: 0
  • form 요소 중에 type="hidden"
  • 부모 요소가 보이지 않거나 숨겨져 있을 때
종류 설명
:hidden() 보이지 않는 요소를 선택합니다.
:visible() 보이는 요소를 선택합니다.
보임 필터 선택자View
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JQuery</title>
</head>
<body>
    <h2>기본필터 선택자</h2>
    <div class="list">
        <ul>
            <li>:eq()</li>
            <li>:gt()</li> 
            <li>:lt()</li>
            <li>:header</li>
            <li style="display: none;">display: none</li>
            <li style="visibility: hidden;">visibility: hidden</li>
            <li style="opacity: 0;">opacity: 0</li>
            <li>:even</li>
            <li>:not()</li>
        </ul>
    </div>
    <!--jquery-->
    <script src="jquery-1.12.4.min.js"></script>
    <script>
        $(".list li:visible").css("color","blue");
        $(".list li:hidden").show().css("color","red");
    </script>

</body>
</html>

자식요소 필터 선택자

종류 설명
: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(index) 자식 요소가 오직 하나인 요소를 선택합니다.
:only-of-type(index) 자식 요소 중 오직 하나인 요소를 선택합니다.
자식요소 필터 선택자View
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JQuery</title>
</head>
<body>
    <h1>자식요소 필터 선택자</h1>
    <div class="list">
        <p>1.1(p)기본선택자</p>
        <p>1.2(p)계층선택자</p>
        <div>1.3(div):first-child</div>
        <div>1.4(div):first-child</div>
    </div>
    <div class="list">
        <p>2.1(p)기본선택자</p>
        <p>2.2(p)계층선택자</p>
    </div>
    <div class="list">
        <span>3.1(span)기본선택자</span>
    </div>
    <div class="list">
        <div>4.1(div)기본선택자</div>
    </div>

    <!--jquery-->
    <script src="jquery-1.12.4.min.js"></script>
    <script>
        // $(".list :first-child").css("color","red");
        // $(".list :first").css("color","red");
        // $(".list div:first-of-type").css("color","red");
        // $(".list :last-child").css("color","red");
        // $(".list :last").css("color","red");
        // $(".list div:last-of-type").css("color","red");
        // $(".list :only-child").css("color","red");
        // $(".list div:only-of-type").css("color","red");

        // $(".list :nth-child(3)").css("color","red");
        // $(".list :nth-child(2n+1)").css("color","red");
        // $(".list :nth-last-child(1)").css("color","red");
        // $(".list :nth-last-of-type(1)").css("color","red");
        // $(".list :nth-of-type(1)").css("color","red");
    </script>

</body>
</html>

폼 필터 선택자

종류 설명
:button 버튼 입력 양식을 선택합니다.
:checkbox 체크박스 입력 양식을 선택합니다.
:checked :checked된 입력 양식을 선택합니다.
:disabled :disabled된 입력 양식을 선택합니다.
:enabled :enabled된 입력 양식을 선택합니다.
:focus 입력 양식에 포커스된 태그를 선택합니다.
:file 파일 업로드 양식을 선택합니다.
:image 이미지 입력 양식을 선택합니다.
:input 모든 입력 양식을 선택합니다.
:password 암호 입력 양식을 선택합니다.
:radio 라디오 버튼 입력 양식을 선택합니다.
:reset 리셋 입력 양식을 선택합니다.
:selected :selected된 입력 양식을 선택합니다.
:submit 데이터 보내기 입력 양식을 선택합니다.
:text 텍스트 박스 양식을 선택합니다.

탐색

탐색과 관련된 메서드는 트리구조를 기반으로 찾아가는 방식입니다.

트리구조

메서드 설명
.children() 선택한 요소의 바로 아래 자식 요소만 선택합니다.
.closest() 선택한 요소를 포함하면서 가장 가까운 상위 요소를 선택합니다.
.find() * 선택한 요소의 자식 요소 중 조건에 맞는 요소를 선택합니다.
.next() 선택한 요소의 다음 요소를 선택합니다.
.nextAll() 선택한 요소의 다음 모든 요소를 선택합니다.
.nextUntil() 선택한 요소의 다음 요소 중 조건에 맞을 때까지 찾습니다.
.parent() 선택한 요소의 부모 요소를 선택합니다.
.parents() 선택한 요소의 모든 부모 요소를 선택합니다.
.parentsUntil() 선택한 요소의 부모 요소 중 조건에 맞을 때까지 찾습니다.
.prev() 선택한 요소의 이전 요소를 선택합니다.
.prevAll() 선택한 요소의 이전 모든 요소를 선택합니다.
.prevUntil() 선택한 요소의 이전 요소 중 조건에 맞을 때까지 찾습니다.
.siblings() 선택한 요소의 형제 요소를 모두 찾습니다.
트리구조 View
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JQuery</title>
</head>
<body>
    <h3>탐색</h3>
    <div class="list">
        <ul>
            <li>1. children()</li>
            <li class="select">2. find()
                <ul class="subselect1">
                    <li>첫 번째 자식입니다.</li>
                    <li>두 번째 자식입니다.</li>
                </ul>
            </li>
            <li class="select">3. next()
                <ul>
                    <li>첫 번째 자식입니다.</li>
                    <li>첫 번째 자식입니다.
                        <ul>
                            <li class="one">두 번째 자식입니다.</li>
                            <li>두 번째 자식입니다.</li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li>4. nextAll()</li>
            <li>5. nextUntil()</li>
            <li>6. parent()</li>
            <li>7. parentAll()</li>
            <li>8. parentUntil()</li>
        </ul>
    </div>

    <!--jquery-->
    <script src="jquery-1.12.4.min.js"></script>
    <script>
        // $(".list li.select").children().css({"color":"red","backgroundColor":"#ccc","border":"1px dashed #000"});
        // $(".list li.select").children(".subselect1").css({"color":"red","backgroundColor":"#ccc","border":"1px dashed #000"});
        //  $(".list li.select").find("ul").css({"color":"red","backgroundColor":"#ccc","border":"1px dashed #000"});
        //  $(".list li.select").find("li").css({"color":"red","backgroundColor":"#ccc","border":"1px dashed #000"});
        //  $(".list li:nth-child(5)").next().css({"color":"red","backgroundColor":"#ccc","border":"1px dashed #000"});
        //  $(".list li:nth-child(5)").nextAll().css({"color":"red","backgroundColor":"#ccc","border":"1px dashed #000"});
        //  $(".one").parent().css({"color":"red","backgroundColor":"#ccc","border":"1px dashed #000"});
        //  $(".one").parents().css({"color":"red","backgroundColor":"#ccc","border":"1px dashed #000"});
        //  $(".one").parentsUntil(".select").css({"color":"red","backgroundColor":"#ccc","border":"1px dashed #000"});
        //  $(".list li:nth-child(5)").prevAll().css({"color":"red","backgroundColor":"#ccc","border":"1px dashed #000"});
         $(".list li:nth-child(7)").prevUntil().css({"color":"red","backgroundColor":"#ccc","border":"1px dashed #000"});
    </script>

</body>
</html>
텍스트에 마우스 오버 효과 주기 View
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JQuery</title>
    <style>
        .span {font-size: 90%; color: #c7254e; white-space: normal; background: #f9f2f4; border: 1px solid #a51a3d; border-radius: 4px; padding: 2px 6px 2px 6px;}
        .span2 {font-size: 90%; color: #3d90b7; white-space: normal; background: #e7f6fd; border: 1px solid #3d90b7; border-radius: 4px; padding: 2px 6px 2px 6px;}
    </style>
</head>
<body>
    <h1>비주얼 콘셉트(Visual Concept)</h1>
    <p class="text" aria-label="디자인리서치를 한 후 디자이너가 전달하고자 하는 주제가 잘 표현될 수 있도록 여러가지 시각적인 표현방법 및 접근 방법을 비주얼을 정하여 나타내는 것을 비주얼 콘셉트라고 한다.
    웹 사이트의 성격에 따라 정보 전달형, 서비스 제공형, 커뮤니티형 등으로 분류한다.
웹사이트의 사용자의 방문을 분류 및 분석하여 개발 전략을 수립하고 전개한다. 단순한 텍스트와 이미지의 결합이 아닌 시각 언어로서 사이트의 성격에 맞게 구현한다.">디자인리서치를 한 후 디자이너가 전달하고자 하는 주제가 잘 표현될 수 있도록 여러가지 시각적인 표현방법 및 접근 방법을 비주얼을 정하여 나타내는 것을 비주얼 콘셉트라고 한다.
    웹 사이트의 성격에 따라 정보 전달형, 서비스 제공형, 커뮤니티형 등으로 분류한다.
웹사이트의 사용자의 방문을 분류 및 분석하여 개발 전략을 수립하고 전개한다. 단순한 텍스트와 이미지의 결합이 아닌 시각 언어로서 사이트의 성격에 맞게 구현한다.</p>
<button class="btn">이게 중요합니다.</button>
<button class="btn2">취소합니다.</button>
    
    <!--jquery-->
    <script src="jquery-1.12.4.min.js"></script>
    <script>
        let txt = $(".text").text().split(" ").join("</span> <span aria-hidden='true'>");
            txt ="<span aria-hidden='true'>"+txt + "</span>";
        // alert(txt);

        $(".text").html(txt).find("span").hover(function(){
            $(this).addClass("span");
        }, function(){
            $(this).removeClass("span");
        });

        //디자인 리서치 단어를 서치 -> 강조 -> 버튼을 클릭
        //:contains
        $(".btn").click(function(){
            $(".text").find(":contains('디자인리서치')").addClass("span2");
        });

        //취소합니다. 클릭하면 -> 강조표시 삭제
        $(".btn2").click(function(){
            $(".text span").removeClass("span2");
        });

    </script>

</body>
</html>

필터링

메서드 설명
.eq() * 선택한 요소에 인덱스 번호에 해당하는 요소를 찾습니다.
.filter() 선택된 요소에서 선택하거나 함수를 사용할 수 있습니다.
.first() 선택된 요소에서 첫 번째 자식 요소를 찾습니다.
.has() * 선택한 요소에서 주어진 선택자가 있으면 선택한 요소를 선택합니다.
.is() * 선택된 요소 객체의 특징을 판별합니다.
.last() 선택된 요소에서 마지막번째 자식 요소를 찾습니다.
.map() 선택된 요소의 배열 집합을 새롭게 변경합니다.
.not() 선택된 요소에서 조건에 맞지 않는 것을 선택합니다.
.slice() 선택된 요소에서 조건의 범위로 재선택합니다.
필터링 기본 예제 View
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JQuery</title>
</head>
<body>
    <h1>필터링</h1>
    <div class="list">
        <ul>
            <li class="list1">list1</li>
            <li class="list2">list2</li>
            <li class="list3">list3</li>
            <li class="list4">list4</li>
            <li class="list5">list5</li>
            <li class="list6">list6</li>
            <li class="list7">list7</li>
            <li class="list8">list8</li>
            <li class="list9">list9</li>
            <li class="list10">list10
                <ul>
                    <li>sublist1</li>
                    <li>sublist2</li>
                    <li>sublist3</li>
                    <li>sublist4</li>
                </ul>
            </li>
        </ul>
    </div>
    
    <!--jquery-->
    <script src="jquery-1.12.4.min.js"></script>
    <script>
        //list2의 글씨 색을 빨간색으로 변경해주세요.

        // $(".list2").css("color","red");
        // $(".list1+li").css("color","red");
        // $(".list li[class |= 'list2']").css("color","red");
        // $(".list li[class *= 'list2']").css("color","red");
        // $(".list li[class $= '2']").css("color","red");
        // $(".list li[class ~= 'list2']").css("color","red");
        // $(".list li:eq(1)").css("color","red");
        // $(".list li").eq(1).css("color","red");
        // $(".list li:nth-last-child(9)").css("color","red");
        // $(".list li:nth-of-typeild(2)").css("color","red");
        // $(".list").find(".list2").css("color","red");
        // $(".list1").next().css("color","red");
        // $(".list li.list3").nextUntil(".list1").css("color","red");
        // $(".list li.list3").prev().css("color","red");
        // $(".list li.list3").prevUntil(".list1").css("color","red");
        // $(".list li").filter(".list2").css("color","red");
        // $(".list li").slice(1, 2).css("color","red");
    </script>

</body>
</html>

기타

메서드 설명
.add() 선택한 요소에 새로운 요소를 추가합니다.
.addBack() 선택한 요소의 상위 요소도 같이 선택합니다.
.contents() 선택한 요소와 일치하는 콘텐츠 요소를 선택합니다.
.each() * 선택한 여러 요소들을 각각 순차적으로 실행합니다.
.end() 선택한 요소의 필터링이 일어나기 이전의 요소를 선택합니다.
each (시간차 효과) View
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JQuery</title>
</head>
<body>
    <h3>each</h3>
    <div class="list">
        <ul>
            <li>1. add</li>
            <li>2. add</li>
            <li>3. add</li>
            <li>4. add</li>
            <li>5. add</li>
            <li>6. add</li>
        </ul>
    </div>
    
    <!--jquery-->
    <script src="jquery-1.12.4.min.js"></script>
    <script>
        //li 컬러값을 빨간색으로 변경해주세요.
        // $(".list li").css("color","red");

        $(".list li").each(function(index){
            setTimeout(function(){
                $(".list li").eq(index).css("color","blue");
            },1000*(index+1));
        });
    </script>

</body>
</html>

속성

Attributes

메서드 설명
.attr() 선택한 HTML 요소의 속성 값을 설정하거나 반환합니다.
.prop() 선택한 JavaScript 요소의 속성 값을 설정하거나 반환합니다.
.removeAttr() 선택한 HTML 요소에서 하나 이상의 속성을 제거합니다.
.removeProp() 선택한 JavaScript 요소에서 하나 이상의 속성을 제거합니다.
.val() 선택한 폼 요소의 속성 값을 설정하거나 반환합니다.
속성 View
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JQuery</title>
</head>
<body>
    <h1>속성</h1>
    <div class="list">
        <img src="../img/next01@2x.jpg" alt="이미지">
    </div>
    <p class="desc"></p>
    <button class="btn1">이미지 주소 알아내기</button>
    <button class="btn2">alt 주소 알아내기</button>
    <button class="btn3">이미지 바꾸기</button>
    <button class="btn4">alt 속성 바꾸기</button>
    <button class="btn5">이미지 크기 변경하기</button>
    
    <!--jquery-->
    <script src="jquery-1.12.4.min.js"></script>
    <script>
        //버튼을 클릭 -> 이미지 -> 주소 값을 가져온다.
        let img = $(".list img").attr("src");
        let alt = $(".list img").attr("alt");

        $(".btn1").click(function(){
            $(".desc").text(img);
        });

        //버튼을 클릭 -> 이미지 -> alt 값을 가져온다.
        $(".btn2").click(function(){
            $(".desc").text(alt);
        });

        //버튼3을 클릭 -> 이미지 속성을 변경
        $(".btn3").click(function(){
            $(".list img").attr("src","../img/next02@2x.jpg");
        });

        //버튼4을 클릭 -> alt 속성을 변경
        $(".btn4").click(function(){
            $(".list img").attr("alt","이미지2");
        });

        //버튼5을 클릭 -> 이미지 크기 변경
        $(".btn5").click(function(){
            $(".list img").attr("width","300");
        });

    </script>

</body>
</html>
attr을 이용한 탭메뉴 View
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JQuery</title>
    <style>
        *{margin: 0; padding: 0%;}
        li {list-style: none;}
        a {text-decoration: none; color: #666;}
        .tab-menu {width: 350px; margin: 100px auto;}
        .tab-btn ul {overflow: hidden;}
        .tab-btn li {float: left; width: 20%; text-align: center;}
        .tab-btn li a {display: block; background: #1e88e5; padding: 14px 10px 10px 10px; color: #fff;}
        .tab-cont img {width: 100%;}
    </style>
    
</head>
<body>
    <div class="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 class="tab-cont"><img src="../img/next03@2x.jpg" alt=""></div>
    </div>

    <!--jquery-->
    <script src="jquery-1.12.4.min.js"></script>
    <script>
        //글씨를 클릭하면 tab -> menu로 변경하세요.
        $(".tab-btn ul li").click(function(){
            $(".tab-btn ul li").find("a").text("Menu");
        });

        //글씨를 클릭하면 tab3 -> menu3 변경하세요.
        //변수 1, 2, 3, 4, 5 -> index()
        $(".tab-btn ul li").click(function(){
            let target = $(this);
            let index = target.index()+1;
            // alert(index)
            target.find("a").text("Menu"+index);
        });

        // //해당 버튼을 클릭하면 해당 이미지로 변경
        $(".tab-btn ul li:eq(0)").click(function(){
            $(".tab-cont img").attr({"src":"../img/next04@2x.jpg", "alt":"이미지1"});
        });
        $(".tab-btn ul li:eq(1)").click(function(){
            $(".tab-cont img").attr({"src":"../img/next05@2x.jpg", "alt":"이미지2"});
        });
        $(".tab-btn ul li:eq(2)").click(function(){
            $(".tab-cont img").attr({"src":"../img/next06@2x.jpg", "alt":"이미지3"});
        });
        $(".tab-btn ul li:eq(3)").click(function(){
            $(".tab-cont img").attr({"src":"../img/next07@2x.jpg", "alt":"이미지4"});
        });
        $(".tab-btn ul li:eq(4)").click(function(){
            $(".tab-cont img").attr({"src":"../img/next02@2x.jpg", "alt":"이미지5"});
        });

        //한번에 쓰기
        $(".tab-btn ul li").click(function(){
            let target = $(this);
            let index = target.index()+1

            target.find("a").text("Menu"+ index);
            $(".tab-cont img").attr({"src":"../img/next0"+index+"@2x.jpg","alt":"이미지" + index });
        });

    </script>

</body>
</html>

CSS

메서드 설명
.addClass() 선택한 요소에 클래스를 추가합니다.
.css() 선택한 요소에 CSS 속성 값을 설정하거나 변경합니다.
.hasClass() 선택한 요소에 클래스가 있는지를 찾습니다.
.removeClass() 선택한 요소에 클래스를 삭제합니다.
.toggleClass() 선택한 요소에 클래스의 추가/제거를 연속하여 사용 할 수 있습니다.
addClass View
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JQuery</title>
    <style>
        .red {font-size: 90%; color: #c7254e; white-space: normal; background: #f9f2f4; border: 1px solid #a51a3d; border-radius: 4px; padding: 2px 6px 2px 6px;}
        .blue {font-size: 90%; color: #3d90b7; white-space: normal; background: #e7f6fd; border: 1px solid #3d90b7; border-radius: 4px; padding: 2px 6px 2px 6px;}
    </style>
</head>
<body>
    <div class="list">
        <ul>
            <li class="list1">list1</li>
            <li class="list2">list2</li>
            <li class="list3">list3</li>
            <li class="list4">list4</li>
            <li class="list5">list5</li>
            <li class="list6">list6</li>
            <li class="list7">list7</li>
            <li class="list8">list8</li>
            <li class="list9">list9</li>
            <li class="list10">list10</li>
        </ul>
    </div>

    <button class="btn1">btn1</button>
    <button class="btn2">btn2</button>
    <button class="btn3">btn3</button>
    <button class="btn4">btn4</button>
    <button class="btn5">btn5</button>
    <button class="btn6">btn6</button>
    <button class="btn7">btn7</button>
    
    <!--jquery-->
    <script src="jquery-1.12.4.min.js"></script>
    <script>
        //버튼을 클릭하면 짝수 글씨 색을 빨간색으로 변경해주세요!!!
        $(".btn1").click(function(){
            $(".list li:odd").css("color","red");
        });

        //2번째 버튼을 클릭하면 클래스 red를 추가해주세요!!!
        $(".btn2").click(function(){
            $(".list li:eq(2)").addClass("red");
            $(".list li").eq(3).addClass("blue");
        });

        //li한테 active 클래스 추가해주세요!!!
        $(".btn3").click(function(){
            $(".list li").addClass("active");
        });

         //모든 클래스를 제거해주세요!!!
         $(".btn4").click(function(){
            $(".list li").removeClass();
        });

        //원하는 클래스를 제거해주세요!!!
        $(".btn5").click(function(){
            $(".list li").removeClass("list4");
        });

        //클래스를 번호대로 순서대로 추가시켜주세요!!!
        $(".btn6").click(function(){
            $(".list li").addClass(function(index){
                return "active" + (index + 1);
            });
        });

        //원하는 클래스를 찾아서 클래스를 추가합니다.
        $(".btn7").click(function(){
            $(".list li").addClass(function(index, currentClass){
                var addClass;

                if( currentClass === "list5"){
                    addClass = "blue"
                }
                
                return addClass;
            });
        });

    </script>

</body>
</html>
addClass를 이용한 탭메뉴 View
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JQuery</title>
    <style>
        *{margin: 0; padding: 0%;}
        li {list-style: none;}
        a {text-decoration: none; color: #666;}
        .tab-menu {width: 350px; margin: 100px auto;}
        .tab-btn ul {overflow: hidden;}
        .tab-btn li {float: left; width: 20%; text-align: center;}
        .tab-btn li a {display: block; background: #1e88e5; padding: 14px 10px 10px 10px; color: #fff;}
        #tab-cont {width: 350px; height: 350px;}
        #tab-cont.img1 {background: url(../img/next02@2x.jpg); background-size: 350px;}
        #tab-cont.img2 {background: url(../img/next03@2x.jpg); background-size: 350px;}
        #tab-cont.img3 {background: url(../img/next04@2x.jpg); background-size: 350px;}
        #tab-cont.img4 {background: url(../img/next05@2x.jpg); background-size: 350px;}
        #tab-cont.img5 {background: url(../img/next06@2x.jpg); background-size: 350px;}
    </style>
    
</head>
<body>
    <div class="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>

    <!--jquery-->
    <script src="jquery-1.12.4.min.js"></script>
    <script>
        //글씨를 클릭하면 tab --> menu  모두 변경해주세요!!
        $(".tab-btn li").click(function(){
            $(".tab-btn li").find("a").text("Menu");
        });

        //글씨를 클릭하면 tab --> menu  클릭한 것만 변경해주세요!!
        $(".tab-btn li").click(function(){
            $(this).find("a").text("Menu");
        });

        //글씨를 클릭하면 tab --> menu1 변경해주세요!!
        $(".tab-btn li").click(function(){
            let target = $(this);
            let index = target.index()+1;
            target.find("a").text("Menu"+index);
        });

        //해당 버튼을 클릭하면 해당 이미지 클래스가 나오게 설정해주세요!!
        $(".tab-btn li").click(function(e){
            e.preventDefault();
            let target = $(this);
            let index = target.index() + 1;
            target.find("a").text("menu"+index);
            $("#tab-cont").removeClass().addClass("img"+index);
        });
    </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">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JQuery</title>
    <style>
        .red {font-size: 90%; color: #c7254e; white-space: normal; background: #f9f2f4; border: 1px solid #a51a3d; border-radius: 4px; padding: 2px 6px 2px 6px;}
        .blue {font-size: 90%; color: #3d90b7; white-space: normal; background: #e7f6fd; border: 1px solid #3d90b7; border-radius: 4px; padding: 2px 6px 2px 6px;}
    </style>
</head>
<body>
    <div class="list">
        <ul>
            <li class="list1">list1</li>
            <li class="list2">list2</li>
            <li class="list3">list3</li>
            <li class="list4">list4</li>
            <li class="list5">list5</li>
            <li class="list6">list6</li>
            <li class="list7">list7</li>
            <li class="list8">list8</li>
            <li class="list9">list9</li>
            <li class="list10">list10</li>
        </ul>
    </div>
    <p class="desc"></p>
    <button class="btn1">클릭하면 글씨 색을 가져옵니다.</button>
    <button class="btn2">클릭하면 폰트 사이즈를 가져옵니다.</button>
    <button class="btn3">클릭하면 글씨의 모든 속성을 가져옵니다.</button>

    <button class="btn4">글씨 확대하기</button>
    <button class="btn5">글씨 축소하기</button>
    
    <!--jquery-->
    <script src="jquery-1.12.4.min.js"></script>
    <script>
        //버튼을 클릭하면 글씨 색을 빨간색으로 변경
        $(".btn1").click(function(){
            $(".list li").css("color","red")
        });

        //버튼을 클릭하면 글씨 색을 빨간색으로 변경
        $(".btn1").click(function(){
            const value = $(".list li").css("color");
            $(".desc").text("이 폰트 색은 "+value);
        });

        //버튼을 클릭하면 폰트 사이즈를 가져와서 출력
        $(".btn2").click(function(){
            const value = $(".list li").css("font-size");
            $(".desc").text("이 폰트 사이즈는 "+value);
        });

        //클릭하면 글씨의 모든 속성을 가져옵니다.
    $(".btn3").click(function(){
        const html = ["이 글씨의 속성은 : "]
        const value = $(".list li").css(["color","font-size","display","text-align","list-style-type"]);

        $.each( value, function(prop, value){
            html.push(prop +";"+ value);
        });

        $(".desc").html( html.join("<br>"));
    });

    //글씨 확대하기
    $(".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>
tab메뉴 View
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JQuery</title>
    <style>
        *{margin: 0; padding: 0%;}
        *{margin: 0; padding: 0%;}
        li {list-style: none;}
        a {text-decoration: none; color: #666;}
        #tab-menu {width: 350px; margin: 100px auto;}
        #tab-btn ul {overflow: hidden;}
        #tab-btn li {float: left; width: 20%; text-align: center;}
        #tab-btn li a {display: block; background: #1e88e5; padding: 14px 10px 10px 10px; color: #fff;}
        #tab-cont {overflow: hidden; width: 350px; height: 350px;}
        #tab-cont img {width: 100%; display: block;}

        #tab-btn li.active a {background: aqua; color: #1e88e5;}
    </style>
    
</head>
<body>
    <div id="tab-menu">
        <div id="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">
            <div><img src="../img/next02@2x.jpg" alt=""></div>
            <div><img src="../img/next03@2x.jpg" alt=""></div>
            <div><img src="../img/next04@2x.jpg" alt=""></div>
            <div><img src="../img/next05@2x.jpg" alt=""></div>
            <div><img src="../img/next06@2x.jpg" alt=""></div>
    </div>
    </div>

    <!--jquery-->
    <script src="jquery-1.12.4.min.js"></script>
    <script>
        const tBtn = $("#tab-btn > ul > li");
        const tCont = $("#tab-cont > div")

        tBtn.click(function(){
            let target = $(this);
            let index = target.index();
            tBtn.removeClass("active");
            target.addClass("active");

            tCont.css("display","none");
            tCont.eq(index).css("display","block");
        });
    </script>

</body>
</html>

Dimensions

메서드 설명
.height() 선택한 요소의 높이(패딩/마진/보더 불포함)를 설정하거나 반환합니다.
.innerHeight() 선택한 요소의 높이(패딩 포함, 보더/마진 불포함)를 설정하거나 반환합니다.
.innerWidth() 선택한 요소의 가로(패딩 포함, 보더/마진 불포함)를 설정하거나 반환합니다.
.outerHeight() 선택한 요소의 높이(패딩/보더 포함, 마진 불포함)를 설정하거나 반환합니다.
.outerWidth() 선택한 요소의 가로(패딩/보더 포함, 마진 불포함)를 설정하거나 반환합니다.
.width() 선택한 요소의 가로(패딩/마진/보더 불포함)를 설정하거나 반환합니다.
Dimensions View
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JQuery</title>
</head>
<body>

    <div class="list">
        <ul>
            <li class="list1">list1</li>
            <li class="list2">list2</li>
            <li class="list3">list3</li>
            <li class="list4">list4</li>
            <li class="list5">list5</li>
            <li class="list6">list6</li>
            <li class="list7">list7</li>
            <li class="list8">list8</li>
            <li class="list9">list9</li>
            <li class="list10">list10</li>
        </ul>
    </div>

    <p class="desc"></p>

    <button class="btn1">btn1</button>
    <button class="btn2">btn2</button>
    <button class="btn3">btn3</button>
    <button class="btn4">btn4</button>
    <button class="btn5">btn5</button>
    <button class="btn6">btn6</button>

    <!--jquery-->
    <script src="jquery-1.12.4.min.js"></script>
    <script>

        //버튼1을 클릭하면 하이트 값 가져오기
        function showHeight(element, height){
            $(".desc").text(element +"의 하이트 값은 : "+ height + "px 입니다.");
        }

        $(".btn1").click(function(){
            showHeight("리스트", $(".list li").height());
        });

        $(".btn2").click(function(){
            showHeight("리스트 집합", $(".list").height());
        });

        $(".btn3").click(function(){
            showHeight("문서", $(document).height());
        });

        $(".btn4").click(function(){
            showHeight("브라우저", $(window).height());
        });

        $(".btn5").click(function(){
            $(".list li").height(50).css("border","1px dashed #f00");
        });

        $(".btn6").click(function(){
            $(".list li").height(function(index){
                return (index + 1) * 20;
            }).css("border","1px dashed #f00");
        });

    </script>

</body>
</html>
innerHeight, innerWidth View
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JQuery</title>
    <style>
        .red > li {font-size: 90%; color: #c7254e; white-space: normal; background: #f9f2f4; border: 1px dashed #a51a3d; border-radius: 4px; padding: 10px; margin: 10px;}
        .blue {font-size: 90%; color: #3d90b7; white-space: normal; background: #e7f6fd; border: 1px dashed #3d90b7; border-radius: 4px; padding: 10px; margin: 10px;}
    </style>
</head>
<body>

    <div class="list">
        <ul class="red">
            <li class="list1">list1</li>
            <li class="list2">list2</li>
            <li class="list3">list3</li>
            <li class="list4">list4</li>
            <li class="list5">list5</li>
            <li class="list6">list6</li>
            <li class="list7">list7</li>
            <li class="list8">list8</li>
            <li class="list9">list9</li>
            <li class="list10">list10</li>
        </ul>
    </div>

    <p class="desc"></p>

    <button class="btn1">btn1</button>
    <button class="btn2">btn2</button>
    <button class="btn3">btn3</button>

    <!--jquery-->
    <script src="jquery-1.12.4.min.js"></script>
    <script>
        //
        function he(el, height){
            $(".desc").text(el + "은" + height + "px");
        };
        $(".btn1").click(function(){
            const h = $(".list li").height();
            he("리스트의 height 값",h) 
        });

        $(".btn2").click(function(){
            const h = $(".list li").innerHeight();
            he("리스트 innerHeight 값",h) 
        });

        $(".btn3").click(function(){
            const h = $(".list li").outerHeight();
            he("리스트 outerHeight 값",h) 
        });
    </script>

</body>
</html>

Offset

메서드 설명
.offset() 선택한 요소의 위치 좌표 값(문서 기준)을 설정하거나 반환합니다.
.offsetParent() 선택한 요소의 부모 위치 좌표 값(문서 기준)을 설정하거나 반환합니다.
.position() 선택한 요소의 위치 좌표 값(기준점 기준)을 설정하거나 반환합니다.
.scrollLeft() 선택한 요소의 가로 스크롤 값을 설정하거나 반환합니다.
.scrollTop() 선택한 요소의 세로 스크롤 값을 설정하거나 반환합니다.
Offset View
<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JQuery</title>
    <style>
        .circle {
            width: 100px;
            height: 100px;
            line-height: 100px;
            color: #c7254e;
            background: #f9f2f4;
            border: 1px solid #c7254e;
            text-align: center;
            border-radius: 5px;
        }
    </style>
</head>

<body>

    <h1>offset</h1>

    <div class="circle">
        circle
    </div>

    <p class="desc">
        <span>offset().left : </span><span class="ol">0</span>px<br>
        <span>offset().top : </span><span class="ot">0</span>px<br>
        <span>position().left : </span><span class="pl">0</span>px<br>
        <span>position().top : </span><span class="pt">0</span>px<br>
    </p>

    <button class="btn1">Click</button>


    <!--jquery-->
    <script src="jquery-1.12.4.min.js"></script>
    <script src="jquery-ui-1.12.1.min.js"></script>
    <script>
        $(".desc .ol").text($(".circle").offset().left);
        $(".desc .ot").text($(".circle").offset().top);
        $(".desc .pl").text($(".circle").position().left);
        $(".desc .pt").text($(".circle").position().top);

        $(".circle").draggable({
            start: function () {
                $(".circle").css("borderRadius", "40px")
            },
            drag: function () {
                $(".circle").css("borderRadius", "100px")
                $(".desc .ol").text($(".circle").offset().left);
                $(".desc .ot").text($(".circle").offset().top);
                $(".desc .pl").text($(".circle").position().left);
                $(".desc .pt").text($(".circle").position().top);
            },
            stop: function () {
                $(".circle").css("borderRadius", "10px")
            }
        });

        $(".btn1").click(function(){
            $(".circle").offset({top: "500", left: "500"});
        });
    </script>

</body>

</html>
scroll View
<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JQuery</title>
    <style>
        *{margin: 0; padding: 0;}
        body {
            height: 10000px;
        }

        .rectangle {
            width: 100%;
            height: 400px;
            line-height: 400px;
            color: #c7254e;
            background: #f9f2f4;
            border: 1px solid #c7254e;
            text-align: center;
            border-radius: 5px;
            margin-bottom: 100px;
        }

        .rectangle .circle2 {
            position: absolute; left: 20px; top: 20px;
            width: 80px;
            height: 80px;
            line-height: 80px;
            color: #3d90b7;
            background: #e7f6fd;
            text-align: center;
            border: 1px solid #3d90b7;
            border-radius: 50%;
        }

        .circle {
            position: fixed; z-index: 1000;
            right: 20px;
            top: 20px;
            width: 80px;
            height: 80px;
            line-height: 80px;
            color: #3d90b7;
            background: #e7f6fd;
            text-align: center;
            border: 1px solid #3d90b7;
            border-radius: 50%;
        }
    </style>
</head>

<body>

    <h1>scroll</h1>

    <div class="circle">0</div>

    <div class="rectangle">
        rectangle
    </div>

    <div class="rectangle">rectangle2
        <div class="circle2">0</div>
    </div>

    <p class="desc">
        <span>rectangle scrollLeft() : </span><span class="rl">0</span>px<br>
        <span>rectangle scrollTop() : </span><span class="rt">0</span>px<br>
        <span>window scrollLeft() : </span><span class="wl">0</span>px<br>
        <span>window scrollTop() : </span><span class="wt">0</span>px<br>
    </p>

    <button class="btn1">Click</button>


    <!--jquery-->
    <script src="jquery-1.12.4.min.js"></script>
    <script src="jquery-ui-1.12.1.min.js"></script>

    <script>
        $(window).scroll(function(){
            $(".rl").text($(".rectangle").scrollLeft());
            $(".rt").text($(".rectangle").scrollTop());
            $(".wl").text($(window).scrollLeft());
            $(".wt").text($(window).scrollTop());

            let wScroll = $(window).scrollTop();
            let wOffset = $(".rectangle.r2").offset().top;

            $(".circle").text(wScroll);
            $(".circle2").text(wOffset);

            if(wScroll >= wOffset){
                $(".rectangle.r2").css("backgroundColor","black");
            } else {
                $(".rectangle.r2").css("backgroundColor","#f9f2f4");
            }
        });
    </script>

</body>

</html>

변경

메서드 설명
.wrap() 선택한 요소의 새로운 태그를 추가합니다.
.wrapAll() 선택한 모든 요소의 새로운 태그를 추가합니다.
.wrapInner() 선택한 각각의 요소의 새로운 태그를 추가합니다.
.append() 선택한 요소 마지막 위치에 새로운 요소를 추가합니다.
.appendTo() 선택한 타겟 마지막 위치에 새로운 요소를 추가합니다.
.html() 선택한 요소의 내부의 HTML을 읽거나 변경합니다.
.prepend() 선택한 요소 처음 위치에 새로운 요소를 추가합니다.
.prependTo() 선택한 타겟 처음 위치에 새로운 요소를 추가합니다.
.text() 선택한 요소 내부의 텍스트를 읽거나 변경합니다.
.after() 선택한 요소 다음에 새로운 요소를 추가합니다.
.before() 선택한 요소 이전에 새로운 요소를 추가합니다.
.insertAfter() 선택한 타겟 요소 다음에 새로운 요소를 추가합니다.
.insertBefore() 선택한 타겟 요소 이전에 새로운 요소를 추가합니다.
.datach() 선택한 요소(데이터 및 이벤트 불포함)를 제거합니다.
.empty() 선택한 요소 하위 요소를 제거합니다.
.remove() 선택한 요소(데이터 및 이벤트 포함)를 제거합니다.
.unwrap() 선택한 요소의 부모 요소를 제거합니다.
.clone() 선택한 요소 복사본을 만듭니다.
.replaceAll() 선택한 요소를 새로운 요소로 바꿉니다.
.replaceWith() 선택한 요소를 새로운 컨텐츠로 바꿉니다.
변경 View
<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JQuery</title>
</head>

<body>
    <div class="list">
        <p>replaceWith() : 선택한 요소를 새로운 컨텐츠로 바꿉니다.</p>
        <p>replaceAll() : 선택한 요소를 새로운 요소로 바꿉니다.</p>
        <p>clone() : 선택한 요소 복사본을 만듭니다.</p>
        <p>unwrap() : 선택한 요소의 부모 요소를 제거합니다.</p>
        <p>remove() : 선택한 요소(데이터 및 이벤트 포함)를 제거합니다.</p>
        <p>empty() : 선택한 요소 하위 요소를 제거합니다.</p>
    </div>

    <button class="btn1">wrap</button>
    <button class="btn2">unwrap</button>
    <button class="btn3">append()</button>
    <button class="btn4">prepend()</button>
    <button class="btn5">before()</button>
    <button class="btn6">after()</button>

    <!--jquery-->
    <script src="jquery-1.12.4.min.js"></script>
    <script>
        $(".btn1").click(function () {
            $(".list p").wrap("<div></div>")
        });

        $(".btn2").click(function () {
            $(".list p").unwrap("<div></div>")
        });

        $(".btn3").click(function () {
            $(".list").append("<p>.detach() : 선택한 요소(데이터 및 이벤트 불포함)를 제거합니다.</p>")
        });

        $(".btn4").click(function () {
            $(".list").prepend("<p>.insertBefore() : 선택한 타겟 요소 이전에 새로운 요소를 추가합니다.</p>")
        });

        $(".btn5").click(function () {
            $(".list p:nth-child(2)").before("<p>before</p>")
        });

        $(".btn6").click(function () {
            $(".list p:nth-child(2)").after("<p>after</p>")
        });
    </script>

</body>

</html>
이미지 View
<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JQuery</title>
    <style>
        .list li {display: inline;}
        .list li img {width: 300px;}
    </style>
</head>

<body>

    <h3>이미지</h3>
    <div class="list">
        <ul>
            <li><img src="../img/next01@2x.jpg" alt="이미지"></li>
            <li><img src="../img/next02@2x.jpg" alt="이미지"></li>
            <li><img src="../img/next03@2x.jpg" alt="이미지"></li>
            <li><img src="../img/next04@2x.jpg" alt="이미지"></li>
            <li><img src="../img/next05@2x.jpg" alt="이미지"></li>
        </ul>
    </div>

    <button class="btn1">클릭하면 리스트 위쪽에 이미지가 추가됩니다.</button>
    <button class="btn2">클릭하면 리스트 앞쪽에 이미지가 추가됩니다.</button>
    <button class="btn3">클릭하면 리스트 앞쪽에 이미지가 삭제됩니다.</button>
    <button class="btn4">클릭하면 리스트 뒤쪽에 이미지가 삭제됩니다.</button>
    <button class="btn5">클릭하면 리스트 뒤쪽에 이미지를 랜덤으로 추가합니다.</button>

    <!--jquery-->
    <script src="jquery-1.12.4.min.js"></script>
    <script>
        $(".btn1").click(function(){
            $(".list ul").append("<li><img src='../img/next01@2x.jpg' alt='이미지'></li>")
        });

        $(".btn2").click(function(){
            $(".list ul").prepend("<li><img src='../img/next01@2x.jpg' alt='이미지'></li>")
        });

        $(".btn3").click(function(){
            $(".list ul li:first").remove()
        });

        $(".btn4").click(function(){
            $(".list ul li:last").remove()
        });

        //이미지가 랜덤으로 나오는 함수
        function random(){
            let imgNum = Math.ceil(Math.random()*9)
            // alert(imgNum)
            let imgPath = "<li><img src='../img/next0"+imgNum+"@2x.jpg' alt='이미지"+imgNum+"'></li>";
            return imgPath;
        }

        $(".btn5").click(function(){
            $(".list ul").append(random)
        });

    </script>

</body>

</html>
랜덤이미지 View
<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JQuery</title>
    <style>
        .list li {display: inline;}
        .list li img {width: 300px;}
    </style>
</head>

<body>

    <h3>이미지</h3>
    <div class="list">
        <ul>
            <li><img src="../img/next01@2x.jpg" alt="이미지"></li>
            <li><img src="../img/next02@2x.jpg" alt="이미지"></li>
            <li><img src="../img/next03@2x.jpg" alt="이미지"></li>
            <li><img src="../img/next04@2x.jpg" alt="이미지"></li>
            <li><img src="../img/next05@2x.jpg" alt="이미지"></li>
        </ul>
    </div>

    <button class="btn1">클릭하면 2초에 한번씩 이미지를 이동시킵니다.</button>
    <button class="btn2">정지</button>

    <!--jquery-->
    <script src="jquery-1.12.4.min.js"></script>
    <script>
        let timer;

        $(".btn1").click(function(){
            timer = setInterval(function(){
                $(".list li").last().prependTo(".list ul");
            }, 2000);
        });

        $(".btn2").click(function(){
            clearInterval(timer);
        });
    </script>

</body>

</html>

에니메이션

유형 메서드 설명
Basic .hide() 선택한 요소를 숨깁니다.
.show() 선택한 요소를 보여줍니다.
.toggle() 선택한 요소를 숨김/보여줍니다.
Fading .fadeIn() 선택한 요소를 천천히 보여줍니다.
.fadeOut() 선택한 요소를 천천히 숨김니다.
.fadeto() 선택한 요소를 투명도를 조절합니다.
.fadeToggle() 선택한 요소를 천천히 숨김/보여줍니다.
Sliding .slideDown() 선택한 요소를 슬라이딩으로 보여줍니다.
.slideToggle() 선택한 요소를 슬라이딩으로 숨김/보여줍니다.
.slideUp() 선택한 요소를 슬라이딩으로 숨김니다.
custom .animate() 선택한 요소에 애니메이션을 적용합니다.
.clearQueue() 선택한 요소에 첫 번째 큐만 실행하고 대기 중인 큐는 모두 삭제합니다.
.delay() 선택한 요소의 애니메이션 효과를 지연합니다.
.dequeue() 선택한 요소 스택에 쌓인 큐를 모두 제거합니다.
.finish() 선택한 요소의 진행중인 애니메이션을 강제로 종료합니다.
.queue() 선택한 요소 스택에 대기 중인 큐를 반환하거나 추가할 수 있습니다.
.stop() 선택한 요소의 실행중인 애니메이션을 정지합니다.
$("selector").animate(properties);
$("selector").animate(properties, duration);
$("selector").animate(properties, duration, easing);
$("selector").animate(properties, duration, easing, collback);
properties에 올 수 있는 값:
border, margin, padding, height, width, font-size, bottom, left, top, right, line-height
properties에 올 수 없는 값:
background-color, transform
//폰트 사이트를 현재 크기에서 20px로 2초 동안 애니메이션 합니다.
$("selector").animate({ "font-size" : "20px" },2000);
$("selector").animate({ font-size : "20px" },2000);
//선택한 요소의 왼쪽 오른쪽 마진값을 100px로 600밀리세컨드 동안 애니메이션합니다.
$("selector").animate({ marginLeft : 100, marginRight: 100 },600);
$("selector").animate({ "margin-left" : "100px", "margin-right" : "100px" }, slow);
//선택한 요소의 현재 위치를 기준으로 오른쪽으로 2초마다 20px만큼 이동한 후, 콜백함수를 호출합니다.
$("selector").animate({ left : "+=20" }, 2000, function(){});

animate()

기본적인 애니메이션입니다. Start

circle1
$("a[class='btn']").click(function(e){
    e.preventDefault();
})

$(".btn1").click(function(){
    $(".circle1").animate({"left" : "80%"}, 1000)
    .animate({"top" : "50%"}, 1000)
    .animate({"left" : "0%"}, 1000)
    .animate({"top" : "0%"}, 1000)
});

easing

움직임 효과입니다.

linear swing easeInQuad easeOutQuad easeInOutQuad easeInCubic easeOutCubic easeInOutCubic easeInQuart easeOutQuart easeInOutQuart easeInQuint easeOutQuint easeInOutQuint easeInSine easeOutSine easeInOutSine easeInExpo easeOutExpo easeInOutExpo easeInCirc easeOutCirc easeInOutCirc easeInElastic easeOutElastic easeInOutElastic easeInBack easeOutBack easeInOutBack easeInBounce easeOutBounce easeInOutBounce

circle2
$(".btn-wrap > span").click(function(){
    let easing = $(this).text();
    // alert(easing);
    let easing2 = $(this).attr("data-easing")
    // alert(easing2);

    $(".circle2")
    .animate({"left" : "80%"}, 1000, easing)
    .animate({"top" : "50%"}, 1000, easing)
    .animate({"left" : "0%"}, 1000, easing)
    .animate({"top" : "0%"}, 1000, easing)
});

.delay()

딜레이 효과입니다.Start

circle3
circle3
circle3
circle3
$(".btn3").click(function(){
    $(".circle3").eq(0).delay(100).animate({ left : "90%" }, 1000, "easeInEalstic").animate({ left: "0%"}, 1000);
    $(".circle3").eq(1).delay(200).animate({ left : "90%" }, 1000, "easeInEalstic").animate({ left: "0%"}, 1000);
    $(".circle3").eq(2).delay(300).animate({ left : "90%" }, 1000, "easeInEalstic").animate({ left: "0%"}, 1000);
    $(".circle3").eq(3).delay(400).animate({ left : "90%" }, 1000, "easeInEalstic").animate({ left: "0%"}, 1000);
});

.stop()

정지 효과입니다. Start Stop Back

circle4
$(".btn4-1").click(function(){
    $(".circle4")
    .animate({"left" : "80%"}, 1000)
    .animate({"top" : "50%"}, 1000)
    .animate({"left" : "0%"}, 1000)
    .animate({"top" : "0%"}, 1000)
});

$(".btn4-2").click(function(){
    $(".circle4").stop();
});
$("selector").stop(clearQueue, goToEnd)
clearQueue : 큐에 대기 중인 효과들을 삭제할 것인지 여부를 설정 goToEnd : 진행 중인 애니메이션을 완료할 것인지를 결정
.stop(true, true) : 일단 현재 진행되고 있는 효과는 정지되면서 효과의 맨 마지막으로 이동한 후 큐에 남아 있는 효과는 모두 지우고 끝냅니다. .stop(true, false) : 일단 현재 진행되고 있는 효과는 즉시 그 지점에서 정지되고 남아있는 효과는 모두 지우고 끝냅니다. .stop(false, true) : 일단 현재 진행되고 있는 효과는 정지되면서 맨 마지막으로 즉시 이동한 후 큐에 남아있는 효과를 수행합니다. .stop(false, false) : 일단 현재 진행되고 있는 효과는 즉시 그 지점에서 정지되고 큐에 남아 있는 효과를 수행합니다.

정지 효과입니다. Stop stop(true, true) stop(true, false) stop(false, true) stop(false, false)

circle5
circle5
circle5
circle5
$(".box5 > div").css({"position" : "relative", "margin-bottom" : "10px"});
$(".btn5-1").click(function(){
    $(".box5 > div").animate({left : "90%"},2000, "easeOutCirc").animate({left : "0%"},2000, "easeOutCirc")
});
$(".btn5-2").click(function(){
    $(".circle5-1").stop(true, true)
});
$(".btn5-3").click(function(){
    $(".circle5-2").stop(true, false)
});
$(".btn5-4").click(function(){
    $(".circle5-3").stop(false, true)
});
$(".btn5-5").click(function(){
    $(".circle5-4").stop(false, false)
});

.animation( - width

정지 효과입니다. Start

circle
$(".btn6").click(function(){
    $(".circle6")
    .animate({ left : "80%", width: "150px"}, 1000, "easeOutCirc")
    .slideUp().slideDown()
    .animate({ top : "60%", borderRadius : "50%" }, 1000)
    .animate({ left : "0%", width: "70px"}, 1000, "easeOutCirc")
    .animate({ top : "0",  borderRadius : "0%"}, 1000)
});

무한 애니메이션

무한 반복 애니메이션 효과입니다. Start

circle7
$(".btn7").click(function(){
    loop();
});
function loop(){
    $(".circle7").animate({left : "85%" },1000,"easeOutQuint").animate({left : "0%" },1000,"easeOutQuint",loop);
}

일정한 시간

일정한 시간동안만 움직이는 애니메이션 효과입니다. Start

circle8
$(".btn8").click(function(){
    setInterval(time,4000)
});
function time(){
    $(".circle8").animate({left : "+=100px" },500,"easeOutQuint").animate({left : "-=50px" },500,"easeOutQuint");
}

사라지는 애니메이션

일정한 시간이 지나면 사라지는 애니메이션 효과입니다. Start

circle9
$(".btn9").click(function(){
    $(".circle9").animate({left : "85%" },1000,"easeOutQuint").animate({left : "0%" },1000,"easeOutQuint");
    setTimeout(out, 2000);
});
function out(){
    $(".circle9").clearQueue().hide()
}

이벤트

변경 View

Ajax