제이쿼리는 자바스크립트 라이브러리를 이용해 만든 언어입니다. 라이브러리는 자주 사용하는 코드를 재사용 및 효율성 있게 사용할 수 있도록 만들어진 함수의 집합을 의미합니다.

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

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

제이쿼리 라이브러리 파일은 jquery.com 사이트에서 다운받아 연동합니다.

제이쿼리 설정

제이쿼리 사이트 라이브러리 파일 다운로드

기본설정 View

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Sample01</title>

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

    <!-- jquery UI설정 -->
    <script src="assets/js/jquery-ui-1.12.1.min.js"></script>

    <!-- 구글 CDN 설정 -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

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

제이쿼리를 쓰기 위한 준비 작업입니다.
jQuery(document).ready(function(){
       //실행코드
});
jQuery를 $로도 사용할 수 있습니다..
$(document).ready(function(){
       //실행코드
});
생략하여 사용 할 수 있습니다.
$(function(){
       //실행코드
});
자바스크립트
window.onload=function(){
       //실행코드
});
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>제이쿼리를 사용하는 이유</title>
    <style>
        #list1 li {color:dodgerblue}
    </style>
    <script>
    window.onload=function(){ 
            var list1 = document.getElementById("list1");
            var liList = list1.getElementsByTagName("li");
            for(var i=0; i<liList.length; i++){
                var li = liList[i]
                li.style.color="blue";
            }
    };
    </script>
    <script src="assets/js/jquery-1.12.4.min.js"></script>
    <script>
    $(document).ready(function(){ 
       $("#list2 li").css("color","dodgerblue")
    });
    </script>
</head>
<body>
    <h3>JQuery Sample</h3>
    <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>
</body>
</html>

제이쿼리 선택자는 HTML 태그를 선택하여, 제이쿼리 기능을 쉽게 구현할 수 있다.

$("선택자").메서드(매개변수, 함수);
종류 예시 설명
태그 선택자 $("p") 기본 태그를 선택
클래스 선택자 $(".class") 클래스 태그를 선택
아이디 선택자 $("#id") 아이디 태그를 선택
그룹 선택자 $("#id, p, .class") 여러가지 태그를 선택합니다.
전체 선택자 $("*") 전체 태그를 선택
종류 예시 설명
자손 선택자 $("div ul li") 자식(하위) 태그 모두 선택
child 선택자 $("div >pi") 자식(하위) 태그만 선택(자손은 포함안됨)
sibling 선택자 $("div+p") 자식 태그 다음의 형제 태그를 선택
siblings 선택자 $("div~p") 자식 태그 다음의 모든 형제 태그를 선택
종류 예시 설명
[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']") 속성 중에 "naver"이 포함되어 있지 않는 속성을 선택
[name="value"][name="value"] $("li a [href][class]") 속성 중에 "href"와 "class"속성이 있는 속성을 선택
종류 설명
:animated show, hide, slideDown, SlidUp등의 애니메이션 태그를 선택
: eq(index) 선택된 태그들의 인덱스 번호를 통해 선택
: gt(index) 선택된 집합에서 인덱스보다 큰 인덱스를 가지고 있는 태그 선택
: lt(index) 선택된 집합에서 인덱스보다 작은 인덱스를 가지고 있는 태그 선택
: header 제목 요소(h1~h6) 태그들을 선택
: first 선택된 요소 중에서 첫 번째 요소를 찾아 선택
: last 선택된 요소 중에서 마지막 요소를 찾아 선택
: odd 선택된 요소 중에서 홀수 번째 요소를 찾아 선택
: even 선택된 요소 중에서 짝수 번째 요소를 찾아 선택
: not() 현재 선택한 요소의 반대 요소를 선
종류 설명
: contains() ()안의 텍스트와 일치하는 문자열이 요소의 내용 중에 있을 때 선택
: empty 요소에 텍스트가 없을 때 선택
: has() 요소 내부에 찾고 싶은 태그를 후손 요소까지 살펴본 후 있으면 선택
: parent empty와 반대 요소로 텍스트가 존재할 때 선택합니다.

컨텐츠 영역을 보이지 않게 하는 방법

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

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

종류 설명
: hidden 보이지 않는 요소를 선택
: visible 보이는 요소를 선택
:first-child 첫 번째 자식 요소를 선택
:last-child 마지막 자식 요소를 선택
:nth-child(index) index 번째 자식 요소를 선택
:nth-child(even 짝수 번째 자식 요소를 선택
:nth-child(odd) 홀수 번째 자식 요소를 선택
:nth-child(2n) 2배수 번째 자식 요소를 선택
:only-child 자식 요소가 오직 하나인 요소를 선택
종류 설명
:input 모든 입력 양식을 선택합니다.
:file 파일 업로드 양식을 선택합니다.
:hidden 숨겨진 입력 양식을 선택합니다.
:image 이미지 입력 양식을 선택합니다.
:password 암호 입력 양식을 선택합니다.
:radio 라디오 버튼 입력 양식을 선택합니다.
:reset 리셋 입력 양식을 선택합니다.
:submit 데이터 보내기 입력 양식을 선택합니다.
:text 텍스트 박스 양식을 선택합니다.
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>선택자</title>
    <script src="assets/js/jquery-1.12.4.min.js"></script>
    <script>
        $(document).ready(function(){ 
//            $("h3").css("background-color","#bbdefb").css("border","3px dashed #303f8f")
//            $("h3").css({"background-color":"#bbdefb","border":"3px dashed #303f8f"});
//            $("h3").css({backgroundColor:"#bbdefb",border:"3px dashed #303f8f"});
//            $(".list").css({backgroundColor:"#bbdefb",border:"3px dashed #303f8f"});
//            $("#list1").css({backgroundColor:"#bbdefb",border:"3px dashed #303f8f"});
//            $("#list1, #list2").css({backgroundColor:"#bbdefb",border:"3px dashed #303f8f"});
//            $("*").css({backgroundColor:"#bbdefb",border:"3px dashed #303f8f"});
//            $(".list ul").css({backgroundColor:"#bbdefb",border:"3px dashed #303f8f"});
//            $(".list>ul").css({backgroundColor:"#bbdefb",border:"3px dashed #303f8f"});
//            $(".one1+li").css({backgroundColor:"#bbdefb",border:"3px dashed #303f8f"});
//            $(".one1~li").css({backgroundColor:"#bbdefb",border:"3px dashed #303f8f"});
//            $("li a[href='#list2']").css({backgroundColor:"#bbdefb",border:"3px dashed #303f8f"});
//            $("li a[href^='http']").css({backgroundColor:"#bbdefb",border:"3px dashed #303f8f"});
//            $("li a[href$='com']").css({backgroundColor:"#bbdefb",border:"3px dashed #303f8f"});
//            $("li a[href*='pencil']").css({backgroundColor:"#bbdefb",border:"3px dashed #303f8f"});
//            $("li a[href!='http://naver.com']").css({backgroundColor:"#bbdefb",border:"3px dashed #303f8f"});
//            $("li a[href][title]").css({backgroundColor:"#bbdefb",border:"3px dashed #303f8f"});
//            $(".list li:eq(7)").css({backgroundColor:"#bbdefb",border:"3px dashed #303f8f"});
//            $(".list li:gt(7)").css({backgroundColor:"#bbdefb",border:"3px dashed #303f8f"});
//            $(".list li:lt(7)").css({backgroundColor:"#bbdefb",border:"3px dashed #303f8f"});
//            $(".list li:first").css({backgroundColor:"#bbdefb",border:"3px dashed #303f8f"});
//            $(".list li:last").css({backgroundColor:"#bbdefb",border:"3px dashed #303f8f"});
//            $(".list ul>li:odd").css({backgroundColor:"#bbdefb",border:"3px dashed #303f8f"});
//            $(".list li:even").css({backgroundColor:"#bbdefb",border:"3px dashed #303f8f"});
//            $(".list li:not(:eq(7))").css({backgroundColor:"#bbdefb",border:"3px dashed #303f8f"});
//            $(".list li:contains(6)").css({backgroundColor:"#bbdefb",border:"3px dashed #303f8f"});
//            $(".list ul:has('li')").css({backgroundColor:"#bbdefb",border:"3px dashed #303f8f"});
//            $("li:empty").text("one5").css({backgroundColor:"#bbdefb",border:"3px dashed #303f8f"});
//            $("li:parent").css({backgroundColor:"#bbdefb",border:"3px dashed #303f8f"});
//            $("li:hidden").css({backgroundColor:"#bbdefb",border:"3px dashed #303f8f",display:"block"});
//            $("li:visible").css({backgroundColor:"#bbdefb",border:"3px dashed #303f8f"});
//            $("li:first-child").css({backgroundColor:"#bbdefb",border:"3px dashed #303f8f"});
//            $("li:first").css({backgroundColor:"#bbdefb",border:"3px dashed #303f8f"});
//            $("li:last-child").css({backgroundColor:"#bbdefb",border:"3px dashed #303f8f"});
//            $("li:last").css({backgroundColor:"#bbdefb",border:"3px dashed #303f8f"});
//            $("li:nth-child(3)").css({backgroundColor:"#bbdefb",border:"3px dashed #303f8f"});
//            $("li:nth-child(even)").css({backgroundColor:"#bbdefb",border:"3px dashed #303f8f"});
//            $("li:nth-child(odd)").css({backgroundColor:"#bbdefb",border:"3px dashed #303f8f"});
//            $("li:nth-child(2n)").css({backgroundColor:"#bbdefb",border:"3px dashed #303f8f"});
//            $("li:nth-child(2n+1)").css({backgroundColor:"#bbdefb",border:"3px dashed #303f8f"});
//            $("li:only-child").css({backgroundColor:"#bbdefb",border:"3px dashed #303f8f"});        
        });           
    </script>
</head>
<body>
       <h3>JQuery Sample</h3>
           <div id="list1" class="list">
            <ul >
              <li class="one1"><a href="#list2">one1</a></li>
              <li class="one2"><a href="http://naver.com">one2</a></li>
              <li class="one3"><a href="http://www.daum.net">one3</a></li>
              <li class="one4"><a href="http://b-pencil.co.kr" title="바로가기">one4</a></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"></li>                
            </ul>
            <ul id="list2" class="list">
<!--               <ul>-->
                <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
                    <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>
            </div>
            <ul>
                <li>기본 선택자:   $("h3").css({backgroundColor:"#bbdefb",border:"3px dashed #303f8f"}); </li>
                <li>클래스 선택자: $(".list").css({backgroundColor:"#bbdefb",border:"3px dashed #303f8f"});</li>
                <li>아이디 선택자 :$("#list1").css({backgroundColor:"#bbdefb",border:"3px dashed #303f8f"}); </li>
                <li>그룹 선택자 :  $("#list1, #list2").css({backgroundColor:"#bbdefb",border:"3px dashed #303f8f"});</li>
                <li>전체 선택자 : $("*").css({backgroundColor:"#bbdefb",border:"3px dashed #303f8f"}); </li>             
                <li>자손 선택자 : $(".list ul").css({backgroundColor:"#bbdefb",border:"3px dashed #303f8f"});</li>
            </ul>
           <ul>
                <li>child 선택자:  $(".list>ul").css({backgroundColor:"#bbdefb",border:"3px dashed #303f8f"});</li>
                <li>sibling 선택자: $(".one1+li").css({backgroundColor:"#bbdefb",border:"3px dashed #303f8f"});</li>
                <li>siblings 선택자 : $(".one1~li").css({backgroundColor:"#bbdefb",border:"3px dashed #303f8f"});</li>
            </ul>
           <ul>
                <li>[name="value"] : $("li a[href='#list2']").css({backgroundColor:"#bbdefb",border:"3px dashed #303f8f"});</li>
                <li>[name^="value"] : $("li a[href^='http']").css({backgroundColor:"#bbdefb",border:"3px dashed #303f8f"});</li>
                <li>[name$="value"] : $("li a[href$='com']").css({backgroundColor:"#bbdefb",border:"3px dashed #303f8f"});</li>
                <li>[name*="value"] : $("li a[href*='pencil']").css({backgroundColor:"#bbdefb",border:"3px dashed #303f8f"});</li>
                <li>[name!="value"] :  $("li a[href!='http://naver.com']").css({backgroundColor:"#bbdefb",border:"3px dashed #303f8f"});</li>
                <li>[name="value"][name="value"] :     $("li a[href][title]").css({backgroundColor:"#bbdefb",border:"3px dashed #303f8f"}); </li>
                
            </ul>
            <ul>
                <li>: eq(index) : $(".list li:eq(7)").css({backgroundColor:"#bbdefb",border:"3px dashed #303f8f"});</li>
                <li>: gt(index) : $(".list li:gt(7)").css({backgroundColor:"#bbdefb",border:"3px dashed #303f8f"});</li>
                <li>: lt(index) : $(".list li:lt(7)").css({backgroundColor:"#bbdefb",border:"3px dashed #303f8f"});</li>
                <li>: first : $(".list li:first").css({backgroundColor:"#bbdefb",border:"3px dashed #303f8f"});</li>
                <li>: last : $(".list li:last").css({backgroundColor:"#bbdefb",border:"3px dashed #303f8f"});</li>
                <li>: odd : $(".list li:odd").css({backgroundColor:"#bbdefb",border:"3px dashed #303f8f"});</li>
                <li>: even : $(".list li:even").css({backgroundColor:"#bbdefb",border:"3px dashed #303f8f"});</li>
                <li>: not() : $(".list li:not(:eq(7))").css({backgroundColor:"#bbdefb",border:"3px dashed #303f8f"}); </li>
            </ul>
              
            <ul>
                <li>: contains() :  $(".list li:contains(6)").css({backgroundColor:"#bbdefb",border:"3px dashed #303f8f"});</li>
                <li>: empty : $(".list ul:has('li')").css({backgroundColor:"#bbdefb",border:"3px dashed #303f8f"});</li>
                <li>: has() : $("li:empty").css({backgroundColor:"#bbdefb",border:"3px dashed #303f8f"});</li>
                <li>: parent :$("li:parent").css({backgroundColor:"#bbdefb",border:"3px dashed #303f8f"}); </li>
                <li>$("li:hidden").css({backgroundColor:"#bbdefb",border:"3px dashed #303f8f",display:"block"});</li>
                <li>$("li:visible").css({backgroundColor:"#bbdefb",border:"3px dashed #303f8f"});</li>
            </ul>
                     
            <ul>
                <li>$("li:first-child").css({backgroundColor:"#bbdefb",border:"3px dashed #303f8f"});</li>
                <li>$("li:last-child").css({backgroundColor:"#bbdefb",border:"3px dashed #303f8f"});</li>
                <li>$("li:nth-child(3)").css({backgroundColor:"#bbdefb",border:"3px dashed #303f8f"});</li>
                <li>$("li:nth-child(even)").css({backgroundColor:"#bbdefb",border:"3px dashed #303f8f"});</li>
                <li> $("li:nth-child(odd)").css({backgroundColor:"#bbdefb",border:"3px dashed #303f8f"});</li>
                <li> $("li:nth-child(2n)").css({backgroundColor:"#bbdefb",border:"3px dashed #303f8f"});</li>
                <li>$("li:nth-child(2n+1)").css({backgroundColor:"#bbdefb",border:"3px dashed #303f8f"});</li>
                <li>$("li:only-child").css({backgroundColor:"#bbdefb",border:"3px dashed #303f8f"});            </li>
            </ul>

</body>
</html>

제이쿼리의 선택자를 기준으로 선택한 요소 중 원하는 요소를 다시한번 더 선택할 수 있는 탐색과 관련된 제이쿼리 매서드. 탐색은 크게 트리구조와 필터로 나눌 수 있다.

매서드 설명
.children() 선택한 요소의 모든 자식 요소를 선택(자손요소 포함안됨)
.find() 선택한 요소의 자손 요소 중 조건에 맞는 요소 선택
.next() 선택한 요소의 다음 요소를 선택
.nextAll() 선택한 요소의 모든 다음 요소를 선택
.parent() 선택한 요소의 부모 요소를 선택
.parents() 선택한 요소의 모든 부모 요소를 선택
.prev 선택한 요소의 이전 요소 선택
.prevAll() 선택한 요소의 모든 이전 요소 선택
.closest() 선택한 요소를 포함하면서 가장 가까운 상위 요소를 선택
.nextUntil() 다음에 위치한 요소를 조건에 맞을 때까지 찾는다.
.parentUntil() 조건이 참이 될때까지 부모 요소를 찾는다
.prevUntil() 이전에 위치한 요소를 조건에 맞을 때까지 찾는다
.siblings() 형제 요소를 모두 찾는다.
매서드 설명
.eq() 인덱스 번호에 해당하는 요소를 찾는다.
.filter() 선택한 요소 집합에서 선택자를 추가하거나 함수를 사용하여 원하는 결과를 추출
.first() 선택한 요소 집합에서 첫 번째 자식 요소를 찾음
.last() 선택한 요소 집합에서 마지막 자식 요소를 찾음
.has() 선택한 요소들이 자신의 자식 요소에서 주어진 선택자가 있는지 확인하여 범위를 축소
.map() 대상이 되는 요소 집합의 배열을 새롭게 변형
.not() 조건에 맞지 않은 것들만 찾아서 선택
.slice() 선택된 집합을 조건으로 범위를 재선택
<script*>
$(document).ready(function(){ 
//$(".list li").eq(2).css({backgroundColor:"#bbdefb",border:"3px dashed #303f8f"});
//$(".list li:eq(2)").css({backgroundColor:"#bbdefb",border:"3px dashed #303f8f"});
//$(".list li").filter(".one5").css({backgroundColor:"#bbdefb",border:"3px dashed #303f8f"});
//$(".list li").first().css({backgroundColor:"#bbdefb",border:"3px dashed #303f8f"});
//$(".list li").last().css({backgroundColor:"#bbdefb",border:"3px dashed #303f8f"});                       
//$(".list li").has("ul").css({backgroundColor:"#bbdefb",border:"3px dashed #303f8f"}); 
//$(".list li").not(".one5").css({backgroundColor:"#bbdefb",border:"3px dashed #303f8f"});
$(".list li").slice(1,7).css({backgroundColor:"#bbdefb",border:"3px dashed #303f8f"});
        });
</script*>
매서드 설명
.add() 문서 객체를 추가적으로 선택
.addBack() 선택한 요소의 이전 선택된 요소를 추가 선택
.contents() 선택한 요소를 포함하여 자식 요소를 선택
.each() 여러개의 요소를 순차적으로 선택할 때 사용
.end() 문서 객체 선택을 한 단계 뒤로 돌린다.

each

<script>

$(document).ready(function(){ 

     /*$(".list li").eq(0).text("목록1");
     $(".list li").eq(1).text("목록2");
     $(".list li").eq(2).text("목록3");
     $(".list li").eq(3).text("목록4");
     $(".list li").eq(4).text("목록5");
     $(".list li").eq(5).text("목록6");            
     $(".list li").eq(6).text("목록7");
     $(".list li").eq(7).text("목록8");
     $(".list li").eq(8).text("목록9");
     $(".list li").eq(9).text("목록10");      */
    $(".list li").each(function(i, a){
        var i=i+1
        $(a).text("목록"+i);
    });
});

</script>

Manipulation은 DOM 구조를 변경할 수 있는 제이쿼리 메서드

종류 설명
.clone() 선택한 요소 복사
.unwrap() 선택한 요소의 부모 요소를 삭제
.wrap() 선택한 요소에 새로운 요소를 추가
.wrapAll() 선택한 요소에 새로운 요소를 한꺼번에 추가
.wrapInner() 선택한 요소에 새로운 요소를 각각 추가
.append() 선택한 요소 마지막 위치에 새로운 요소를 추가
.appendTo(target) 선택한 요소(타겟) 마지막 위치에 새로운 요소 추가
.prepend() 선택한 요소 처음 위치에 새로운 요소를 추가
.prependTo(target) 선택한 요소(타겟)처음 위치에 새로운 요소를 추가
.after() 선택한 요소 다음 위치에 새로운 요소를 추가
.before() 선택한 요소 이전 위치에 새로운 요소를 추가
.insertafter(target) 선택한 요소(타겟)다음 위치에 새로운 요소를 추가
.insertBefore(target) 선택한 요소(타겟)이전 위치에 새로운 요소를 추가
.empty() 선택한 요소의 하위 내용들을 삭제
.remove() 선택한 요소 삭제
.replaceAll() 선택한 요소를 새로운 요소로 바꿈
.replaceWidth() 선택한 요소를 새로운 요소로 바꿈
.html() 선택한 요소 내부의 html을 읽고 쓸수 있다.
.text() 선택한 요소의 텍스트를 읽고 쓸 수 있다.
<script>
 $(document).ready(function(){ 
//            $(".list").append("<li>내용4</li>");
//            $(".list").prepend("<li>내용0</li>");
//            $("<li>내용4</li>").appendTo(".list");
//            $("<li>내용0</li>").prependTo(".list");
            
//            
//            $(".slist1").before("<li>내용0</li>");
//            $(".slist3").after("<li>내용4</li>");
            
//            $("<li>내용0</li>").insertBefore(".slist1");
//            $("<li>내용4</li>").insertAfter(".slist3");
           
//             $("h3").replaceWith("<h2>JQuery</h2>");
//            $(".plist1").wrap("<div />");
//            $(".list").unwrap();
//            $(".plist1").wrap("<div />");
//            $(".plist2").wrapAll("<div />");
//            $("li").wrapInner("<h4/>");
            
//            $(".slist1").empty();
//            $(".list").remove();
             });
 </script>

attend

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>랜덤 이미지</title>
<script src="assets/js/jquery-1.12.4.min.js"></script>
<script>

    $(document).ready(function(){ 
        $("#append").click(function(){
           $("#container").append(Img()); 
        });

   });
    //랜덤으로 나오는 이미지 함수
    function Img(){
        var n = Math.ceil(Math.random()*5);
        var imgPath=" <img src='assets/img/img0"+n+".jpg' width='200' alt='이미지' >"
        return imgPath;
    }

</script>
</head>
<body>
<button id="append">append</button>
<div id="container">
<!--        <img src="assets/img/img01.jpg" width="200" alt="이미지" >-->
</div>

</body>
</html>

이미지 슬라이드

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    
    <script src="assets/js/jquery-1.12.4.min.js"></script>
    <script>
        // 이미지 크기를 300으로 바꾸기
        $(document).ready(function(){ 
            $("img").css({width:'300'});
            
            //버튼을 클릭했을 때
            $("#btn").click(function(){
               $("img").css({width:'200'});
            });
            
            //버튼2을 클릭할 때마다 쟝소 width값을 10씩 증가
        $("#btn2").click(function(){
               $("img").css("width","+=10");
            });
            
            //버튼3을 클릭하면 세번째 이미지를 삭제
            $("#btn3").click(function(){
               $("img").eq(2).remove();
             });
            
            //버튼4를 클릭하면 마지막에 이미지를 추가
            $("#btn4").click(function(){
               $("body").append(" <img src='assets/img/img03.jpg' width='300' alt='이미지' >");
             });
            
            //버튼5를 클릭하면 마지막에 이미지를 추가
//              $("#btn5").click(function(){
//              $("img").eq(0).remove();
//               $("body").append(" <img src='assets/img/img01.jpg' width='300' alt='이미지' >");
//             });
            
               $("img").wrapAll(" <div/>");
               $("img").parent().addClass("box"); 
                $("#btn5").click(function(){
               $("img").first().appendTo(".box");
             });
            //버튼6를 클릭하면 마지막이미지를 앞에 추가
               $("#btn6").click(function(){
               $("img").last().prependTo(".box");
             });
              //함수를 사용해서 2초마다 한번씩 첫 번째 이미지를 마지막으로 보내기
            setInterval(function(){ $("img").first().appendTo(".box");},2000);
         });
      
            
    </script>
</head>
<body>
   <button id="btn">button</button>
    <button id="btn2">button2</button>
    <button id="btn3">button3</button>
    <button id="btn4">button4</button>
    <button id="btn5">button5</button>
    <button id="btn6">button6</button>
    <img src="assets/img/img01.jpg" alt="" width="200">
    <img src="assets/img/img02.jpg" alt="" width="200">
    <img src="assets/img/img03.jpg" alt="" width="200">
    <img src="assets/img/img04.jpg" alt=""width="200">
    <img src="assets/img/img05.jpg" alt="" width="200">
</body>
</html>
    

문서 객체의 속성과 관련된 기능을 처리해주는 제이쿼리 메서드

종류 설명
.attr() 새로운 속성을 생성하거나 기존의 속성을 변경할 때 사용
.prop() 선택한 요소에 속성을 반환, 생성, 변환할 때 사용
.removeAttr() 선택한 요소에서 기존의 속성을 삭제
.removeProp() 선택한 요소에서 기존의 속성을 삭제
.val 입력 요소에 있는 속성 값을 불러오거나 변경할 때 사용

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>attr</title>
<script src="assets/js/jquery-1.12.4.min.js"></script>
<style>
*{margin:0; padding: 0;}
li{list-style: none}
a{text-decoration: none}
#tab-menu {overflow: hidden; width: 320px;margin: 50px auto;}
#tab-btn li {float: left;width: 80px;text-align: center;}
#tab-btn li a {background: #ccc; padding: 10px; display: block;}
</style>
<script>
$(document).ready(function(){ 
var attr = $("#tab-cont img").attr("src");
//                alert(attr);
//                $("#tab-cont img").attr("alt","이미지1");

$("#tab1").click(function(){
$("#tab-cont img").attr({"src":"assets/img/img01.jpg","alt":"이미지1"});
});
$("#tab2").click(function(){
$("#tab-cont img").attr({"src":"assets/img/img02.jpg","alt":"이미지2"});
});
$("#tab3").click(function(){
$("#tab-cont img").attr({"src":"assets/img/img03.jpg","alt":"이미지3"});
});
$("#tab4").click(function(){
$("#tab-cont img").attr({"src":"assets/img/img04.jpg","alt":"이미지4"});
});



});
</script>
</head>
<body>
<div id="tab-menu">
<div id="tab-btn">
<ul>
<li id="tab1"><a href="#">tab1</a></li>
<li id="tab2"><a href="#">tab2</a></li>
<li id="tab3"><a href="#">tab3</a></li>
<li id="tab4"><a href="#">tab4</a></li>
</ul>
</div>
<div id="tab-cont"><img src="assets/img/img02.jpg" alt="" width="320"></div>
</div>

</body>
</html>

위치와 크기를 읽고 설정한느 제이쿼리 메서드

종류 설명
width() 요소의 가로 크기를 반환하거나 변경
height() 요소의 세로 크기를 반환하거나 변경
innerWidth() padding 값을 포함한 가로 크기를 변환하거나 변경
innerHeight() padding값을 포함한 세로 크기를 반화하거나 변경
outerWidth(boolean) padding값과 border값을 포함한 가로 크기를 반환하거나 변경
outerHeight(boolean) padding값과 border값을 포함한 세로 크기를 반환하거나 변경

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="assets/js/jquery-1.12.4.min.js"></script>
<style>
*{margin:0; padding: 0;}
li{list-style: none}
a{text-decoration: none}
#wrapper {border: 5px solid blue; padding: 100px; margin: 20px;}
</style>



</head>
<body>
<div id="wrapper">
<span>박스의 width=</span><span id="width">0</span><br>
<span>박스의 height=</span><span id="height">0</span><br>
<span>박스의 innerWidth=</span><span id="innerWidth">0</span><br>
<span>박스의 innerHeight =</span><span id="innerHeight">0</span><br>    
<span>박스의 outerWidth =</span><span id="outerWidth">0</span><br>
<span>박스의 outerHeight</span><span id="outerHeight">0</span><br>
</div>
<script>
var box=$('#wrapper');
$(window).resize(function(){
$("#width").text(box.width());
$("#height").text(box.height());
$("#innerWidth").text(box.innerWidth());
$("#innerHeight").text(box.innerHeight());
$("#outerWidth").text(box.outerWidth());
$("#outerHeight").text(box.outerHeight());

});
</script>
</body>
</html>
종류 설명
.offset() 웹 문서를 기준으로 위치 값을 읽어오며, left와 top의 속성을 x축 y축으로 알려준다
.position() 기준점을 통해 선택한 요소의 위치값을 읽어오며, left와 top의 속성을 x축 y축 좌표를 알려준다.
.scrollLeft() 브라우저 요소의 가로 스크롤 이동값을 가져온다.
.scrollTop() 브라우저 요소의 세로 스크롤 이동 값을 가져온다.
offset, position

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>offset</title>
    <script src="assets/js/jquery-1.12.4.min.js"></script>
    <script src="assets/js/jquery-ui-1.12.1.min.js"></script>
    <script>
         $( function() {
             
             var box = $("#box");
             var offset = $("#offset");
             
            box.draggable({
                drag:function(){
                    offset.find(".ol").text(box.offset().left);
                    offset.find(".ot").text(box.offset().top);
                    offset.find(".pl").text(box.position().left);
                    offset.find(".pt").text(box.position().top);
                }
              });
          } );
    
    </script>
    <style>
     #wrapper {position: absolute; width: 500px; height: 500px; left: 100px;
        top: 100px;}
        #box {width: 100px; height: 100px; position:absolute; left: 50px; top: 50px; background-color: antiquewhite; border: 3px solid red; text-align: center; 
            line-height: 100px;}
    </style>
</head>
<body>
   <div id="offset">
       <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>
   </div>
    
    <div id="wrapper">
        <div id="box"></div>
    </div>
</body>
</html>
scrollLeft, scrollTop
무한 이미지 로딩
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    
    
     <!-- jquery 설정 -->
	<script src="assets/js/jquery-1.12.4.min.js"></script>
	<script src="assets/js/jquery-ui-1.12.1.min.js"></script>
	<script>
        $(window).scroll(function(){
                var scrollHeight=$(window).scrollTop() +$(window).height();
                var documentHeight=$(document).height()
                
                //스크롤의 높이와 문서의 높이가 같으면 
                if (scrollHeight == documentHeight){
                    for(var i=0; i<10 ; i++){
                        $('<div><img src="assets/img/img02.jpg" width="200"></div>').appendTo('body');
                    }
                }
        })
        
          for(var i=0; i<8 ; i++){
                        $('<div><img src="assets/img/img01.jpg" width="200"></div>').appendTo('body');
                    }
    </script>
</body>
</html>
    
    
종류 설명
.css() css() 요소 값을 알아낼 수도 있고, 설정도 할 수 있습니다.
.addClass() 특정한 클래스 요소를 추가 할 수 있습니다.
.hasClass() 특정한 클래스를 있는지를 찾을 수 있습니다.
.removeClass() 특정한 클래스를 요소에서 제거할 수 있습니다.
.toggleClass() 특정한 클래스의 추가 제거를 한번에 할 수 있습니다.
addClass를 이용한 탭 메뉴 만들기
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>A</title>
      <script src="assets/js/jquery-1.12.4.min.js"></script>
      <style>
        *{margin:0; padding: 0;}
        li{list-style: none}
        a{text-decoration: none}
        #tab-menu {overflow: hidden; width: 320px;margin: 50px auto;}
        #tab-btn li {float: left;width: 80px;text-align: center;}
        #tab-btn li a {background: #ccc; padding: 10px; display: block;}
        #tab-cont {width: 320px; height: 300px; margin-top: 38px; }
        #tab-cont.img1 {background: url(assets/img/img01.jpg) no-repeat; background-size: 320px; }
        #tab-cont.img2 {background: url(assets/img/img02.jpg) no-repeat; background-size: 320px; }
        #tab-cont.img3 {background: url(assets/img/img03.jpg) no-repeat; background-size: 320px; }
        #tab-cont.img4 {background: url(assets/img/img04.jpg) no-repeat; background-size: 320px; }
    </style>
    <script>
        $(document).ready(function(){
            $("#tab1").click(function(){
               $("#tab-cont").removeClass().addClass("img1"); 
            });
            $("#tab2").click(function(){
               $("#tab-cont").removeClass().addClass("img2"); 
            });
            $("#tab3").click(function(){
               $("#tab-cont").removeClass().addClass("img3"); 
            });
            $("#tab4").click(function(){
               $("#tab-cont").removeClass().addClass("img4"); 
            });
        });
    </script>    
</head>
<body>
   <div id="tab-menu">
       <div id="tab-btn">
           <ul>
               <li id="tab1"><a href="#">tab1</a></li>
               <li id="tab2"><a href="#">tab2</a></li>
               <li id="tab3"><a href="#">tab3</a></li>
               <li id="tab4"><a href="#">tab4</a></li>
           </ul>
       </div>
       <div id="tab-cont" class="img1">
       </div>
   </div>   
</body>
</html>    

다양한 움직임과 효과를 줄 수 있는 제이쿼리 메서드

$(selector).method();
$(selector).method(duration);
$(selector).method(duration, callback);
$(selector).method(duration. eading, callback);
duration:이펙트가 지속된느 시간을 의미. 1/1000밀리세컨드 단위로 'slow','normal','fast'로 표현 easing:이펙트 스피드를 조절하는 효과
callback:콜백함수는 스스로 호출되는 함수의 의미로 애니메이션 효과가 완료되면 자동으로 호출되는 함수
종류 설명
.hide() 선택한 요소 숨김
.show() 선택한 요소 보여줌
.toggle() 숨겨져 있던 요소를 노출시키고, 노출되어 있던 요소는 숨김
.fadeIn() opacity를 0에서 1로 전환하면서 서서히 나타나게 처리
.fadeOut() opacity를 1에서 0로 전환하면서 서서히 나타나게 처리
.fadeToggle() fadeIn()과 fadeOut()을 번갈아 가면서 실행
.slideDown() 슬라이딩스타일로 요소를 보이게 함
.slidUp() 슬라이딩 스타일로 요소를 숨기게 함
.slideToggle() slideDown()과 slideUp()을 반복하여 바꿈.
Effect

Animations

종류 설명
.animate() 선택한 요소에 애니메이션을 적용
.stop() 실행중인 애니메이션을 정지
.delay() 스택에 대기 중인 애니메이션 효과를 지연
.queue() 선택한 요소의 스택에 대기 중인 큐를 반환하거나 함수의 실행을 큐로 추가
.clearQueue() 첫 번째 큐에 해당하는 효과 또는 애니메이션만 실행하고 대기 중인 큐를 모두 삭제
.dequeue() 스택에 쌓인 큐를 모두 제거
.finish() 선택한 요소의 진행 중인 애니메이션을 강제로 완료 시점으로 간 후 종료

브라우저에서 사용자가 취하는 모든 동작을 이벤트라 한다. 마우스로 클릭을 하거나 마우스를 올리는 행위가 이벤트에 해당. 이벤트가 발생했을 때 자바스크립트 실행문을 실행하는 것을 이벤트 핸들러라 한다.

종류 설명
.blind() 선택한 요소에 한개 이상의 이벤트를 등록할 수 있다.
.unblind() 선택한 요소에 이벤트 제거
.delegate() 선택한 요소의 지정한 하위 요소에 이벤트를 등록
.undelegate() 선택한 요소의 지정한 하위 요소에 이벤트를 제거
.on() 선택한 요소에 이벤트를 설정
.off() on() 메서드로 생성한 이벤트를 제거
.triggle() 선택한 요소에 이벤트를 수동으로 발생
.triggleHandler() 선택한 요소에 이벤트를 수동으로 호출

jQuery 1.9버전 이전에는 bind(). delegate(), live() 이벤트가 있었지만 1.9 버전 이후에는 on()메서드로 통일

마우스 이벤트

종류 설명
.click() 선택한 요소를 클릭했을 때 이벤트 발생
.dblclick() 선택한 요소를 더블 클릭했을 때 이벤트 발생
.hover() 선택한 요소에 마우스를 올렸을 때(mouseenter)와 벗어났을 때 (mouseleave)가 발생
.mousedown() 선택한 요소에서 마우스 버튼을 눌렀을 떄 이벤트가 발생
.mouseout() 선택한 요소에 마우스가 벗어 났을 때 이벤트가 발생
.mouseover() 선택한 요소에서 마우스를 올렸을 때 이벤트 발생
.mouseup() 선택한 요소에 마우스를 눌렀다가 떼었을 때 이벤트가 발생
.mouseenter() 선택한 요소 범위 내에서 마우스를 올렸을 때 이벤트가 발생
.mouseleave() 선택한 요소 범위 내에서 마우스가 벗어났을 때 이벤트 발생
.mousemove() 선택한 요소 범위 내에서 마우스를 움직였을 때 이벤트가 발생
폰트 사이즈 변경
<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>폰트 크기 변경</title>    
    <style>
        body{ font-size: 12px dotum, "돋움", sans-serif;}
        .text-wrap{font-family: dotum, "돋움", sans-serif;}
    </style>
    <!-- jquery 설정 -->
	<script src="assets/js/jquery-1.12.4.min.js"></script>
    <script src="assets/js/jquery-ui-1.12.1.min.js"></script>
    <script         
     $(document).ready(function(){
          var size=12;
         $(".zoom button").on("click",function(){
             var btn_index=$(this).index();
//             console.log(btn_index);
        
         if(btn_index==0){
             size++;
              $(".text-wrap").css("font-size",size+"px");
         } else if(btn_index==2){
             size--;
              $(".text-wrap").css("font-size",size+"px");
         } else {
             $(".text-wrap").css("font-size","12px");
             size=12;
         }
              });
        $("#fs").on("change",function(){
            $(".text-wrap").css("font-family",$(this).val());
        }) ;
         
     });
        
    </script>
	
</head>
<body>   
      <div class="btn">
          <div class="zoom"> 
              글자크기
              <button>+</button>
              <button>0</button>
              <button>-</button>
          </div>
          
          <div class="font">
              <select id="fs" name="fs">
                  <option value="Nanum Gothic,'나눔고딕'">나눔고딕</option>
                  <option value="Nanum Myeongjo,'나눔명조'">나눔명조</option>
                  <option value="Malgun Gothic,'맑은 고딕'">맑은고딕</option>
                  <option value="dotum,'돋움'">돋움</option>
                  <option value="Gulim, '굴림'">굴림</option>
                  <option value="Gungsuh,'궁서'">궁서</option>
              </select>         
          </div>
      </div>  
      
   <div>
    <p  class="text-wrap">
        Oh Love, oh love. Won't you rain on me tonight? 
        Oh life, oh life. Please don't pass me by.
        Don't stop, don't stop. Don't stop when the red lights flash
        Oh ride, free ride. Won't you take me close to you
        Far away, far away
         Waste away tonight. I'm wearing my heart on a noose<br><br>
        
        언제나 꿈이 덜 깬 것처럼 사는 게 사는 것 같진 않아 언제나 술이 덜 깬 것처럼 갈증은 멈춰지지가 않아 천천히 너를 느껴봐 언제나 한순간이야 어제를 안타까워 하지마 알잖아 바꿀 순 없을 거야 내일을 두려워하지는 마 오늘을 마지막같이 살아 <br>
        천천히 너를 느껴봐 언제나 한순간이야 다른 결정적인 순간은 없어 이순간이 내겐 전부일 뿐이야.
 </p>
    </div>
</body>
</html>
탭메뉴 만들기
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>탭 메뉴 만들기</title>
    <style>
        #jsTab {padding: 20px; width: 300px; margin: 200px auto;}
        #jsTab li {list-style: none; display: inline-block; position: relative;}
        #jsTab li a {background-color: #ea9c9c; padding: 10px; color:white; border-radius: 5px; display: inline-block; text-decoration: none;}
        #jsTab li em {opacity: 0; ; position: absolute; left: 50%; bottom: 70px; background: #000; color: white; width: 200px; padding: 10px; border-radius: 5px; margin-left: -100px;}
        #jsTab li em:after {
            content: '';
            position: absolute; left: 50%; bottom: -8px; 
            transform: translateX(-50%);
            border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 10px solid black
        }
        
        
    </style>
</head>
<body>
           
   <div id="jsTab">
       <ul>
           <li><a href="#" data-title="drove by all the places we used to hang out getting wasted I thought about our last kiss, how it felt, the way you tasted And even though your friends tell me you're doing fine">JS TAB1</a></li>
           <li><a href="#" data-title="drove by all the places we used to hang out getting wasted I thought about our last kiss, how it felt, the way you tasted And even though your friends tell me you're doing fine">JS TAB2</a></li>
           <li><a href="#" data-title="drove by all the places we used to hang out getting wasted I thought about our last kiss, how it felt, the way you tasted And even though your friends tell me you're doing fine">JS TAB3</a></li>
       </ul>
   </div>
    
    
    
    
    <!-- jquery 설정 -->
	<script src="assets/js/jquery-1.12.4.min.js"></script>
    <script src="assets/js/jquery-ui-1.12.1.min.js"></script>
    <script>
        //css,animate를 이용한 경우  - <sytle> #jsTab li em 에 transition: all 0.3s ease-in 넣어줘야함
//        $("#jsTab li a").hover(function(){
//            $(this).next("em").css({opacity:"1", bottom:"55px"})
//        },function(){
//            $(this).next("em").css({opacity:"0", bottom:"70px"})
//        });
        //animate를 이용한 경우  - em태그가 있어야한다
//        $("#jsTab li a").hover(function(){
//            $(this).next("em").stop().animate({opacity:"1", bottom:"55px"},300)
//        },function(){
//            $(this).next("em").stop().animate({opacity:"0", bottom:"70px"},300)
//        });
        
        //append를 이용하는 경우
//        $("#jsTab li a").append("<em>drove by all the places we used to hang out getting wasted I thought about our last kiss, how it felt, the way you tasted And even though your friends tell me you're doing fine</em>")
//        $("#jsTab li a").hover(function(){
//            $(this).find("em").stop().animate({opacity:"1", bottom:"55px"},300)
//            },function(){
//            $(this).find("em").stop().animate({opacity:"0", bottom:"70px"},300)
//        });
       
        //attr을 이용하는 경우
        var title=$("#jsTab li a").attr("data-title")
        $("#jsTab li").append("<em></em>")
        
        $("#jsTab li a").hover(function(){
            $(this).next("em").text(title).stop().animate({opacity:"1", bottom:"55px"},300)
            },function(){
            $(this).next("em").stop().animate({opacity:"0", bottom:"70px"},300)
        });
        
        
    </script>
</body>
</html>
이미지 오버 효과1
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>마우스 이벤트</title>
    <style>
        * {padding: 0; margin: 0;}
        a {text-decoration: none;}
        img {display: block;}
        h1 {text-align: center; padding: 10px 0;}
        ul { width: 1230px; margin: 20px auto; overflow: hidden;}
        li {overflow: hidden; list-style: none; float: left; position: relative; margin-right: 10px;}

        li span {opacity: 0; transition: all 0.3s ease; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(232,138,116,0.6); display: block; z-index: 9;}
        
        .cssEffct li em {opacity: 0; position: absolute; bottom: 0; left: 0; width: 100%; padding: 20px; box-sizing: border-box; background: rgba(0,0,0,0.7); color:white; transition: all 0.3s ease; z-index:10;}
        
         .JsEffect li em { opacity: 0;position: absolute; bottom: 0; left: 0; width: 100%; padding: 20px; box-sizing: border-box; background: rgba(0,0,0,0.7); color:white; z-index:10;}
        
        .cssEffct li:nth-child(1):hover em {opacity: 1;}
        .cssEffct li:nth-child(1):hover span {opacity: 1}
        .cssEffct li:nth-child(2) em {opacity: 0; left:-100%;}
        .cssEffct li:nth-child(2):hover em {opacity: 1; left: 0;}
        .cssEffct li:nth-child(3) em {opacity: 0; bottom:-100%;}
        .cssEffct li:nth-child(3):hover em {opacity: 1; bottom: 0;}
        
    </style>
    <!--jQuery 설정-->
    <script src="assets/js/jquery-1.12.4.min.js"></script>
    <script src="assets/js/jquery-ui-1.12.1.min.js"></script>  
    <script>
    $(document).ready(function(){
        var img=$('.JsEffect > ul > li')
//        img.filter(':nth-child(1)').on('mouseover',function(){
//            $(this).find('em, span').css({opacity:'1'});
//        }).on('mouseout', function(){
//            $(this).find('em, span').css({opacity:'0'});
//        });
        
                img.filter(':nth-child(1)').on('mouseover',function(){
            $(this).find('em, span').animate({opacity:'1'},1000);
        }).on('mouseout', function(){
            $(this).find('em, span').animate({opacity:'0'},1000);
        });
            
             img.filter(':nth-child(2)').on('mouseover',function(){
            $(this).find('em').animate({opacity:'1', left:'0'},1000);       
            $(this).find('span').animate({"opacity":"1"},300);

        }).on('mouseout', function(){
            $(this).find('em').stop().animate({opacity:'0', left:'-100%'},1000);
            $(this).find('span').animate({"opacity":"0"},300);     
        });
        
            img.filter(':nth-child(3)').on('mouseover',function(){
            $(this).find('em').animate({opacity:'1',bottom:'0'},1000);
            $(this).find('span').animate({"opacity":"1"},300);    
        }).on('mouseout', function(){
            $(this).find('em').animate({opacity:'0',bottom:'-100%'},1000);
           $(this).find('span').animate({"opacity":"0"},300);         
        });
          
    });
</script>
</head>
<body>
    <h1>Css Hover Effect</h1>
    <div class="cssEffct">
        <ul>
            <li><img src="assets/img/img01.jpg" alt="" width="400"><em>css Effect1</em><span></span></li>
            <li><img src="assets/img/img02.jpg" alt="" width="400"><em>css Effect2</em><span></span></li>
            <li><img src="assets/img/img03.jpg" alt="" width="400"><em>css Effect3</em><span></span></li>
        </ul>
    </div>
    
    <h1>Js Hover Effect</h1>
    <div class="JsEffect">
        <ul>
            <li><img src="assets/img/img01.jpg" alt="" width="400"><em>js Effect1</em><span></span></li>
            <li><img src="assets/img/img02.jpg" alt="" width="400"><em>js Effect2</em><span></span></li>
            <li><img src="assets/img/img03.jpg" alt="" width="400"><em>js Effect3</em><span></span></li>
        </ul>        
    </div>
    
</body>
</html>
이미지 오버 효과2
 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Animate</title>
        <style>
  * {padding: 0; margin: 0;}
        a {text-decoration: none;}
        img {display: block;}
        h1 {text-align: center; padding: 40px 0;}
        
        .imgHover {width: 1230px; margin: 20px auto; overflow: hidden;}
        .imgHover > div {float: left; width: 400px; height: 300px;}
        .imgHover > div img:nth-child(1) {position: absolute;}
        .imgHover > div img:nth-child(2) {opacity: 0;}    
    </style>
</head>
<body>
   
   <h1>Images Hover Effect</h1>
  <div class="imgHover">
      <div class="img1">
          <img src="assets/img/img01.jpg" alt="" width="400">
          <img src="assets/img/img02.jpg" alt="" width="400">
      </div>
      <div class="img2">
          <img src="assets/img/img02.jpg" alt="" width="400">
          <img src="assets/img/img01.jpg" alt="" width="400">
      </div>
      <div class="img3">
          <img src="assets/img/img03.jpg" alt="" width="400">
          <img src="assets/img/img04.jpg" alt="" width="400">
      </div>
  </div>

  
  <!-- jquery 설정 -->
	<script src="assets/js/jquery-1.12.4.min.js"></script>
	<script src="assets/js/jquery-ui-1.12.1.min.js"></script>
	<script>
//        $('imgHover').on('mouseover',function(){}).on('mouseout',function(){})
        $(".imgHover>div").on({
            mouseover:function(){
                $(this).find("img:nth-child(1)").stop().animate({opacity:0},330)
                $(this).find("img:nth-child(2)").stop().animate({opacity:1},330)
            },
            mouseout:function(){
                $(this).find('img:nth-child(1)').stop().animate({opacity:1},600)
                $(this).find('img:nth-child(2)').stop().animate({opacity:0},600)
            } });
    </script>
    
</body>
</html>
마우스 커서
 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {padding: 0; margin: 0;}
        a {text-decoration: none;}
        img {display: block;}
        h1 {padding: 20px;}
        #box {margin: 200px auto; width: 300px;}
        #box span {background-color: antiquewhite; border-radius: 10px; display: block; text-align: center; padding: 20px 40px; cursor: none;}
        .hand {position: absolute; top: 0; left: 0; display: none;}
    </style>
</head>
<body>
   <h1>Mouse Move</h1>
   <div class="hand"><img src="../assets/img/cursor_img1.png" alt="" width="800">    </div>
   <div id="box">
       <span>Mouse1</span>
   </div>
   
   
   <!-- jquery 설정 -->
	<script src="assets/js/jquery-1.12.4.min.js"></script>
	<script src="assets/js/jquery-ui-1.12.1.min.js"></script>
    <script>
        $('#box span').hover(function(){
            $('.hand').show();
        },function(){
            $('.hand').hide();
        })
        
        $("#box").mousemove(function(e){
            $(".hand").css("left",e.pageX+30).css("top",e.pageY-80)
            
        });
        
    </script>
    
</body>
</html>

입력 양식 이벤트

메서드 설명
.blur() 요소에서 포커스가 떠날 때 이벤트가 발생합니다.
.change() 요소에서 값이 변경될 때 이벤트가 발생합니다.
.focus() 요소에 포커스를 획득했을 때 이벤트가 발생합니다.
.focusin() 선택한 요소에 포커스가 맞추어지기 바로 전에 발생합니다.
.focusout() 선택한 요소에서 포커스가 사라지기 바로 전에 발생합니다.
.select() 입력 양식 텍스트를 선택했을 때 이벤트가 발생합니다.
.submit() submit 버튼을 누르면 이벤트가 발생합니다.
.reset() reset 버튼을 누르면 이벤트가 발생합니다.
이미지 오버 효과2
 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Select</title>
    <style>
        * {padding: 0; margin: 0;}
        a {text-decoration: none;}
        img {display: block;}
        h1 {text-align: center; padding: 40px 0;}
        .seclect-wrap {text-align: center; margin:0 auto; width:100px}
        
    </style>
    
    
</head>
<body>
  <h1>Select Menu</h1>
  <div class="seclect-wrap">
      <select name="select" id="select">
          <option value="www.naver.com">네이버</option>
          <option value="www.daum.net">다음</option>
          <option value="www.nate.com">네이트</option>
          <option value="www.goggle.com">구글</option>
      </select>
    </div>

  
  <!-- jquery 설정 -->
	<script src="assets/js/jquery-1.12.4.min.js"></script>
	<script src="assets/js/jquery-ui-1.12.1.min.js"></script>
	<script>
       $("select").change(function(){
           var url =$(this).val();
           var newW=window.open("about:blank");
           if(url){
               newW.location.href="http://"+url;
           }
       })
    </script>
</body>
</html>

키보드 이벤트

메서드 설명
.keydown() 선택한 요소에서 키보드를 눌렀을 때에 이벤트가 발생
.keypress() 선택한 요소에서 키보드를 계속 누르고 있을 때에 이벤트 발생.
.focus() 요소에 포커스를 획득했을 때 이벤트가 발생합니다.
.keyup() 선택한 요소에서 키보드를 눌렀다가 떼었을 때 이벤트가 발생
key up
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {padding: 0; margin: 0;}
        a {text-decoration: none;}
        img {display: block;}
        h1 {padding: 20px;}

    </style>
</head>
<body>
   <h2> keyup</h2>
   <div>
       <p>글자 개수 파악하기</p>
       <h1>150</h1>
       <textarea name="text" id="text" cols="70" rows="10"></textarea>
   </div>
   
   
  <!-- jquery 설정 -->
	<script src="assets/js/jquery-1.12.4.min.js"></script>
	<script src="assets/js/jquery-ui-1.12.1.min.js"></script>
    <script>
        $('#text').keyup(function(){
            var input = $(this).val().length;
            var remain=150-input;
             $("h1").html(remain);  
            
            if(remain >= 0){
                $("h1").html(remain);
            } else {
                $("h1").css("color","red");
            }
        });
    </script>
</body>
</html>

웹브라우저 이벤트

메서드 설명
.resize() 웹 브라우저 윈도우 사이즈의 변화가 있을 때에 발생.
.scroll() 스크롤이 움직일 때 발생
.ready() 해당 페이지가 로딩 되었을 때 이벤트가 발생
.load() 문서를 불러 들일 때 이벤트가 발생
.unload() 해당 페이지가 빠져나갈 때에 이벤트가 발생.
.error() 해당 페이지에 에러가 있을 때 이벤트 발생.
.index() 이벤트가 발생한 요소의 인덱스 값을 반환.

웹브라우저 객체

메서드 설명
.altKey 이벤트 발생시 [Alt] 키를 누르고 있었는지 boolean으로 알려줍니다.
.ctrlKey 이벤트 발생시 [Ctrl] 키를 누르고 있었는지 boolean으로 알려줍니다.
.shiftKey 이벤트 발생시 [Shift] 키를 누르고 있었는지 boolean으로 알려줍니다.
.clintX document에서 스크롤 이동값을 제외하고 마우스의 x좌표 값을 알려줍니다.
.clintY document에서 스크롤 이동값을 제외하고 마우스의 y좌표 값을 알려줍니다.
.data 이벤트 생성시 매개변수 두 번째에 값을 넘겨주면, event의 프로퍼티를 통해서 전달됩니다.
.keyCode 이벤트 발생시 키보드의 키를 누르면 키의 고유값을 알려줍니다.
.offsetX 이벤트 발생시 이벤트의 대상으로 부터 마우스의 X좌표를 알려줍니다.
.offsetY 이벤트 발생시 이벤트의 대상으로 부터 마우스의 Y좌표를 알려줍니다.
.pageX document에서 스크롤 이동값을 포함한 마우스의 X좌표를 알려줍니다.
.pageY document에서 스크롤 이동값을 포함한 마우스의 Y좌표를 알려줍니다.
.screenX 모니터 화면을 기준으로 마우스의 X좌표 값을 알려줍니다.
.screenY 모니터 화면을 기준으로 마우스의 Y좌표 값을 알려줍니다.
.target 이벤트가 발생한 요소를 알려줍니다.
.type 발생한 이벤트의 타입명을 알려줍니다.
폰트 크기 변경하기
$(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, left, top, bottom, right, line-height
properties에 올 수 없는 값
background-color, 축약형

$(selector).animate({fontSize:"20px"},2000);
$(selector).animate({"font-size":"20px"},2000);
//폰트 사이즈를 현재 크기에서 20px로 20초동안 애니메이션
$(selector).animate({marginLeft:100, marginRight:100},600);
$(selector).animate({"margin-left":"100", "margin-right":"100"},"slow");
//선택한 요소의 왼쪽 오른쪽 마진 값을 100px로 600ms 동안 애니메이션
animate
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
     <!-- jquery 설정 -->
	<script src="assets/js/jquery-1.12.4.min.js"></script>
    <script src="assets/js/jquery-ui-1.12.1.min.js"></script>    
    <style>
        .img {width: 400px; height: 300px; overflow: hidden;}
    </style>
    <script>
    $(document).ready(function(){
        //버튼1을 클릭하면 이미지를 slideToggle을 이용해서 나타나거나 없어지게
        $(".btn1").click(function(){
            $(".img").slideToggle();
        });
        $(".btn2").click(function(){
          $(".img").animate({height:"0"},400);
        });
         $(".btn3").click(function(){
          $(".img").animate({height:"300"},400);
        });
        $(".btn4").click(function(){
          $(".img").animate({width:"0"},400);
        });
         $(".btn5").click(function(){
          $(".img").animate({width:"300"},400);
        })
    });

    </script>

    
</head>
<body>
    <button class="btn1">slideToggle</button>
    <button class="btn2">height hide</button>
    <button class="btn3">height show</button>
    <button class="btn4">width hide</button>
    <button class="btn5">width show</button>    
    <div class="img">
       <img src="assets/img/face1.png" alt="">
   </div>
   
</body>
</html>
animate2
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box { width: 50px; height: 50px; background-color: orange; position: relative; margin: 1px; cursor: pointer;}
    </style>
<!--jQuery 설정-->
    <script src="assets/js/jquery-1.12.4.min.js"></script>
    <script src="assets/js/jquery-ui-1.12.1.min.js"></script>  
    <script>
    $(document).ready(function(){
        $(".box").hover(function(){
            $(this).animate({left:500, width:50},600);
        }, function(){
            $(this).animate({left:0, width:100},600);
        });
        $(".btn1").click(function(){
            $(".box").animate({width:"+=50", height:"+=50"}, 'slow');
        });
    });
    </script>
</head>
<body>
   
   <button class="btn1">size</button>
   <div class="box"></div>
   <div class="box"></div>
   <div class="box"></div>
   <div class="box"></div>
   <div class="box"></div>
   <div class="box"></div>
   <div class="box"></div>
   <div class="box"></div>
   <div class="box"></div>
   <div class="box"></div>
    
</body>
</html>
animate3 - 무한 로프
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>animate</title>
    <style>
        .img { display:flex; align-items: center; justify-content: center; height: 100vh;  }
    
    </style>
    <!--jQuery 설정-->
    <script src="assets/js/jquery-1.12.4.min.js"></script>
    <script src="assets/js/jquery-ui-1.12.1.min.js"></script>  
    <script>
    $(document).ready(function(){
        function loop(){
            $(".img").animate({marginTop:-20}, 1000).animate({marginTop:20},1000,loop)
        }
        loop();
        
    });
    </script>
    
    
</head>
<body>
   <div class="img">
       <img src="assets/img/island.png" alt="" width="500">
   </div>
    
</body>
</html>
Canvus
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Select</title>
    <style>
        * {padding: 0; margin: 0;}
        a {text-decoration: none;}
        img {display: block;}
        #canvas {border: 3px solid #ccc}
    </style>
    
    
</head>
<body>
  <h1>Canvas</h1>
  
  <canvas id="canvas" width="1200" height="400"></canvas>
  
 
  
  <!-- jquery 설정 -->
	<script src="assets/js/jquery-1.12.4.min.js"></script>
	<script src="assets/js/jquery-ui-1.12.1.min.js"></script>
	<script>
        var canvas = document.getElementById('canvas');
        var context=canvas.getContext('2d');
        
        $(canvas).on({
            mousedown:function(event){
                    var position = $(this).offset();
                    var x = event.pageX - position.left;
                    var y = event.pageY - position.top;
                
                    //선을 그림
                    context.beginPath();
                    context.moveTo(x,y);
            },
            mouseup:function(event){
                    var position = $(this).offset();
                    var x = event.pageX - position.left;
                    var y = event.pageY - position.top;
                    //선을 그립
                    context.lineTo(x, y);
                    context.stroke();
            }
        });
        
    </script>
</body>
</html>