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

제이쿼리 언어의 특징

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

제이쿼리 사용방법

jQuery 라이브러리는 jQuery 공식 사이트에서 다운 받을 수 있습니다.

다운 받아서 사용하는 방법
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>jQuery</title>
    
    <!-- 제이쿼리 3.x 버전 -->
    <script type="text/javascript" src="assets/js/jquery-3.3.1.min.js"></script>
    
    <!-- 제이쿼리 2.x 버전 -->
    <script type="text/javascript" src="assets/js/jquery-2.2.4.min.js"></script>
    
    <!-- 제이쿼리 1.x 버전 -->
    <script type="text/javascript" src="assets/js/jquery-1.12.4.min.js"></script>

    <!-- 제이쿼리 UI 버전 -->
    <script type="text/javascript" src="assets/js/jquery-ui-1.12.1.min.js"></script>
</head>
<body>
    
</body>
</html>
구글 CDN(Content Delivery Network) 사용하는 방법
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>jQuery</title>
    
    <!-- 제이쿼리 3.x 버전 -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    
    <!-- 제이쿼리 2.x 버전 -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
    
    <!-- 제이쿼리 1.x 버전 -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

    <!-- 제이쿼리 UI 버전 -->
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
</head>
<body>
    
</body>
</html>
제이쿼리 위치 View
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>jquery</title>
    
    <!-- head 안에 사용하는 경우 -->
    <script type="text/javascript" src="assets/js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        // 제이쿼리 사용 영역
    </script>
</head>
<body>
    
    
    <!-- body 안에 사용하는 경우 -->
    <script type="text/javascript" src="assets/js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        // 제이쿼리 사용 영역
    </script>
</body>
</html>
제이쿼리 준비 View
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>jquery</title>
    
    <!-- 제이쿼리 사용 준비 -->
    <script type="text/javascript" src="assets/js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        jQuery(document).ready(function(){
            //실행 코드
        });
    </script>
    
    <!-- jQuery 키워드를 $로 치환 -->
    <script type="text/javascript">
        $(document).ready(function(){
            //실행 코드
        });
    </script>
    
    <!-- 단축해서 사용 -->
    <script type="text/javascript">
        $(function(){
            //실행 코드
        });
    </script>
    
    <!-- 자바스크립트 사용 준비 -->
    <script type="text/javascript">
        window.onload = function(){
            //실행 코드
        };
    </script>
</head>
<body>
    
</body>
</html>
제이쿼리를 사용하는 이유 View
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Jquery</title>
    <style>
        /* CSS : 첫번째 리스트 색을 변경 */
        #list1 li {color: #F00;}
    </style>
    <script type="text/javascript">
        //자바스크립트 : 두번째 리스트 색을 변경
        window.onload = function(){
            var list2 = document.getElementById("list2");      //#list2 찾아서 변수에 할당
            var liList = list2.getElementsByTagName("li");     //list2에서 li 태그를 찾아 변수에 할당
            for(var i = 0; i < liList.length; i++){            //li태그를 하나씩 접근해서
                var li =  liList[i];                           //배열로 할당해서 변수에 저장
                li.style.color = "#0f0";
            }
        };
    </script>
    
    <script type="text/javascript" src="assets/js/jquery-1.12.4.min.js"></script>
    <script>
        //제이쿼리 : 세번째 리스트 색을 변경
        $(document).ready(function(){
            $("#list3 li").css("color","#00f");
        });
    </script>
</head>
<body>
    
    <h1>jquery</h1>
    <div>
        <ul id="list1" class="list">
            <li class="one1">one1</li>
            <li class="one2">one2</li>
            <li class="one3">one3</li>
            <li class="one4">one4</li>
            <li class="one5">one5</li>
            <li class="one6">one6</li>
            <li class="one7">one7</li>
            <li class="one8">one8</li>
            <li class="one9">one9</li>
            <li class="one10">one10</li>
        </ul>
        <ul id="list2" class="list">
            <li class="one1">one1</li>
            <li class="one2">one2</li>
            <li class="one3">one3</li>
            <li class="one4">one4</li>
            <li class="one5">one5</li>
            <li class="one6">one6</li>
            <li class="one7">one7</li>
            <li class="one8">one8</li>
            <li class="one9">one9</li>
            <li class="one10">one10</li>
        </ul>
        <ul id="list3" class="list">
            <li class="one1">one1</li>
            <li class="one2">one2</li>
            <li class="one3">one3</li>
            <li class="one4">one4</li>
            <li class="one5">one5</li>
            <li class="one6">one6</li>
            <li class="one7">one7</li>
            <li class="one8">one8</li>
            <li class="one9">one9</li>
            <li class="one10">one10</li>
        </ul>
    </div>            
    
    
    <!-- script -->
    <script type="text/javascript" src="assets/js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        
    </script>
</body>
</html>
종류 예시 설명
태그 선택자 $("p") 기본 태그를 선택합니다.
클래스 선택자 $(".class") 클래스 태그를 선택합니다.
아이디 선택자 $("#id") 아이디 태그를 선택합니다.
그룹 선택자 $("p, .class, #id") 여러가지 태그를 선택합니다.
전체 선택자 $("*") 전체 태그를 선택합니다.
종류 예시 설명
자손 선택자 $("div li") 자식(하위) 태그 모두 선택합니다.
child 선택자 $("div > p") 자식(하위) 태그만 선택합니다.(자손은 포함안됨)
sibling 선택자 $("div + p") 자식 태그 다음 형제 태그를 선택합니다.
siblings 선택자 $("div ~ li") 자식 태그 다음 모든 형제태그를 선택합니다.
종류 예시 설명
[name="value"] $("li a[href='#page']") 속성 중에 #page와 일치하는 태그를 선택합니다.
[name^="value"] $("li a[href^='http']") 속성 중에 http로 시작하는 태그를 선택합니다.
[name$="value"] $("li a[href$='.com']") 속성 중에 .com로 끝나는 태그를 선택합니다.
[name*="value"] $("li a[href*='web']") 속성 중에 "web"가 포함되어 있는 태그를 선택합니다.
[name!="value"] $("li a[href!='naver.com']") 속성 중에 naver.com와 일치하지 않는 태그를 선택합니다.
[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() 현재 선택한 요소의 반대 요소를 선택합니다.
종류 설명
:contains() ()안의 텍스트와 일치하는 문자열이 요소의 내용 중에 있을 때 그 요소를 반환합니다.
:empty 요소에 텍스트 없을 때 선택됩니다.
:has() 요소 내부에서 찾고 싶은 태그를 후손 요소까지 살펴본 후 요소가 있으면 반환합니다.
:parent empty와 반대로 요소에 텍스트가 존재할 때에 선택됩니다.
종류 설명
:hidden 보이지 않는 요소를 선택합니다.
:visible 보이는 요소를 선택합니다.

컨텐츠를 보이지 않게 하는 방법

  • display:none
  • opacity:0;
  • visibility: hidden
  • width:0; height:0;
  • form 요소 중에 type="hidden"
  • 부모요소가 보이지 않거나 숨겨져 있을 때

visibility: hidden이나 opacity:0;은 위치가 제거되지 않았기 때문에 :hidden 선택자에게 선택되지 않습니다.

종류 설명
:first-child 첫 번째 자식 요소를 선택합니다.
:last-child 마지막 번째 자식 요소를 선택합니다.
:first-of-type 자식 중 첫 번째 유형의 자식요소를 선택합니다.
:last-of-type 자식 중 마지막 번째 유형의 자식요소를 선택합니다.
:nth-child(index) index번째에 있는 자식 요소를 선택합니다.
:nth-child(even) 짝수번째에 있는 자식 요소를 선택합니다.
:nth-child(odd) 홀수번째에 있는 자식 요소를 선택합니다.
:nth-child(2n) 2배수 번째에 있는 자식 요소를 선택합니다.
:nth-child(2n+1) 2배수+1 번째에 있는 자식 요소를 선택합니다.
:nth-last-child(index) index 번째에 있는 마지막 자식 요소를 선택합니다.
:nth-last-of-type(index) index 번째에 있는 마지막 유형의 자식 요소를 선택합니다.
:only-child 자식 요소가 오직 하나인 요소를 선택합니다.
:only-child-type 자식 요소가 오직 하나 유형인 요소를 선택합니다.
종류 설명
:input 모든 입력 양식을 선택합니다.
:file 파일 업로드 양식을 선택합니다.
:hidden 숨겨진 입력 양식을 선택합니다.
:image 이미지 입력 양식을 선택합니다.
:password 암호 입력 양식을 선택합니다.
:radio 라디오 버튼 입력 양식을 선택합니다.
:reset 리셋 입력 양식을 선택합니다.
:submit 데이터 보내기 입력 양식을 선택합니다.
:text 텍스트 박스 양식을 선택합니다.
선택자 View
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>jQuery</title>
    <style>
        li {margin: 1px;}
    </style>
</head>
<body>
    <h1>jquery</h1>
    <div id="sample">
        <ul id="list1" class="list">
            <li class="one1"><a href="#list3">one1</a></li>
            <li class="one2"><a href="https://www.naver.com">one2</a></li>
            <li class="one3"><a href="https://www.daum.net">one3</a></li>
            <li class="one4"><a href="https://webstoryboy.co.kr" target="_blank">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>one10-1</li>
                    <li>one10-2</li>
                    <li>one10-3</li>
                    <li>one10-4</li>
                    <li>one10-5</li>
                </ul>
            </li>
        </ul>
        <ul id="list2" class="list">
            <li class="one1"><a href="#list3">one1</a></li>
            <li class="one2"><a href="https://www.naver.com">one2</a></li>
            <li class="one3"><a href="https://www.daum.net">one3</a></li>
            <li class="one4"><a href="https://webstoryboy.co.kr" target="_blank">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>
                <ul>
                    <li>one10-1</li>
                    <li>one10-2</li>
                    <li>one10-3</li>
                    <li>one10-4</li>
                    <li>one10-5</li>
                </ul>
            </li>
        </ul>
        <ul id="list3" class="list">
            <li class="one1"><a href="#list3">one1</a></li>
            <li class="one2"><a href="https://www.naver.com">one2</a></li>
            <li class="one3"><a href="https://www.daum.net">one3</a></li>
            <li class="one4"><a href="https://webstoryboy.co.kr" target="_blank">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="#"></a></li>
            <li class="one9"><a href="#">one9</a></li>
            <li class="one10"><a href="#">one10</a>
                <ul>
                    <li>one10-1</li>
                    <li style="width:0; height:0; overflow: hidden">one10-2</li>
                    <li style="opacity:0">one10-3</li>
                    <li style="visibility:hidden;">one10-4</li>
                    <li style="display:none">one10-5</li>
                </ul>
            </li>
        </ul>
        <ul>
            <li class="one1"><a href="#">one1</a></li>
        </ul>
    </div>   
    
    <script type="text/javascript" src="assets/js/jquery-1.12.4.min.js"></script>
    <script>
        
        //$("li").css("background-color","#bbdefb");
        //$("li").css({"background-color":"#bbdefb", "border":"1px dashed #303f9f"});
        //기본 선택자
        //$("li").css({backgroundColor:"#bbdefb", border:"1px dashed #303f9f"});
        //$(".one3").css({backgroundColor:"#bbdefb", border:"1px dashed #303f9f"});
        //$("#list2").css({backgroundColor:"#bbdefb", border:"1px dashed #303f9f"});
        //$("*").css({backgroundColor:"#bbdefb", border:"1px dashed #303f9f"});
        //$(".one3, .one5").css({backgroundColor:"#bbdefb", border:"1px dashed #303f9f"});
        
        //계층 선택자
        //$(".list > li").css({backgroundColor:"#bbdefb", border:"1px dashed #303f9f"});
        //$(".list > li").css({backgroundColor:"#bbdefb", border:"1px dashed #303f9f"});
        //$(".one4 + li").css({backgroundColor:"#bbdefb", border:"1px dashed #303f9f"});
        //$(".one4 ~ li").css({backgroundColor:"#bbdefb", border:"1px dashed #303f9f"});
        
        //속성 선택자
        //$("li a[href='#list3']").css({backgroundColor:"#bbdefb", border:"1px dashed #303f9f", display:"block"});
        //$("li a[href^='https']").css({backgroundColor:"#bbdefb", border:"1px dashed #303f9f", display:"block"});
        //$("li a[href$='com']").css({backgroundColor:"#bbdefb", border:"1px dashed #303f9f", display:"block"});
        //$("li[class~='one4']").css({backgroundColor:"#bbdefb", border:"1px dashed #303f9f", display:"block"});
        //$("li a[href*='web']").css({backgroundColor:"#bbdefb", border:"1px dashed #303f9f", display:"block"});
        //$("li a[href|='web']").css({backgroundColor:"#bbdefb", border:"1px dashed #303f9f", display:"block"});
        //$("li a[href!='https://www.naver.com']").css({backgroundColor:"#bbdefb", border:"1px dashed #303f9f", display:"block"});
        //$("li a[href][target]").css({backgroundColor:"#bbdefb", border:"1px dashed #303f9f", display:"block"});
        
        //기본 필터 선택자
        //$("li:eq(4)").css({backgroundColor:"#bbdefb", border:"1px dashed #303f9f", display:"block"});
        //$("li:gt(4)").css({backgroundColor:"#bbdefb", border:"1px dashed #303f9f", display:"block"});
        //$("li:lt(4)").css({backgroundColor:"#bbdefb", border:"1px dashed #303f9f", display:"block"});
        //$(":header").css({backgroundColor:"#bbdefb", border:"1px dashed #303f9f", display:"block"});
        //$("li:first").css({backgroundColor:"#bbdefb", border:"1px dashed #303f9f", display:"block"});
        //$("li:last").css({backgroundColor:"#bbdefb", border:"1px dashed #303f9f", display:"block"});
        //$("li:even").css({backgroundColor:"#bbdefb", border:"1px dashed #303f9f", display:"block"});
        //$("li:even").css({backgroundColor:"#bbdefb", border:"1px dashed #303f9f", display:"block"});
        
        //내용 필터 선택자
        //$("li:contains('one5')").css({backgroundColor:"#bbdefb", border:"1px dashed #303f9f", display:"block"});
        //$("li a:empty").css({backgroundColor:"#bbdefb", border:"1px dashed #303f9f", display:"block"});
        //$("li:parent").css({backgroundColor:"#bbdefb", border:"1px dashed #303f9f", display:"block"});
        //$("li:has(li)").css({backgroundColor:"#bbdefb", border:"1px dashed #303f9f", display:"block"});
    
        //보임 필터 선택자
        //$("li:hidden").css({backgroundColor:"#bbdefb", border:"1px dashed #303f9f", display:"block"});
        //$("li:visible").css({backgroundColor:"#bbdefb", border:"1px dashed #303f9f", display:"block"});
           
        //자식요소 필터 선택자
        //$("li:first").css({backgroundColor:"#bbdefb", border:"1px dashed #303f9f", display:"block"});
        //$("li:first-child").css({backgroundColor:"#bbdefb", border:"1px dashed #303f9f", display:"block"});
        //$("li:last").css({backgroundColor:"#bbdefb", border:"1px dashed #303f9f", display:"block"});
        //$("li:last-child").css({backgroundColor:"#bbdefb", border:"1px dashed #303f9f", display:"block"});
        //$("li:nth-child(4)").css({backgroundColor:"#bbdefb", border:"1px dashed #303f9f", display:"block"});
        //$("li:nth-child(even)").css({backgroundColor:"#bbdefb", border:"1px dashed #303f9f", display:"block"});
        //$("li:nth-child(odd)").css({backgroundColor:"#bbdefb", border:"1px dashed #303f9f", display:"block"});
        //$("li:nth-child(2n+1)").css({backgroundColor:"#bbdefb", border:"1px dashed #303f9f", display:"block"});
        //$("li:nth-child(2n+4)").css({backgroundColor:"#bbdefb", border:"1px dashed #303f9f", display:"block"});
        //$("li:only-child").css({backgroundColor:"#bbdefb", border:"1px dashed #303f9f", display:"block"});
    </script>
</body>
</html>

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

탐색(Traversing)

유형 메서드 설명
트리구조 탐색(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() 선택한 요소의 필터링이 일어나기 이전의 요소를 선택합니다.
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>jQuery</title>
    <style>
        li {margin: 3px;}
        a {border: 1px solid #5f6368; padding: 7px 20px 5px 20px; display: inline-block;
        border-radius: 20px; text-decoration: none; color: #000; margin: 4px;}
        .on {background-color: #bbdefb; border: 1px dashed #303f9f;}
        .onRed {color: #c7254e; 
        white-space: nowrap; background-color:#f9f2f4; border-radius: 4px; 
        border-bottom: 1px dashed #a51a3d; }
    </style>
</head>
<body>
    <h1>탐색(Traversing)</h1>
    
    <div class="choice">
        <a href="#" class="off1">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">.nextUntil()</a>
        <a href="#" class="btn6">.prev()</a>
        <a href="#" class="btn7">.prevAll()</a>
        <a href="#" class="btn8">.prevUntil()</a>
        <a href="#" class="btn9">.parent()</a>
        <a href="#" class="btn10">.parentAll()</a>
        <a href="#" class="btn11">.parentUntil()</a>
        <a href="#" class="btn12">.siblings()</a>
        <a href="#" class="btn13">.closest()</a>
        <a href="#" class="btn14">"탐색" 단어 선택하기</a>
        <a href="#" class="btn15">"선택자" 단어 선택하기</a>
    </div>
    
    <div class="list">
        <ul>
            <li class="select">트리구조 탐색(Tree traversal)
                <ul>
                    <li class="list1">.children() : 선택한 요소의 바로 아래 자식 요소만 선택합니다.
                        <ul>
                            <li class="parent">여기는 두 번째 자식입니다.</li>
                            <li>여기는 두 번째 자식입니다.</li>
                            <li>여기는 두 번째 자식입니다.</li>
                        </ul>
                    </li>
                    <li>.closest() : 선택한 요소를 포함하면서 가장 가까운 상위 요소를 선택합니다.</li>
                    <li>.find() : 선택한 요소의 자식 요소 중 조건에 맞는 요소를 선택합니다.</li>
                    <li class="until">.next() : 선택한 요소를 다음 형제 요소를 선택합니다.</li>
                </ul>
            </li>
            <li class="select">필터링(Filtering)
                <ul>
                    <li class="until2">.eq(index) : 선택한 요소에 인덱스 번호에 해당하는 요소를 찾습니다.
                        <ul>
                            <li>여기는 두 번째 자식입니다.</li>
                            <li>여기는 두 번째 자식입니다.</li>
                            <li>여기는 두 번째 자식입니다.</li>
                        </ul>
                    </li>
                    <li>.filter() : 선택한 요소에서 선택하거나 함수를 사용할 수 있습니다.</li>
                    <li>.first() : 선택한 요소에서 첫 번째 자식을 선택합니다.</li>
                    <li class="list2">.has() : 선택한 요소의 자식 요소에서 주어진 선택자를 찾습니다.</li>
                </ul>
            </li>
        </ul>
        <p class="text">탐색은 제이쿼리의 선택자를 기준으로 선택한 요소에서 원하는 요소를 다시 한번 선택하는 메서드입니다. 탐색은 트리구조와 필어 영역으로 나눌 수 있으며 역할과 성질은 선택자와 비슷합니다.</p>
    </div>   
    
    <script type="text/javascript" src="assets/js/jquery-1.12.4.min.js"></script>
    <script>
       $(".choice .off1").click(function(){
           $("*").removeClass("on");
           $("*").removeClass("onRed");
       }); 
       $(".choice .btn1").click(function(){
           $(".list li").children().addClass("on");
       }); 
       $(".choice .btn2").click(function(){
           $(".list li").find("li").addClass("on");
       }); 
       $(".choice .btn3").click(function(){
           $(".list1").next().addClass("on");
       }); 
       $(".choice .btn4").click(function(){
           $(".list1").nextAll().addClass("on");
       }); 
       $(".choice .btn5").click(function(){
           $(".list1").nextUntil(".until").addClass("on");
       }); 
        
       $(".choice .btn6").click(function(){
           $(".list2").prev().addClass("on");
       });
       $(".choice .btn7").click(function(){
           $(".list2").prevAll().addClass("on");
       }); 
       $(".choice .btn8").click(function(){
           $(".list2").prevUntil(".until2").addClass("on");
       }); 
        
       $(".choice .btn9").click(function(){
           $(".parent").parent().addClass("on");
       });
       $(".choice .btn10").click(function(){
           $(".parent").parents().addClass("on");
       });
       $(".choice .btn11").click(function(){
           $(".parent").parentsUntil(".select").addClass("on");
       });
        
       $(".choice .btn12").click(function(){
           $(".list1").siblings().addClass("on");
       });
        
       $(".choice .btn13").click(function(){
           $(".list1").closest("li").addClass("on");
       });
        
       //텍스트를 span 요소로 감싼뒤 마우스 오버 효과를 줍니다.
       var text = $(".until").text().split(" ").join("</span> <span>");
       text = "<span>" + text + "</span>"; 
       
       $(".until").html(text).find("span").hover(function(){
           $(this).addClass("onRed");
       },function(){
           $(this).removeClass("onRed");
       });
        
       //"탐색" 단어를 선택하여 효과 주기
       var text2 = $(".text").text().split(" ").join("</span> <span>");
       text2 = "<span>" + text2 + "</span>";  
       
       $(".choice .btn14").click(function(){
           $(".text").html(text2).find(":contains('탐색')").addClass("onRed");
       });
       
       //"선택자" 단어를 선택하여 효과 주기
       $(".choice .btn15").click(function(){
           $(".text").html(text2).find(":contains('선택자')").addClass("onRed");
       });
    </script>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>jQuery</title>
    <style>
        li {margin: 3px;}
        a {border: 1px solid #5f6368; padding: 7px 20px 5px 20px; display: inline-block;
        border-radius: 20px; text-decoration: none; color: #000; margin: 4px;}
        .on {background-color: #bbdefb; border: 1px dashed #303f9f;}
        .onRed {color: #c7254e; white-space: nowrap; background-color:#f9f2f4; border-radius: 4px; 
        border-bottom: 1px dashed #a51a3d; }
        .select:before {content:'select'; padding: 4px 4px 2px 4px; font-size: 90%;
        color: #3d90b7; white-space: nowrap; background-color: #e7f6fd;
        border-radius: 4px; border: 1px dashed #3d90b7;}
    </style>
</head>
<body>
    <h1>탐색(Traversing)</h1>
    
    <div class="choice">
        <a href="#" class="off1">reset</a>
        <a href="#" class="btn1">.eq(2)</a>
        <a href="#" class="btn2">.eq(-1)()</a>
        <a href="#" class="btn3">.filter(":even")</a>
        <a href="#" class="btn4">.filter(".select")</a>
        <a href="#" class="btn5">.first()</a>
        <a href="#" class="btn6">.last()</a>
        <a href="#" class="btn7">.has("ul")</a>
        <a href="#" class="btn8">.has(".select")</a>
        <a href="#" class="btn9">.is("li")</a>
        <a href="#" class="btn10">.not(".select")</a>
        <a href="#" class="btn11">.slice(2)</a>
        <a href="#" class="btn12">.slice(2,4)</a>
        <a href="#" class="btn13">.slice(-2)</a>
        <a href="#" class="btn14">.slice(-2,-1)</a>
    </div>
    
    <div class="list">
        <ul>
            <li class="liList">트리구조 탐색(Tree traversal)
                <ul>
                    <li>.children() : 선택한 요소의 바로 아래 자식 요소만 선택합니다.</li>
                    <li>.closest() : 선택한 요소를 포함하면서 가장 가까운 상위 요소를 선택합니다.</li>
                    <li class="select">.find() : 선택한 요소의 자식 요소 중 조건에 맞는 요소를 선택합니다.</li>
                    <li>.next() : 선택한 요소를 다음 형제 요소를 선택합니다.</li>
                    <li>.is() : 선택한 요소 객체의 특징을 판별합니다.</li>
                    <li>.last() : 선택한 요소에서 마지막 번째 자식을 선택합니다</li>
                </ul>
            </li>
            <li class="liList">필터링(Filtering)
                <ul>
                    <li>.eq(index) : 선택한 요소에 인덱스 번호에 해당하는 요소를 찾습니다.
                        <ul>
                            <li>여기는 두 번째 자식입니다.</li>
                            <li>여기는 두 번째 자식입니다.</li>
                            <li>여기는 두 번째 자식입니다.</li>
                        </ul>
                    </li>
                    <li>.filter() : 선택한 요소에서 선택하거나 함수를 사용할 수 있습니다.</li>
                    <li>.first() : 선택한 요소에서 첫 번째 자식을 선택합니다.</li>
                    <li>.has() : 선택한 요소의 자식 요소에서 주어진 선택자를 찾습니다.</li>
                </ul>
            </li>
        </ul>
    </div>   
    
    <script type="text/javascript" src="assets/js/jquery-1.12.4.min.js"></script>
    <script>
        //선택자를 이용해서 .find() 줄에 CSS 효과를 넣어주세요!(7가지 이상)
        //$(".list1").css({backgroundColor:"#bbdefb", border:"1px dashed #303f9f", display:"block"});
        //$("li[class='list1']").css({backgroundColor:"#bbdefb", border:"1px dashed #303f9f", display:"block"});
        //$("li[class^='list1']").css({backgroundColor:"#bbdefb", border:"1px dashed #303f9f", display:"block"});
        //$("li[class$='list1']").css({backgroundColor:"#bbdefb", border:"1px dashed #303f9f", display:"block"});
        //$("li[class*='list1']").css({backgroundColor:"#bbdefb", border:"1px dashed #303f9f", display:"block"});
        //$(".select li:eq(0)").css({backgroundColor:"#bbdefb", border:"1px dashed #303f9f", display:"block"});
        //$(".select li:lt(1)").css({backgroundColor:"#bbdefb", border:"1px dashed #303f9f", display:"block"});
        //$(".select li:first").css({backgroundColor:"#bbdefb", border:"1px dashed #303f9f", display:"block"});
        //$(".select li:first-child").css({backgroundColor:"#bbdefb", border:"1px dashed #303f9f", display:"block"});
        //$(".select li:contains('children')").css({backgroundColor:"#bbdefb", border:"1px dashed #303f9f", display:"block"});
        //$(".select li:first-of-type").css({backgroundColor:"#bbdefb", border:"1px dashed #303f9f", display:"block"});
        //$(".select li:nth-child(1)").css({backgroundColor:"#bbdefb", border:"1px dashed #303f9f", display:"block"});
        //$(".select li:nth-child(4n+1)").css({backgroundColor:"#bbdefb", "border":"1px dashed #303f9f", display:"block"});
        //$("li.list1:visible").css({backgroundColor:"#bbbefb", border:"1px dashed #303f9f", display:"block"});
        //$(".list1:parent").css({backgroundColor:"#bbbefb", border:"1px dashed #303f9f", display:"block"});
        
        $(".choice .off1").click(function(){
            $("*").removeClass("on");
        });
        
        $(".choice .btn1").click(function(){
            $(".liList li").eq(2).addClass("on");
        });
        
        $(".choice .btn2").click(function(){
            $(".liList li").eq(-1).addClass("on");
        });
        
        $(".choice .btn3").click(function(){
            $(".liList li").filter(":even").addClass("on");
        });
        
        $(".choice .btn4").click(function(){
            $(".liList li").filter(".select").addClass("on");
        });
        
        $(".choice .btn5").click(function(){
            $(".liList li").first().addClass("on");
        });
        
        $(".choice .btn6").click(function(){
            $(".liList li").last().addClass("on");
        });
        
        $(".choice .btn7").click(function(){
            $(".liList li").has("ul").addClass("on");
        });
        
        $(".choice .btn8").click(function(){
            $(".list li").has(".select").addClass("on");
        });
        
        $(".choice .btn9").click(function(){
            if($(".list li").is("li")){
                $(".list li.select").addClass("on");
            }
        });
        
        $(".choice .btn10").click(function(){
            $(".list li").not(".select").addClass("on");
        });
        
        $(".choice .btn11").click(function(){
            $(".list li").slice(2).addClass("on");
        });
        $(".choice .btn12").click(function(){
            $(".list li").slice(2,4).addClass("on");
        });
        
        $(".choice .btn13").click(function(){
            $(".list li").slice(-2).addClass("on");
        });
        $(".choice .btn14").click(function(){
            $(".list li").slice(-2,-1).addClass("on");
        });
    </script>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <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>
    <h1>탐색(Traversing)</h1>
    <div class="choice">
        <a href="#" class="btn1">리스트 클릭하면 strong 태그가 두개 있으면 파란색, 하나 있으면 빨간색으로 표현됩니다.</a>
        <a href="#" class="btn2">클릭하면 li의 부모가 ul인지 확인합니다.</a>
        <a href="#" class="btn3">클릭하면 li의 부모가 div인지 확인합니다.</a>
    </div>
    <div class="list">
        <ul>
            <li>.children() : 선택한 <strong>요소</strong>의 바로 아래 자식 <strong>요소</strong>만 선택합니다.</li>
            <li>.closest() : 선택한 <strong>요소</strong>를 포함하면서 가장 가까운 상위 <strong>요소</strong>를 선택합니다.</li>
            <li>.find() : 선택한 <strong>요소</strong>의 자식 요소 중 조건에 맞는 <strong>요소</strong>를 선택합니다.</li>
            <li>.next() : 선택한 <strong>요소</strong>를 다음 형제 <strong>요소</strong>를 선택합니다.</li>
            <li>.is() : 선택한 <strong>요소</strong> 객체의 특징을 판별합니다.</li>
            <li>.last() : 선택한 <strong>요소</strong>에서 마지막 번째 자식을 선택합니다</li>
            <li>.filter() : 선택한 <strong>요소</strong>에서 선택하거나 함수를 사용할 수 있습니다.</li>
            <li>.first() : 선택한 <strong>요소</strong>에서 첫 번째 자식을 선택합니다.</li>
            <li>.has() : 선택한 <strong>요소</strong>의 자식 요소에서 주어진 선택자를 찾습니다.</li>
        </ul>
        <p class="text"></p>
    </div>   
    
    <script type="text/javascript" src="assets/js/jquery-1.12.4.min.js"></script>
    <script>
        $(".list li").click(function(){
            var li = $(this);
            var two = li.is(function(){
                return $("strong",this).length === 2;
            });
            
            if(two){
                li.addClass("onBlue");
            } else {
                li.addClass("onRed");
            }
        });
       
        $(".choice .btn2").click(function(){
            var is = $(".list li").parent().is("ul");
            $(".text").text("li의 부모가 맞으면 'true' 아니면 'false'를 반환합니다. = " + is);
        });
        
        $(".choice .btn3").click(function(){
            var is = $(".list li").parent().is("div");
            $(".text").text("li의 부모가 맞으면 'true' 아니면 'false'를 반환합니다. = " + is);
        });
    </script>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <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>
    <h1>탐색(Traversing)</h1>
    <div class="choice">
        <a href="#" class="btn1">.addClass("onBlue")</a>
        <a href="#" class="btn2">.each()</a>
        <a href="#" class="btn3">setTimeout</a>
    </div>
    <div class="list">
        <ul>
            <li>.children() : 선택한 <strong>요소</strong>의 바로 아래 자식 <strong>요소</strong>만 선택합니다.</li>
            <li>.closest() : 선택한 <strong>요소</strong>를 포함하면서 가장 가까운 상위 <strong>요소</strong>를 선택합니다.</li>
            <li>.find() : 선택한 <strong>요소</strong>의 자식 요소 중 조건에 맞는 <strong>요소</strong>를 선택합니다.</li>
            <li>.next() : 선택한 <strong>요소</strong>를 다음 형제 <strong>요소</strong>를 선택합니다.</li>
            <li>.is() : 선택한 <strong>요소</strong> 객체의 특징을 판별합니다.</li>
            <li>.last() : 선택한 <strong>요소</strong>에서 마지막 번째 자식을 선택합니다</li>
            <li>.filter() : 선택한 <strong>요소</strong>에서 선택하거나 함수를 사용할 수 있습니다.</li>
            <li>.first() : 선택한 <strong>요소</strong>에서 첫 번째 자식을 선택합니다.</li>
            <li>.has() : 선택한 <strong>요소</strong>의 자식 요소에서 주어진 선택자를 찾습니다.</li>
        </ul>
    </div>   
    
    <script type="text/javascript" src="assets/js/jquery-1.12.4.min.js"></script>
    <script>
        $(".choice .btn1").click(function(){
            $(".list li").addClass("onBlue");
        });
        
        $(".choice .btn2").click(function(){
            $(".list li").each(function(){
                $(this).addClass("onBlue");
            });
        });
        
        $(".choice .btn3").click(function(){
            $(".list li").each(function(index){
                setTimeout(function(){
                    $(".list li").eq(index).addClass("onRed");
                },100*(index+1));
            });
        });
    </script>
</body>
</html>

속성(Attributes)

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

Attribute

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <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>
    <h1>.attr()</h1>
    <div class="choice">
        <a href="#" class="btn1">src 값을 가져옵니다.</a>
        <a href="#" class="btn2">alt 값을 가져옵니다.</a>
        <a href="#" class="btn3">width 값을 가져옵니다.</a><br>
        <a href="#" class="btn4">이미지의 크기를 400으로 변경합니다.</a>
        <a href="#" class="btn5">이미지의 크기를 500으로 변경합니다.</a>
        <a href="#" class="btn6">이미지의 크기를 600으로 변경합니다.</a><br>
        <a href="#" class="btn7">이미지(img02)를 변경합니다.</a>
        <a href="#" class="btn8">이미지(img03)를 변경합니다.</a>
        <a href="#" class="btn9">이미지(img04)를 변경합니다.</a><br>
        <a href="#" class="btn10">이미지(img02)와 크기(400)를 변경합니다.</a>
        <a href="#" class="btn11">이미지(img03)와 크기(500)를 변경합니다.</a>
        <a href="#" class="btn12">이미지(img04)와 크기(600)를 변경합니다.</a><br>
    </div>
    <div class="list">
        <img src="assets/img/img01.png" alt="이미지1" width="300">
        <p class="text"></p>
    </div>
    
    <script type="text/javascript" src="assets/js/jquery-1.12.4.min.js"></script>
    <script>
        $(".choice .btn1").click(function(){
            var text = $(".list img").attr("src");
            $(".list .text").text(text);
        });
        $(".choice .btn2").click(function(){
            var text = $(".list img").attr("alt");
            $(".list .text").text(text);
        });
        $(".choice .btn3").click(function(){
            var text = $(".list img").attr("width");
            $(".list .text").text(text);
        });
        
        $(".choice .btn4").click(function(){
            $(".list img").attr("width","400");
        });
        $(".choice .btn5").click(function(){
            $(".list img").attr("width","500");
        });
        $(".choice .btn6").click(function(){
            $(".list img").attr("width","600");
        });
        
        $(".choice .btn7").click(function(){
            $(".list img").attr("src","assets/img/img02.png");
        });
        $(".choice .btn8").click(function(){
            $(".list img").attr("src","assets/img/img03.png");
        });
        $(".choice .btn9").click(function(){
            $(".list img").attr("src","assets/img/img04.png");
        });
        
        $(".choice .btn10").click(function(){
            $(".list img").attr({"src":"assets/img/img02.png","width":"400"});
            $(".list .text").text("이미지 주소값 : "+$(".list img").attr("src") + " / " + "이미지 위드 값: " + $(".list img").attr("width") )
        });
        $(".choice .btn11").click(function(){
            $(".list img").attr({"src":"assets/img/img03.png","width":"500"});
            $(".list .text").text("이미지 주소값 : "+$(".list img").attr("src") + " / " + "이미지 위드 값: " + $(".list img").attr("width") )
        });
        $(".choice .btn12").click(function(){
            $(".list img").attr({"src":"assets/img/img04.png","width":"600"});
            $(".list .text").text("이미지 주소값 : "+$(".list img").attr("src") + " / " + "이미지 위드 값: " + $(".list img").attr("width") )
        });
    </script>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>jQuery</title>
    <style>
        li {margin: 8px; display: inline; list-style: none;}
        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>
    <h1>.attr()</h1>
    <div class="choice">
        <a href="#" class="btn1">클릭하면 이미지를 순차적으로 크게 해줍니다.</a>
    </div>
    <div class="list">
        <ul>
            <li><img src="assets/img/img01.png" alt="이미지1" width="200"></li>
            <li><img src="assets/img/img02.png" alt="이미지2" width="200"></li>
            <li><img src="assets/img/img03.png" alt="이미지3" width="200"></li>
            <li><img src="assets/img/img04.png" alt="이미지4" width="200"></li>
            <li><img src="assets/img/img05.png" alt="이미지5" width="200"></li>
        </ul>
        
        <p class="text"></p>
    </div>
    
    <script type="text/javascript" src="assets/js/jquery-1.12.4.min.js"></script>
    <script>
        $(".choice .btn1").click(function(){
            $(".list img").attr("width",function(i){
                return (i+1)*50;
            });
        });
    </script>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>jQuery</title>
    <style>
        * {margin: 0; padding: 0;}
        li {list-style: none;}
        a {text-decoration: none; color: #666;}
        #tab-menu {width: 350px; margin: 50px auto;}
        .tab-btn {margin-bottom: 1px;}
        .tab-btn ul {overflow: hidden;}
        .tab-btn li {float: left; width: 20%; text-align: center;}
        .tab-btn li a {padding: 14px 10px 10px 10px; display: block; background-color: #1e88e5;
        margin-right: 1px; color: #fff;}
    </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 class="tab-cont">
            <img src="assets/img/img01.png" alt="이미지1" width="350">
        </div>
    </div>

    <script type="text/javascript" src="assets/js/jquery-1.12.4.min.js"></script>
    <script>
        //글씨를 클릭하면 Tab --> menu로 변경해주세요!
//         $(".tab-btn ul li").click(function(){
//             $(".tab-btn ul li a").text("Menu");
//         });
        
        //글씨를 클릭하면 클릭한 글씨만 Tab --> menu로 변경해주세요!
//         $(".tab-btn ul li").click(function(){
//             $(this).find("a").text("Menu");
//         });
        
        //글씨를 클릭하면 클릭한 글씨를 tab3 --> menu3로 변경해주세요!
//         $(".tab-btn ul li").click(function(){
//             var target = $(this)
//             var 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":"assets/img/img01.png","alt":"이미지1"});
//         });
//         $(".tab-btn ul li:eq(1)").click(function(){
//             $(".tab-cont img").attr({"src":"assets/img/img02.png","alt":"이미지2"});
//         });
//         $(".tab-btn ul li:eq(2)").click(function(){
//             $(".tab-cont img").attr({"src":"assets/img/img03.png","alt":"이미지3"});
//         });
//         $(".tab-btn ul li:eq(3)").click(function(){
//             $(".tab-cont img").attr({"src":"assets/img/img04.png","alt":"이미지4"});
//         });
//         $(".tab-btn ul li:eq(4)").click(function(){
//             $(".tab-cont img").attr({"src":"assets/img/img05.png","alt":"이미지5"});
//         });
        
        //한번에 쓰기
        $(".tab-btn ul li").click(function(){
            var target = $(this);
            var index = target.index()+1;
            target.find("a").text("Menu"+index);
            $(".tab-cont img").attr({"src":"assets/img/img0"+index+".png","alt":"이미지"+index});
        });
    </script>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>jQuery</title>
    <style>
        * {margin: 0; padding: 0;}
        li {list-style: none;}
        a {color: #666; text-decoration:none; border: 1px solid #5f6368; padding: 7px 20px 5px 20px; display: inline-block;border-radius: 20px; text-decoration: none; color: #000; margin: 4px;}
    </style>
</head>
<body>    
    <h1>.prop()</h1>
    <div class="choice">
        <a href="#" class="btn1">.attr</a>
        <a href="#" class="btn2">.prop</a>
        <a href="#" class="btn3">.is</a>
    </div>
    <div class="list">
        <input id="check" type="checkbox" checked="checked">
        <label for="check">체크</label>
        <p class="text"></p>
    </div>
    
    <script type="text/javascript" src="assets/js/jquery-1.12.4.min.js"></script>
    <script>
        $(".choice .btn1").click(function(){
            $(".list input").change(function(){
                var input = $(this);
                $(".list .text").html(".attr(\"checked\"):" +input.attr("checked"))
            }).change();
        });
        
        $(".choice .btn2").click(function(){
            $(".list input").change(function(){
                var input = $(this);
                $(".list .text").html(".prop(\"checked\"):" +input.prop("checked"))
            }).change();
        });
        
        $(".choice .btn3").click(function(){
            $(".list input").change(function(){
                var input = $(this);
                $(".list .text").html(".is(\"checked\"):" +input.is("checked"))
            }).change();
        });
    </script>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>jQuery</title>
    <style>
        * {margin: 0; padding: 0;}
        li {list-style: none;}
        a {color: #666; text-decoration:none; border: 1px solid #5f6368; padding: 7px 20px 5px 20px; display: inline-block;border-radius: 20px; text-decoration: none; color: #000; margin: 4px;}
    </style>
</head>
<body>    
    <h1>.val()</h1>
    <div class="choice">
        <a href="#" class="btn1">클릭하면 input 박스에 글씨를 넣어줍니다.</a>
        <a href="#" class="btn2">클릭하면 input 박스에 글씨를 안나오게 해주세요!.</a>
    </div>
    <div class="list">
        input : <input type="text" value="입력해주세요!" class="input">
    </div>
    
    <div class="list2">
        select : 
        <select name="select" id="select" class="select">
            <option value="https://www.naver.com/">네이버</option>
            <option value="https://www.daum.net/">다음</option>
            <option value="https://www.nate.com/">네이트</option>
            <option value="https://www.google.co.kr/">구글</option>
        </select>
        <p class="text"></p>
    </div>
    
    <script type="text/javascript" src="assets/js/jquery-1.12.4.min.js"></script>
    <script>
        $(".choice .btn1").click(function(){
            $(".list .input").val( $(this).text() );
        });
        $(".choice .btn2").click(function(){
            $(".list .input").val("");
        });
        $(".list .input").click(function(){
            $(".list .input").val("");
        });
        
        $("#select").change(function(){
            var url = $(this).val();
            if(url){
                location.href=url;
            }
        });
        
    </script>
</body>
</html>

CSS

<!DOCTYPE html>
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>jQuery</title>
    <style>
        * {margin: 0; padding: 0;}
        li {list-style: none;}
        a {color: #666; text-decoration:none; 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>    
    <h1>.addClass()</h1>
    <div class="choice">
        <a href="#" class="btn1">클릭하면 addClass를 추가합니다.</a>
        <a href="#" class="btn2">클릭하면 클래스를 순차적으로 추가합니다.</a>
        <a href="#" class="btn3">클릭하면 select 클래스를 찾은 후 효과주기</a>
    </div>
    <div class="list">
        <ul>
            <li>.children() : 선택한 요소의 바로 아래 자식 요소만 선택합니다.</li>
            <li>.closest() : 선택한 요소를 포함하면서 가장 가까운 상위 요소를 선택합니다.</li>
            <li>.find() : 선택한 요소의 자식 요소 중 조건에 맞는 요소를 선택합니다.</li>
            <li>.next() : 선택한 요소를 다음 형제 요소를 선택합니다.</li>
            <li class="select">.is() : 선택한 요소 객체의 특징을 판별합니다.</li>
            <li>.last() : 선택한 요소에서 마지막 번째 자식을 선택합니다</li>
            <li>.filter() : 선택한 요소에서 선택하거나 함수를 사용할 수 있습니다.</li>
            <li>.first() : 선택한 요소에서 첫 번째 자식을 선택합니다.</li>
            <li>.has() : 선택한 요소의 자식 요소에서 주어진 선택자를 찾습니다.</li>
        </ul>
    </div>
    

    <script type="text/javascript" src="assets/js/jquery-1.12.4.min.js"></script>
    <script>
        //버튼1을 클릭하면 addClass("onRed")를 추가해주세요!
        $(".choice .btn1").click(function(){
            $(".list li").addClass("onRed");
        });
        
        $(".choice .btn2").click(function(){
            $(".list li").addClass(function(index){
                return "onRed"+index;
            });
        });
        
        $(".choice .btn3").click(function(){
            $(".list li").addClass(function(index, currentClass){
                var addClass;
                
                if(currentClass === "select"){
                    addClass ="onRed";
                }
                return addClass;
            });
        });
    </script>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>jQuery</title>
    <style>
        * {margin: 0; padding: 0;}
        li {list-style: none;}
        a {text-decoration: none; color: #666;}
        #tab-menu {width: 350px; margin: 50px auto;}
        #tab-btn {margin-bottom: 1px;}
        #tab-btn ul {overflow: hidden;}
        #tab-btn li {float: left; width: 20%; text-align: center;}
        #tab-btn li a {padding: 14px 10px 10px 10px; display: block; background-color: #1e88e5;
        margin-right: 1px; color: #fff;}
        #tab-cont {width: 350px; height: 300px;}
        #tab-cont.img1 {background:url(assets/img/img01.png) no-repeat; background-size: 350px;}
        #tab-cont.img2 {background:url(assets/img/img02.png) no-repeat; background-size: 350px;}
        #tab-cont.img3 {background:url(assets/img/img03.png) no-repeat; background-size: 350px;}
        #tab-cont.img4 {background:url(assets/img/img04.png) no-repeat; background-size: 350px;}
        #tab-cont.img5 {background:url(assets/img/img05.png) no-repeat; background-size: 350px;}
    </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" class="img1">
            
        </div>
    </div>
    
    <script type="text/javascript" src="assets/js/jquery-1.12.4.min.js"></script>
    <script>
        //글씨를 클릭하면 tab --> menu로 변경해주세요!!
//         $("#tab-btn ul li").click(function(){
//             $("#tab-btn ul li a").text("Menu");
//         });
        
        //글씨를 클릭하면 클릭한 글씨만 tab --> menu로 변경해주세요!!
//         $("#tab-btn ul li a").click(function(){
//             $(this).text("Menu");
//         });
        
        //글씨를 클릭하면 tab1 --> menu1로 변경해주세요!!
//         $("#tab-btn ul li").click(function(){
//             $("#tab-btn ul li").each(function(index){
//                 $("#tab-btn ul li").eq(index).find("a").text("Menu"+(index+1))
//             });
//         });
        
        //글씨를 클릭하면 클릭한 글씨만 tab1 --> menu1로 변경해주세요!!
//         $("#tab-btn ul li").click(function(){
//             var target = $(this);
//             var index = target.index()+1;
//             target.find("a").text("Menu"+index);
//         });
        
        
        //해당 버튼을 클릭하면 해당 이미지 나오게 하기
        $("#tab-btn ul li:eq(0)").click(function(){
            $("#tab-cont").removeClass().addClass("img1");
        });
        $("#tab-btn ul li:eq(1)").click(function(){
            $("#tab-cont").removeClass().addClass("img2");
        });
        $("#tab-btn ul li:eq(2)").click(function(){
            $("#tab-cont").removeClass().addClass("img3");
        });
        $("#tab-btn ul li:eq(3)").click(function(){
            $("#tab-cont").removeClass().addClass("img4");
        });
        $("#tab-btn ul li:eq(4)").click(function(){
            $("#tab-cont").removeClass().addClass("img5");
        });
    </script>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>jQuery</title>
    <style>
        li {list-style: none;}
        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">클릭하면 글씨의 컬러 값을 알려줍니다.</a>
        <a href="#" class="btn2">클릭하면 글씨의 여러가지 속성을 알려줍니다.</a>
        <a href="#" class="btn3">클릭하면 글씨의 색은 빨간색으로 변경해주세요~</a>
        <a href="#" class="btn4">클릭하면 글씨의 색은 파란색으로 크기는 30px로 변경해주세요~</a>
        <a href="#" class="btn5">글씨를 클릭할 때마다 크게 해주세요~</a>
        <a href="#" class="btn6">글씨를 클릭할 때마다 작게 해주세요~</a>
    </div>
    <div class="list">
        <ul>
            <li>.children() : 선택한 요소의 바로 아래 자식 요소만 선택합니다.</li>
            <li>.closest() : 선택한 요소를 포함하면서 가장 가까운 상위 요소를 선택합니다.</li>
            <li>.find() : 선택한 요소의 자식 요소 중 조건에 맞는 요소를 선택합니다.</li>
            <li>.next() : 선택한 요소를 다음 형제 요소를 선택합니다.</li>
            <li>.is() : 선택한 요소 객체의 특징을 판별합니다.</li>
            <li>.last() : 선택한 요소에서 마지막 번째 자식을 선택합니다</li>
            <li>.filter() : 선택한 요소에서 선택하거나 함수를 사용할 수 있습니다.</li>
            <li>.first() : 선택한 요소에서 첫 번째 자식을 선택합니다.</li>
            <li>.has() : 선택한 요소의 자식 요소에서 주어진 선택자를 찾습니다.</li>
        </ul>
        <p class="text"></p>
    </div>   
    
    <script type="text/javascript" src="assets/js/jquery-1.12.4.min.js"></script>
    <script>
        $(".choice .btn1").click(function(){
            var value = $(".list li").css("color");
            $(".list .text").text("이 폰트의 색은 : "+ value);
        });
        
        $(".choice .btn2").click(function(){
            var html = ["이 글씨의 속성은 :"];
            var val = $(".list li").css(["color","font-size","display","text-align","list-style-type"]);

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

            $(".list .text").html( html.join("") );
        });
        
        $(".choice .btn3").click(function(){
            $(".list li").css("color","red");
        });
        
        $(".choice .btn4").click(function(){
            $(".list li").css({"color":"blue","font-size":"30px"});
        });
        
        $(".choice .btn5").click(function(){
            $(".list li").css({fontSize:function(index, value){
                return parseFloat(value) * 1.2;
            }});
        });
        
        $(".choice .btn6").click(function(){
            $(".list li").css({fontSize:function(index, value){
                return parseFloat(value) * 0.8;
            }});
        });
    </script>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>jQuery</title>
    <style>
        li {list-style: none;}
        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">클릭하면 select 클래스를 찾은 후 효과를 줍니다.</a>
    </div>
    <div class="list">
        <ul>
            <li>.children() : 선택한 요소의 바로 아래 자식 요소만 선택합니다.</li>
            <li>.closest() : 선택한 요소를 포함하면서 가장 가까운 상위 요소를 선택합니다.</li>
            <li>.find() : 선택한 요소의 자식 요소 중 조건에 맞는 요소를 선택합니다.</li>
            <li>.next() : 선택한 요소를 다음 형제 요소를 선택합니다.</li>
            <li class="select">.is() : 선택한 요소 객체의 특징을 판별합니다.</li>
            <li>.last() : 선택한 요소에서 마지막 번째 자식을 선택합니다</li>
            <li>.filter() : 선택한 요소에서 선택하거나 함수를 사용할 수 있습니다.</li>
            <li>.first() : 선택한 요소에서 첫 번째 자식을 선택합니다.</li>
            <li>.has() : 선택한 요소의 자식 요소에서 주어진 선택자를 찾습니다.</li>
        </ul>
    </div>   
    
    <script type="text/javascript" src="assets/js/jquery-1.12.4.min.js"></script>
    <script>
        $(".choice .btn1").click(function(){
            if( $(".list li").hasClass("select") ){
                $(".select").addClass("onBlue");
            }
        });
    </script>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>jQuery</title>
    <style>
        li {list-style: none;}
        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">클릭하면 toggleClass 효과를 줍니다.</a>
        <a href="#" class="btn2">클릭하면 세번째 줄만 toggleClass 효과를 줍니다.</a>
    </div>
    <div class="list">
        <ul>
            <li>.children() : 선택한 요소의 바로 아래 자식 요소만 선택합니다.</li>
            <li>.closest() : 선택한 요소를 포함하면서 가장 가까운 상위 요소를 선택합니다.</li>
            <li>.find() : 선택한 요소의 자식 요소 중 조건에 맞는 요소를 선택합니다.</li>
            <li>.next() : 선택한 요소를 다음 형제 요소를 선택합니다.</li>
            <li>.is() : 선택한 요소 객체의 특징을 판별합니다.</li>
            <li>.last() : 선택한 요소에서 마지막 번째 자식을 선택합니다</li>
            <li>.filter() : 선택한 요소에서 선택하거나 함수를 사용할 수 있습니다.</li>
            <li>.first() : 선택한 요소에서 첫 번째 자식을 선택합니다.</li>
            <li>.has() : 선택한 요소의 자식 요소에서 주어진 선택자를 찾습니다.</li>
        </ul>
    </div>   
    
    <script type="text/javascript" src="assets/js/jquery-1.12.4.min.js"></script>
    <script>
        $(".choice .btn1").click(function(){
            $(".list li").toggleClass("onBlue");
        });
        $(".choice .btn2").click(function(){
            $(".list li").eq(2).toggleClass("onBlue");
        });
    </script>
</body>
</html>

Dimensions

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>jQuery</title>
    <style>
        li {list-style: none;}
        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: 5px; margin: 5px;
            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 sytle="height:4000px">    
    <div class="choice">
        <a href="#" class="btn1">클릭하면 리스트의 높이(.height()) 값을 구합니다.</a>
        <a href="#" class="btn2">클릭하면 리스트의 높이(.css("height")) 값을 구합니다.</a>
        <a href="#" class="btn3">클릭하면 문서의 높이 값을 구합니다.</a>
        <a href="#" class="btn4">클릭하면 브라우저의 높이 값을 구합니다.</a><br>
        <a href="#" class="btn5">클릭하면 리스트의 가로(.width()) 값을 구합니다.</a>
        <a href="#" class="btn6">클릭하면 리스트의 가로(.css("width")) 값을 구합니다.</a>
        <a href="#" class="btn7">클릭하면 문서의 가로 값을 구합니다.</a>
        <a href="#" class="btn8">클릭하면 브라우저의 가로 값을 구합니다.</a>
    </div>
    <div class="list">
        <ul class="onRed">
            <li>.children() : 선택한 요소의 바로 아래 자식 요소만 선택합니다.</li>
            <li>.closest() : 선택한 요소를 포함하면서 가장 가까운 상위 요소를 선택합니다.</li>
            <li>.find() : 선택한 요소의 자식 요소 중 조건에 맞는 요소를 선택합니다.</li>
            <li>.next() : 선택한 요소를 다음 형제 요소를 선택합니다.</li>
            <li>.is() : 선택한 요소 객체의 특징을 판별합니다.</li>
            <li>.last() : 선택한 요소에서 마지막 번째 자식을 선택합니다</li>
            <li>.filter() : 선택한 요소에서 선택하거나 함수를 사용할 수 있습니다.</li>
            <li>.first() : 선택한 요소에서 첫 번째 자식을 선택합니다.</li>
            <li>.has() : 선택한 요소의 자식 요소에서 주어진 선택자를 찾습니다.</li>
        </ul>
        <p class="prop onBlue"></p>
        <p class="text"></p>
        <div class="choice2">
            <a href="#" class="btn1">.height()</a>
            <a href="#" class="btn2">.innerHeight()</a>
            <a href="#" class="btn3">.outerHeight()</a>
        </div>
        <div class="choice3">
            <a href="#" class="btn1">.width()</a>
            <a href="#" class="btn2">.innerWidth()</a>
            <a href="#" class="btn3">.outerWidth()</a>
        </div>
        <div class="choice4">
            <a href="#" class="btn1">.height("200")</a>
            <a href="#" class="btn2">.height("400")</a>
            <a href="#" class="btn3">.width("400")</a>
            <a href="#" class="btn4">.width("800")</a>
        </div>
    </div>   
    
    <script type="text/javascript" src="assets/js/jquery-1.12.4.min.js"></script>
    <script>
        
        function showHeight(element,height){
            $(".text").text( element + " 값은 " + height +"px.");
        }
        
        $(".choice .btn1").click(function(){
            showHeight("높이(.height())",$(".list").height());
        });
        
        $(".choice .btn2").click(function(){
            showHeight("높이(.css('height'))",$(".list").css("height"));
        });
        
        $(".choice .btn3").click(function(){
            showHeight("문서의 높이", $(document).height() );
        });
        
        $(".choice .btn4").click(function(){
            showHeight("브라우저의 높이", $(window).height() );
        });
        
        $(".choice .btn5").click(function(){
            showHeight("가로(.width())",$(".list").width());
        });
        
        $(".choice .btn6").click(function(){
            showHeight("가로(.css('width'))",$(".list").css("width"));
        });
        
        $(".choice .btn7").click(function(){
            showHeight("문서의 가로", $(document).width() );
        });
        
        $(".choice .btn8").click(function(){
            showHeight("브라우저의 가로", $(window).width() );
        });
        
        
        var html = ["이 리스트의 속성은:"];
        var value = $(".list ul").css(["margin","padding","border-width"]);
        
        $.each(value,function(prop,value){
            html.push(prop+ ":" + value);
        });
        
        $(".list .prop").html(html.join("<br>"));
        
        $(".choice2 .btn1").click(function(){
            showHeight("리스트의 .height()의 ", $(".list ul").height() );
        });
        $(".choice2 .btn2").click(function(){
            showHeight("리스트의 .innerHeight()의 ", $(".list ul").innerHeight() );
        });
        $(".choice2 .btn3").click(function(){
            showHeight("리스트의 .outerHeight()의 ", $(".list ul").outerHeight() );
        });
        
        $(".choice3 .btn1").click(function(){
            showHeight("리스트의 .width()의 ", $(".list ul").height() );
        });
        $(".choice3 .btn2").click(function(){
            showHeight("리스트의 .innerWidth()의 ", $(".list ul").innerWidth() );
        });
        $(".choice3 .btn3").click(function(){
            showHeight("리스트의 .outerWidth()의 ", $(".list ul").outerWidth() );
        });
        
        $(".choice4 .btn1").click(function(){
            $(".list ul").height("200");
        });
        $(".choice4 .btn2").click(function(){
            $(".list ul").height("400");
        });
        $(".choice4 .btn3").click(function(){
            $(".list ul").width("400");
        });
        $(".choice4 .btn4").click(function(){
            $(".list ul").width("800");
        });
    </script>
</body>
</html>
<!DOCTYPE html>
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>jQuery</title>
    <style>
        .circle-wrap {width: 1000px; height: 300px; position: relative; padding: 50px; margin: 150px 50px;}
        .circle {width: 100px; height: 100px; color: #c7254e; background-color:#f9f2f4; border-radius:50%;
        border: 1px dashed #a51a3d; text-align: center; line-height: 100px;}
        .onBlue {padding: 4px 6px 2px 6px; font-size: 90%; color: #3d90b7;
            white-space: nowrap; background-color:#e7f6fd; border-radius: 4px; border: 1px dashed #3d90b7;}
        .choice {position: fixed; left: 0; top: 0; z-index: 1000;}
    </style>
    <script type="text/javascript" src="assets/js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript" src="assets/js/jquery-ui-1.12.1.min.js"></script>
    <script>
        $(function() {
            $("#draggable").draggable({
                drag: function() {
                    $(".ol").text( $(".circle").offset().left + "px" );
                    $(".ot").text( $(".circle").offset().top + "px" );
                    $(".pl").text( $(".circle").position().left + "px" );
                    $(".pt").text( $(".circle").position().top + "px" );
                }
            });
            
            $(window).scroll(function(){
                $(".sl").text( $(window).scrollLeft() );
                $(".st").text( $(window).scrollTop() );
            });
             
        });
    </script>
</head>
<body style="width: 3000px; height: 10000px;">    
    <div class="choice">
        <span>offset().left = </span><span class="ol">0</span><br>
        <span>offset().top = </span><span class="ot">0</span><br>
        <span>position().left = </span><span class="pl">0</span><br>
        <span>position().top = </span><span class="pt">0</span><br>
        <span>scrollLeft() = </span><span class="sl">0</span><br>
        <span>scrollTop() = </span><span class="st">0</span><br>
    </div>
    
    <div class="circle-wrap onBlue">
        <div id="draggable" class="circle">
            circle
        </div>
    </div>

</body>
</html>
유형 메서드 설명
Copying .clone() 선택한 요소 본사본을 만듭니다.
Dom Insertion, Around .wrap() 선택한 요소에 새로운 태그를 추가합니다.
.wrapAll() 선택한 모든 요소에 새로운 태그를 추가합니다.
.wrapInner() 선택한 요소에 각각 새로운 태그를 추가합니다.
Dom Insertion, Inside .append() 선택한 요소 마지막 위치에 새로운 요소를 추가합니다.
.appendTo() 선택한 타겟 마지막 위치에 새로운 요소를 추가합니다.
.html() 선택한 요소 내부의 HTML을 읽거나 변경합니다.
.prepend() 선택한 요소 처음 위치에 새로운 요소를 추가합니다.
.prependTo() 선택한 타겟 처음 위치에 새로운 요소를 추가합니다.
.text() 선택한 요소 내부의 텍스트를 읽거나 변경합니다.
Dom Insertion, outsdie .after() 선택한 요소 다음 위치에 새로운 요소를 추가합니다.
.before() 선택한 요소 이전 위치에 새로운 요소를 추가합니다.
.insertAfter() 선택한 타겟 요소 다음에 새로운 요소를 추가합니다.
.insertBefore() 선택한 타겟 요소 이전에 새로운 요소를 추가합니다.
Dom Insertion, Removal .detach() 선택한 요소(데이터 및 이벤트 불포함)를 제거합니다..
.empty() 선택한 요소의 하위 요소를 제거합니다..
.remove() 선택한 요소(데이터 및 이벤트 포함)를 제거합니다..
.unwrap() 선택한 요소의 부모 요소를 제거합니다.
Dom Insertion, Replacement .replaceAll() 선택한 요소를 새로운 요소로 바꿉니다.
.replaceWith() 선택한 요소를 새로운 컨텐츠로 바꿉니다.
<!DOCTYPE html>
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>jQuery</title>
    <style>
         a {border: 1px solid #5f6368; padding: 7px 20px 5px 20px; display: inline-block; border-radius: 20px; text-decoration: none; color: #000; margin: 4px;}
        .onBlue {padding: 4px 6px 2px 6px; font-size: 90%; color: #3d90b7; white-space: nowrap; background-color:#e7f6fd; border-radius: 4px; border: 1px dashed #3d90b7;}
        .onRed {padding: 4px 6px 2px 6px; font-size: 90%;  color: #c7254e; white-space: nowrap; background-color:#f9f2f4; border-radius: 4px; border: 1px dashed #a51a3d; }
    </style>
</head>
<body>    
    
    <h1>변경</h1>
    <div class="list">
        <p>.clone() : 선택한 요소 본사본을 만듭니다.</p>
        <p>.wrap() : 선택한 요소에 새로운 태그를 추가합니다.</p>
        <p>.wrapAll() : 선택한 모든 요소에 새로운 태그를 추가합니다.</p>
        <p>.wrapInner() : 선택한 요소에 각각 새로운 태그를 추가합니다.</p>
        <p>.append() : 선택한 요소 마지막 위치에 새로운 요소를 추가합니다.</p>
        <p>.appendTo() : 선택한 타겟 마지막 위치에 새로운 요소를 추가합니다.</p>
    </div>
    <div class="chocie">
        <a href="#" class="btn1">클릭하면 p태그에 div로 감쌉니다.</a>
        <a href="#" class="btn2">클릭하면 컨텐츠 요소를 div태그에 넣어줍니다.</a>
        <a href="#" class="btn3">클릭하면 p태그 요소를 한번에 div태그에 넣어줍니다.</a>
        <a href="#" class="btn4">클릭하면 p태그 요소안에 div태그에 넣어줍니다.</a>
        <a href="#" class="btn5">클릭하면 마지막 요소에 컨텐츠를 추가합니다.</a>
        <a href="#" class="btn6">클릭하면 처음 요소에 컨텐츠를 추가합니다.</a>
        <a href="#" class="btn7">제목 요소를 마지막 요소에 추가합니다.</a>
        <a href="#" class="btn8">제목 요소를 처음 요소에 추가합니다.</a>
        <a href="#" class="btn9">클릭하면 타겟에 마지막 요소에 컨텐츠를 추가합니다.</a>
        <a href="#" class="btn10">클릭하면 타겟에 처음 요소에 컨텐츠를 추가합니다.</a>
        <a href="#" class="btn11">클릭하면 첫 번째 줄의 요소를 가져와서 출력합니다.(.html())</a>
        <a href="#" class="btn12">클릭하면 첫 번째 줄의 요소를 가져와서 출력합니다.(.text())</a>
        <a href="#" class="btn13">클릭하면 .html() 메서드로 요소를 출력합니다.</a>
        <a href="#" class="btn14">클릭하면 .text() 메서드로 요소를 출력합니다.</a>
        <a href="#" class="btn15">클릭하면 .after() 메서드로 요소를 출력합니다.</a>
        <a href="#" class="btn16">클릭하면 .before() 메서드로 요소를 출력합니다.</a>
        <a href="#" class="btn17">클릭하면 마지막 요소를 지웁니다.</a>
    </div>
    
    
    <script type="text/javascript" src="assets/js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript" src="assets/js/jquery-ui-1.12.1.min.js"></script>
    <script>
        $(function() {
            $(".chocie .btn1").click(function(){
                $(".list p").wrap("<div class='onBlue'></div>")
            });
            $(".chocie .btn2").click(function(){
                $(".list p").wrap(function(){
                    return "<div class='onBlue'>" + $(this).text() + "</div>";
                });
            });
            $(".chocie .btn3").click(function(){
                $(".list p").wrapAll("<div class='onBlue'></div>")
            });
            $(".chocie .btn4").click(function(){
                $(".list p").wrapInner("<div class='onBlue'></div>")
            });
            
            $(".chocie .btn5").click(function(){
                $(".list").append("<p class='onRed'>.html() : 선택한 요소 내부의 HTML을 읽거나 변경합니다.</p>")
            });
            $(".chocie .btn6").click(function(){
                $(".list").prepend("<p class='onRed'>.text() : 선택한 요소 내부의 텍스트를 읽거나 변경합니다.</p>")
            });
            
            $(".chocie .btn7").click(function(){
               $(".list").append( $("h1") );
            });
            $(".chocie .btn8").click(function(){
               $(".list").prepend( $("h1") );
            });
            
            $(".chocie .btn9").click(function(){
                $("<p class='onBlue'>.after() : 선택한 요소 다음 위치에 새로운 요소를 추가합니다.</p>").appendTo(".list");
            });
            $(".chocie .btn10").click(function(){
                $("<p class='onBlue'>.before() : 선택한 요소 이전 위치에 새로운 요소를 추가합니다.</p>").prependTo(".list");
            });
            
            $(".chocie .btn11").click(function(){
               var htmlString = $(".list p").eq(0).html();
               alert(htmlString);
            });
            $(".chocie .btn12").click(function(){
               var textString = $(".list p").eq(0).text();
               alert(textString);
            });
            $(".chocie .btn13").click(function(){
                $(".list p:last-child").html(".detach():선택한 요소(<strong class='onBlue'>데이터</strong> 및 이벤트 불포함)를 제거합니다.")
            });
            $(".chocie .btn14").click(function(){
                $(".list p:last-child").text(".detach():선택한 요소(<strong class='onBlue'>데이터</strong> 및 이벤트 불포함)를 제거합니다.")
            });
            
            $(".chocie .btn15").click(function(){
                $(".list p:first-child").after("<p class='onBlue'>.remove() :선택한 요소(데이터 및 이벤트 포함)를 제거합니다.</p>");
            });
            $(".chocie .btn16").click(function(){
                $(".list p:first-child").before("<p class='onBlue'>.remove() :선택한 요소(데이터 및 이벤트 포함)를 제거합니다.</p>");
            });
            $(".chocie .btn17").click(function(){
                $(".list p:last").remove();
            });
        });
    </script>
</body>
</html>
<!DOCTYPE html>   
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>jQuery</title>
    <style>
        * {margin: 0; padding: 0;}
        li {list-style: none; display: inline;}
        img { font-size: 0; line-height: 0;}
        a {border: 1px solid #5f6368; padding: 7px 20px 5px 20px; display: inline-block; border-radius: 20px; text-decoration: none; color: #000; margin: 4px;}
        .onBlue {padding: 4px 6px 2px 6px; font-size: 90%; color: #3d90b7; white-space: nowrap; background-color:#e7f6fd; border-radius: 4px; border: 1px dashed #3d90b7;}
        .onRed {padding: 4px 6px 2px 6px; font-size: 90%;  color: #c7254e; white-space: nowrap; background-color:#f9f2f4; border-radius: 4px; border: 1px dashed #a51a3d; }
    </style>
</head>
<body>    
    
    <h3>이미지 랜덤으로 나오기</h3>
   
    <div class="list">
        <ul>
            <li><img src="assets/img/img01.png" alt=""></li>
            <li><img src="assets/img/img02.png" alt=""></li>
            <li><img src="assets/img/img03.png" alt=""></li>
        </ul>
    </div>
    
    <script type="text/javascript" src="assets/js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript" src="assets/js/jquery-ui-1.12.1.min.js"></script>
    <script>
        $(function() {
            //모든 이미지의 크기를 100px로 설정해주세요!
            $("img").css("width","100px");
            
          
            $("h3").after("<div class='choice'></div>");
            $(".choice").append("<a href='#' class='btn1'>클릭하면 뒤쪽에 이미지가 추가됩니다.</a>");
            $(".choice").append("<a href='#' class='btn2'>클릭하면 앞쪽에 이미지가 추가됩니다.</a>");
            $(".choice").append("<a href='#' class='btn3'>클릭하면 뒤쪽에 이미지가 삭제합니다.</a>");
            $(".choice").append("<a href='#' class='btn4'>클릭하면 앞쪽에 이미지가 삭제합니다.</a>");
            $(".choice").append("<a href='#' class='btn5'>클릭하면 뒤쪽에 이미지를 랜덤으로 추가합니다.</a>");
            
            $(".choice .btn1").click(function(){
                $(".list ul").append("<li><img src='assets/img/img04.png' alt='' width='100'></li>");
            });
            $(".choice .btn2").click(function(){
                $(".list ul").prepend("<li><img src='assets/img/img05.png' alt='' width='100'></li>");
            });
            
            $(".choice .btn3").click(function(){
                $(".list ul li:first").remove();
            });
            $(".choice .btn4").click(function(){
                $(".list ul li:last").remove();
            });
            
            //이미지가 랜덤으로 나오는 함수
            function random(){
                var imgNumber = Math.ceil(Math.random()*5);
                var imgPath = "<li><img src='assets/img/img0"+imgNumber+".png' alt='' width='100'></li>";
                return imgPath;
            }
            
            $(".choice .btn5").click(function(){
                $(".list ul").append(random);
            });
        });
    </script>
</body>
</html>
<!DOCTYPE html>   
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>jQuery</title>
    <style>
        * {margin: 0; padding: 0;}
        li {list-style: none; display: inline;}
        img { font-size: 0; line-height: 0;}
        a {border: 1px solid #5f6368; padding: 7px 20px 5px 20px; display: inline-block; border-radius: 20px; text-decoration: none; color: #000; margin: 4px;}
        .onBlue {padding: 4px 6px 2px 6px; font-size: 90%; color: #3d90b7; white-space: nowrap; background-color:#e7f6fd; border-radius: 4px; border: 1px dashed #3d90b7;}
        .onRed {padding: 4px 6px 2px 6px; font-size: 90%;  color: #c7254e; white-space: nowrap; background-color:#f9f2f4; border-radius: 4px; border: 1px dashed #a51a3d; }
    </style>
</head>
<body>    
    
    <h3>2초에 한번씩 이미지 이동하기</h3>
    <div class="choice">
        <a href="#" class="btn1">클릭하면 이미지를 2초에 한번씩 이동합니다.</a>
        <a href="#" class="btn2">클릭하면 이미지를 2초에 한번씩 삭제해주세요!.</a>
        <a href="#" class="btn3">클릭하면 이미지를 2초에 한번씩 추가해주세요!.</a>
        <a href="#" class="btn4">클릭하면 이미지를 멈춥니다.</a>
    </div>

    <div class="list">
        <img src="assets/img/img01.png" alt="">
        <img src="assets/img/img02.png" alt="">
        <img src="assets/img/img03.png" alt="">
    </div>
    
    <script type="text/javascript" src="assets/js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript" src="assets/js/jquery-ui-1.12.1.min.js"></script>
    <script>
        $(function() {
            //모든 이미지의 크기를 150px로 설정해주세요!
            $("img").attr("width","150px");
            
            var timer;
            
            $(".choice .btn1").click(function(){
                timer = setInterval(function(){
                    $(".list img").last().prependTo(".list");
                },1000);
            });
            
            $(".choice .btn2").click(function(){
                timer = setInterval(function(){
                    $(".list img").last().remove();
                },1000);
            });
            
            $(".choice .btn3").click(function(){
                timer = setInterval(function(){
                    $(".list").last().append("<img src='assets/img/img05.png' alt='' width='150'>");
                },1000);
            });
            
            $(".choice .btn4").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() 선택한 요소의 실행중인 애니메이션을 정지합니다.
<!DOCTYPE html>   
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>jQuery</title>
    <style>
        * {margin: 0; padding: 0;}
        li {list-style: none; display: inline;}
        img { font-size: 0; line-height: 0;}
        a {border: 1px solid #5f6368; padding: 7px 20px 5px 20px; display: inline-block; border-radius: 20px; text-decoration: none; color: #000; margin: 4px;}
        .onBlue {padding: 4px 6px 2px 6px; font-size: 90%; color: #3d90b7; white-space: nowrap; background-color:#e7f6fd; border-radius: 4px; border: 1px dashed #3d90b7;}
        .onRed {padding: 4px 6px 2px 6px; font-size: 90%;  color: #c7254e; white-space: nowrap; background-color:#f9f2f4; border-radius: 4px; border: 1px dashed #a51a3d; }
    </style>
</head>
<body>    

    <div class="choice">
        <a href="#" class="btn1">.hide()</a>
        <a href="#" class="btn2">.show()</a>
        <a href="#" class="btn3">.toggle()</a>
        <a href="#" class="btn4">.fadeOut()</a>
        <a href="#" class="btn5">.fadeIn()</a>
        <a href="#" class="btn6">.fadeToggle()</a>
        <a href="#" class="btn7">.fadeTo(0.2)</a>
        <a href="#" class="btn8">.fadeTo(0.4)</a>
        <a href="#" class="btn9">.fadeTo(0.6)</a>
        <a href="#" class="btn10">.slideUp(100)</a>
        <a href="#" class="btn11">.slideDown("fast")</a>
        <a href="#" class="btn12">.slideToggle("slow")</a>
    </div>
    
    <div class="list">
        <img src="assets/img/img01.png" alt="">
        <img src="assets/img/img02.png" alt="">
        <img src="assets/img/img03.png" alt="">
    </div>
    
    <script type="text/javascript" src="assets/js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript" src="assets/js/jquery-ui-1.12.1.min.js"></script>
    <script>
        $(function() {
            //이미지 크기를 200을 설정해주세요!
            $("img").css("width","200");
            
            //h1태그를 만들고 글씨를 "Effect"라고 설정해주세요!
            $("body").prepend("<h1>Effect</h1>");
            
            $(".choice .btn1").click(function(){
                $(".list").hide();
            });
            $(".choice .btn2").click(function(){
                $(".list").show();
            });
            $(".choice .btn3").click(function(){
                $(".list").toggle();
            });
            
            $(".choice .btn4").click(function(){
                $(".list").fadeOut();
            });
            $(".choice .btn5").click(function(){
                $(".list").fadeIn();
            });
            $(".choice .btn6").click(function(){
                $(".list").fadeToggle();
            });
            
            $(".choice .btn7").click(function(){
                $(".list").fadeTo(1000, 0.2);
            });
            $(".choice .btn8").click(function(){
                $(".list").fadeTo(1000, 0.4);
            });
            $(".choice .btn9").click(function(){
                $(".list").fadeTo(1000, 0.6);
            });
            
            $(".choice .btn10").click(function(){
                $(".list").slideUp(100);
            });
            $(".choice .btn11").click(function(){
                $(".list").slideDown("fast");
            });
            $(".choice .btn12").click(function(){
                $(".list").slideToggle("slow");
            });
        });
    </script>
</body>
</html>