제이쿼리

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

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

제이쿼리 장점

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

제이쿼리 사용방법

제이쿼리 설정

제이쿼리 사이트

제이쿼리 소스 다운로드

설정View

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>설정</title>
    // 다운 받아서 설정
    <script src="assets/js/jquery-1.12.4.min.js"></script>

     // 제이쿼리 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>
    <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(){
//실행함수 코드
});
$(document).ready(function(){
//실행함수 코드
});
$(function(){
//실행함수 코드
});
시작하기View

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>설정</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>
        jQuery(document).ready(Function(){

                               });
    </script>
</head>
<body>

</body>
</html>

제이쿼리를 사용하는 이유

제이쿼리를 사용하는 이유View

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>설정</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>
        //자바스크립 코드
       window.onload=function(){
           var list2 = document.getElementById("list2");
           var lilist = list2.getElementsByTagName("li");

           for (var i=0; i<lilist.length; i++){
               var li = lilist[i];
               li.style.color ="#f00";
           }
       }
    </script>
    <script>
        //제이쿼리 코드
        $(document).ready(function(){
            $("#list1 li").css("color","blue")
        });
    </script>
</head>
<body>
    <h3>jQuery Sample</h3>
    <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 id="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 id="one20">one10</li>
        </ul>
    </div>
</body>
</html>

라이브러리 충돌

제이쿼리를 사용하는 이유

라이브러리 충돌 방지View

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>라이브러리 충돌</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>
        //1. $.noConflict();를 사용합니다.
        $.noConflict();
        jQuery(document).ready(function(){

        });

        //2. $를 jQuery로 바꿉니다.
        $->jQuery(document).ready(function(){

        });

        //3. $를 지역변수로 선언합니다.
        (function($){
            $("body").css("color","powderblue")
        });

        //4. $를 사용하지 않고 다른 별칭으로 사용합니다.
        var $name = jQuery;
        $name(document).ready(function(){

        });
    </script>
</head>
<body>


</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와 반대로 요소에 텍스트가 존재할 때에 선택됩니다.

보임 필터 선택자

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

  • 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배수 번째에 있는 자식 요소를 선택합니다.
:nth-child(2n+1) 2배수+1 번째에 있는 자식 요소를 선택합니다.
:only-child 자식 요소가 오직 하나인 요소를 선택합니다.

폼 필터 선택자

종류 설명
:input 모든 입력 양식을 선택합니다.
:file 파일 업로드 양식을 선택합니다.
:hidden 숨겨진 입력 양식을 선택합니다.
:image 이미지 입력 양식을 선택합니다.
:password 암호 입력 양식을 선택합니다.
:radio 라디오 버튼 입력 양식을 선택합니다.
:reset 리셋 입력 양식을 선택합니다.
:submit 데이터 보내기 입력 양식을 선택합니다.
:text 텍스트 박스 양식을 선택합니다.
선택자View

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Selector</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>
        jQuery(document).ready(function(){
            // $("h1").css({backgroundColor:"powderblue",border:"1px solid #000"});    //태그선택자
            // $(".one2").css({backgroundColor:"powderblue",border:"1px solid #000"}); //클래스 선택자
            // $("#list1").css({backgroundColor:"powderblue",border:"1px solid #000"});    //아이디 선택자
            // $(".one4, .one6").css({backgroundColor:"powderblue",border:"1px solid #000"});   //그룹선택자
            // $("*").css({backgroundColor:"powderblue",border:"1px solid #000"});  //전체선택자

            //$("#sample ul li").css({backgroundColor:"powderblue",border:"1px solid #000"}); //자손 선택자
            //$("#sample>ul>li").css({backgroundColor:"powderblue",border:"1px solid #000"}); //child 선택자
             //$(".one3 + li").css({backgroundColor:"powderblue",border:"1px solid #000"}); //sibling 선택자
             //$(".one3 ~ li").css({backgroundColor:"powderblue",border:"1px solid #000"}); //siblings 선택자

            //$("li a[href='#list2']").css({backgroundColor:"powderblue",border:"1px solid #000"}); // 속성 선택자
            //$("li a[href^='http']").css({backgroundColor:"powderblue",border:"1px solid #000"});
            //$("li a[href$='.com']").css({backgroundColor:"powderblue",border:"1px solid #000"});
            //$("li a[href*='www']").css({backgroundColor:"powderblue",border:"1px solid #000"});
            //$("li a[href!='http://www.naver.com']").css({backgroundColor:"powderblue",border:"1px solid #000"});
            //$("li a[href][title]").css({backgroundColor:"powderblue",border:"1px solid #000"});

            //$("li:eq(6)").css({backgroundColor:"powderblue",border:"1px solid #000"}); //기본필터 선택자
            //$("li:gt(6)").css({backgroundColor:"powderblue",border:"1px solid #000"});
            //$("li:lt(6)").css({backgroundColor:"powderblue",border:"1px solid #000"});
            //$("li:first").css({backgroundColor:"powderblue",border:"1px solid #000"});
            //$("li:last").css({backgroundColor:"powderblue",border:"1px solid #000"});
            //$("li:odd").css({backgroundColor:"powderblue",border:"1px solid #000"});
            //$("li:even").css({backgroundColor:"powderblue",border:"1px solid #000"});
            //$(":header").css({backgroundColor:"powderblue",border:"1px solid #000"});
            //$("li:not(:eq(6))").css({backgroundColor:"powderblue",border:"1px solid #000"});

            //$("li:contains('one6')").css({backgroundColor:"powderblue",border:"1px solid #000"}); //내용필터 선택자
            //$("li:empty").css({backgroundColor:"powderblue",border:"1px solid #000"});
            //$("li:parent").css({backgroundColor:"powderblue",border:"1px solid #000"});
            //$("ul:has('li')").css({backgroundColor:"powderblue",border:"1px solid #000"});

            //$("li:hidden").css("display","block");
            //$("li:visible").css({backgroundColor:"powderblue",border:"1px solid #000"});

            //$("li:first").css({backgroundColor:"powderblue",border:"1px solid #000"});
            //$("li:first-child").css({backgroundColor:"powderblue",border:"1px solid #000"});
            //$("li:last").css({backgroundColor:"powderblue",border:"1px solid #000"});
            //$("li:last-child").css({backgroundColor:"powderblue",border:"1px solid #000"});
            //$("li:nth-child(3)").css({backgroundColor:"powderblue",border:"1px solid #000"});
            //$("li:nth-child(even)").css({backgroundColor:"powderblue",border:"1px solid #000"});
            //$("li:nth-child(odd)").css({backgroundColor:"powderblue",border:"1px solid #000"});
            //$("li:nth-child(2n+1)").css({backgroundColor:"powderblue",border:"1px solid #000"});
            //$("li:nth-onlychild").css({backgroundColor:"powderblue",border:"1px solid #000"});
         });
    </script>
</head>
<body>
    <h1>jQuery Selector</h1>
    <div id="sample">
        <ul id="list1" class="list">
            <li class="one1"><a href="#list2">one1</a></li>
            <li class="one2"><a href="http://www.naver.com">one2</a></li>
            <li class="one3"><a href="http://www.daum.net">one3</a></li>
            <li class="one4"><a href="http://www.callme365.com" 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">one10</li>
        </ul>
         <ul id="list2" class="list">
            <li class="one1">one1</a></li>
            <li class="one2">one2</li>
            <li class="one3">one3</li>
            <li class="one4">one4</li>
            <li class="one5"></li>
            <li class="one6">one6</li>
            <li class="one7">one7</li>
            <li class="one8">one8</li>
            <li class="one9">one9</li>
            <li class="one20">one10
                <ul>
                    <li style="width:0; height:0; overflow:hidden">one10-1</li>
                    <li style="opacity:0;">one10-2</li>
                    <li style="visibility:hidden;">one10-3</li>
                    <li style="display:none;">one10-4</li>
                    <li>one10-5</li>
                </ul>
            </li>
        </ul>
    </div>
    <div>
        <ul>
            <li>태그 선택자: $("h1").css({backgroundColor:"powderblue",border:"1px solid #000"}); </li>
            <li>클래스 선택자: $(".one2").css({backgroundColor:"powderblue",border:"1px solid #000"});</li>
            <li>아이디 선택자: $("#list1").css({backgroundColor:"powderblue",border:"1px solid #000"}); </li>
            <li>그룹 선택자: $(".one4, .one6").css({backgroundColor:"powderblue",border:"1px solid #000"}); </li>
            <li>전체 선택자: $("*").css({backgroundColor:"powderblue",border:"1px solid #000"}); </li>
            <li>자손 선택자:$("#sample ul li").css({backgroundColor:"powderblue",border:"1px solid #000"});</li>
            <li>child 선택자:$("#sample>ul>li").css({backgroundColor:"powderblue",border:"1px solid #000"});</li>
            <li>sibling 선택자:$(".one3 + li").css({backgroundColor:"powderblue",border:"1px solid #000"});</li>
            <li>siblings 선택자:$(".one3 ~ li").css({backgroundColor:"powderblue",border:"1px solid #000"});</li>
            <li>속성 선택자[name="value"]: $("li a[href='#list2']").css({backgroundColor:"powderblue",border:"1px solid #000"});</li>
            <li>속성 선택자[name^="value"]: $("li a[href^='http']").css({backgroundColor:"powderblue",border:"1px solid #000"});</li>
            <li>속성 선택자[name$="value"]: $("li a[href$='.com']").css({backgroundColor:"powderblue",border:"1px solid #000"});</li>
            <li>속성 선택자[name*="value"]: $("li a[href*='www']").css({backgroundColor:"powderblue",border:"1px solid #000"});</li>
            <li>속성 선택자[name!="value"]: $("li a[href!='http://www.naver.com']").css({backgroundColor:"powderblue",border:"1px solid #000"});</li>
            <li>속성 선택자[name="value"][name="value"]: $("li a[href][title]").css({backgroundColor:"powderblue",border:"1px solid #000"});</li>
            <li>기본필터 선택자: $("li:eq(6)").css({backgroundColor:"powderblue",border:"1px solid #000"});</li>
            <li>기본필터 선택자: $("li:gt(6)").css({backgroundColor:"powderblue",border:"1px solid #000"});</li>
            <li>기본필터 선택자: $("li:lt(6)").css({backgroundColor:"powderblue",border:"1px solid #000"});</li>
            <li>기본필터 선택자: $("li:first").css({backgroundColor:"powderblue",border:"1px solid #000"});</li>
            <li>기본필터 선택자: $("li:last").css({backgroundColor:"powderblue",border:"1px solid #000"});</li>
            <li>기본필터 선택자: $("li:odd").css({backgroundColor:"powderblue",border:"1px solid #000"});</li>
            <li>기본필터 선택자: $("li:even").css({backgroundColor:"powderblue",border:"1px solid #000"});</li>
            <li>기본필터 선택자: $(":header").css({backgroundColor:"powderblue",border:"1px solid #000"});</li>
            <li>기본필터 선택자: $(":header").css({backgroundColor:"powderblue",border:"1px solid #000"});</li>
            <li>기본필터 선택자: $("li:not(:eq(6))").css({backgroundColor:"powderblue",border:"1px solid #000"});</li>
            <li>내용필터 선택자: $("li:contains('one6')").css({backgroundColor:"powderblue",border:"1px solid #000"}); //내용필터 선택자</li>
            <li>내용필터 선택자: $("li:empty").css({backgroundColor:"powderblue",border:"1px solid #000"});</li>
            <li>내용필터 선택자: $("li:parent").css({backgroundColor:"powderblue",border:"1px solid #000"});</li>
            <li>내용필터 선택자: $("ul:has('li')").css({backgroundColor:"powderblue",border:"1px solid #000"});</li>
            <li>보임필터 선택자: $("li:hidden").css("display","block");</li>
            <li>보임필터 선택자: $("li:visible").css({backgroundColor:"powderblue",border:"1px solid #000"});</li>
            <li>자식요소 필터 선택자: $("li:first").css({backgroundColor:"powderblue",border:"1px solid #000"});</li>
            <li>자식요소 필터 선택자: $("li:first-child").css({backgroundColor:"powderblue",border:"1px solid #000"});</li>
            <li>자식요소 필터 선택자: $("li:last").css({backgroundColor:"powderblue",border:"1px solid #000"});</li>
            <li>자식요소 필터 선택자: $("li:last-child").css({backgroundColor:"powderblue",border:"1px solid #000"});</li>
            <li>자식요소 필터 선택자: $("li:nth-child(3)").css({backgroundColor:"powderblue",border:"1px solid #000"});</li>
            <li>자식요소 필터 선택자: $("li:nth-child(even)").css({backgroundColor:"powderblue",border:"1px solid #000"});</li>
            <li>자식요소 필터 선택자: $("li:nth-child(odd)").css({backgroundColor:"powderblue",border:"1px solid #000"});</li>
            <li>자식요소 필터 선택자: $("li:nth-child(2n+1)").css({backgroundColor:"powderblue",border:"1px solid #000"});</li>
            <li>자식요소 필터 선택자: $("li:nth-onlychild").css({backgroundColor:"powderblue",border:"1px solid #000"});</li>
        </ul>
    </div>
</body>
</html>

탐색

트리구조 탐색

Tree 구조를 기반으로 찾아가는 방식입니다.

메서드 설명
.children() 선택한 요소의 모든 자식 요소를 선택합니다.(자손요소 포함안됨)
.find() 선택한 요소의 자손 요소중 조건에 맞는 요소를 선택합니다.
.next() 선택한 요소의 다음 요소를 선택합니다.
.nextall() 선택한 요소의 모든 다음 요소를 선택합니다.
.parent() 선택한 요소의 부모 요소를 선택합니다.
.parents() 선택한 요소의 모든 부모 요소를 선택합니다.
.prev() 선택한 요소의 이전 요소를 선택합니다.
.prevall() 선택한 요소의 모든 이전 요소를 선택합니다.
.closest() 선택한 요소를 포함하면서 가장 가까운 상위 요소를 선택합니다.
.nextUntil() 다음에 위치한 요소를 조건에 맞을 때까지 찾습니다.
.parentUntil() 조건이 참이 될 때까지 부모 요소를 찾습니다.
.preUntil() 이전에 위치한 요소를 조건에 맞을 때까지 찾습니다.
.siblings() 형제 요소를 모두 찾습니다.
트리구조 탐색View

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>트리구조 탐색</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>
        jQuery(document).ready(function(){
            //$(".list ul").children('li').css({backgroundColor:"powderblue",border:"1px solid #000"});
            //$(".list ul").find('li').css({backgroundColor:"powderblue",border:"1px solid #000"});
            //$(".one3").css({backgroundColor:"powderblue",border:"1px solid #000"});
            //$(".list li:nth-child(3)").css({backgroundColor:"powderblue",border:"1px solid #000"});
            //$(".list li:eq(2)").css({backgroundColor:"powderblue",border:"1px solid #000"});
            //$(".one4").prevAll("li").css({backgroundColor:"powderblue",border:"1px solid #000"});
            //$(".one4").next("li").css({backgroundColor:"powderblue",border:"1px solid #000"});
            //$(".one4").nextAll("li").css({backgroundColor:"powderblue",border:"1px solid #000"});
            //$(".one4").siblings().css({backgroundColor:"powderblue",border:"1px solid #000"});
            //$(".one4").parent().css({backgroundColor:"powderblue",border:"1px solid #000"});
                               });
    </script>
</head>
<body>
    <h1>트리구조 탐색</h1>
    <div 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>one10-2</li>
                    <li>one10-3</li>
                    <li>one10-4</li>
                    <li>one10-5</li>
                </ul>
            </li>
        </ul>
    </div>

</body>
</html>

필터링

메서드 설명
.eq() 인덱스 번호에 해당하는 요소를 찾습니다.
.filter() 선택한 요소 집합에서 선택자를 추가하거나 함수를 사용해서 원하는 결과를 추출해냅니다.
.first() 선택한 요소 집합에서 첫 번째 자식 요소를 찾습니다.
.last() 선택한 요소 집합에서 마지막 번째 자식 요소를 찾습니다.
.has() 선택한 요소들이 자신의 자식 요소에서 주어진 선택자가 있는지를 확인하여 범위를 축소합니다.
.is() 매개 변수로 selector, element, jQuery를 입력하여 입력한 객체가 있으면 true를 반환합니다.
.map() 대상이 되는 요소 집합의 배열을 새롭게 변경합니다.
.not() 조건에 맞지 않은 것들만 찾아서 선택합니다.
.slice() 선택된 집합을 조건의 범위로 재 선택해줍니다.
필터링View

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>트리구조 탐색</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>
        jQuery(document).ready(function(){
            //$(".list ul").children('li').css({backgroundColor:"powderblue",border:"1px solid #000"});
            //$(".list ul").find('li').css({backgroundColor:"powderblue",border:"1px solid #000"});
            //$(".one3").css({backgroundColor:"powderblue",border:"1px solid #000"});
            //$(".list li:nth-child(3)").css({backgroundColor:"powderblue",border:"1px solid #000"});
            //$(".list li:eq(2)").css({backgroundColor:"powderblue",border:"1px solid #000"});
            //$(".one4").prevAll("li").css({backgroundColor:"powderblue",border:"1px solid #000"});
            //$(".one4").next("li").css({backgroundColor:"powderblue",border:"1px solid #000"});
            //$(".one4").nextAll("li").css({backgroundColor:"powderblue",border:"1px solid #000"});
            //$(".one4").siblings().css({backgroundColor:"powderblue",border:"1px solid #000"});
            //$(".one4").parent().css({backgroundColor:"powderblue",border:"1px solid #000"});
                               });
    </script>
</head>
<body>
    <h1>트리구조 탐색</h1>
    <div 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>one10-2</li>
                    <li>one10-3</li>
                    <li>one10-4</li>
                    <li>one10-5</li>
                </ul>
            </li>
        </ul>
    </div>

</body>
</html>

기타

eachView

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>each</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>
        jQuery(document).ready(function(){
            //$(".list li").text("목록");
            $(".list li").each(function(i,a){
                $(a).text("목록"+i);
            });
         });
    </script>
</head>
<body>
    <div 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</li>
            <li class="one11">one11</li>
            <li class="one12">one12</li>
            <li class="one13">one13</li>
            <li class="one14">one14</li>
            <li class="one15">one15</li>
            <li class="one16">one16</li>
            <li class="one17">one17</li>
            <li class="one18">one18</li>
            <li class="one19">one19</li>
            <li class="one20">one20</li>
        </ul>
    </div>

</body>
</html>

변경

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() 선택한 요소의 텍스트를 읽고 쓸 수 있습니다.
MANIPULATIONView
클릭하면 이미지 랜덤으로 나오기View

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>설정</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>
        jQuery(document).ready(function(){
            $("#button").click(function(){
                        $("#container").append(Img());
                               });

          });

        function Img(){
            var n = Math.ceil(Math.random()*7);
            var imgPath ="<img src='assets/img/face"+n+".png' width='100px'>"
            return imgPath;
        }



    </script>
</head>
<body>
    <h3>제이쿼리 변경</h3>
    <button id="button">Append</button>
    <div id="container"></div>
</body>
</html>
클릭하면 이미지 변경View

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>설정</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>
        jQuery(document).ready(function(){
            $("#button").click(function(){
                $("img").css("width","200")
            });
        $("#button2").click(function(){
                $("img").css("width","100")
            });
        $("#button3").click(function(){
                $("img").css("width","+=100")
            });
        $("#button4").click(function(){
                $(".container img:nth-child(4)").css("width","+=20")
            });
        $("#button5").click(function(){
                $(".container img:nth-child(5)").remove()
            });
        $("#button6").click(function(){
                $(".container img:nth-child(1)").appendTo(".container");
            });
        $("#button7").click(function(){
            $(".container img:nth-child(5)").prependTo(".container");
        });

        setInterval(function(){
            $(".container img:nth-child(1)").appendTo(".container");
        },1000);


            $("#button7").click(function(){
            $(".container img:nth-child(5)").prependTo(".container");
        });
                               });

    </script>
</head>
<body>

    <button id="button">Click</button>
    <button id="button2">Click2</button>
    <button id="button3">Click3</button>
    <button id="button4">Click4</button>
    <button id="button5">Click5</button>
    <button id="button6">Click6</button>
    <button id="button7">Click7</button>
    <button id="button8">Click8</button>
    <div class="container">
        <img src="assets/img/face1.png" width="100">
        <img src="assets/img/face2.png" width="100">
        <img src="assets/img/face3.png" width="100">
        <img src="assets/img/face4.png" width="100">
        <img src="assets/img/face5.png" width="100">
    </div>

</body>
</html>
클릭하면 이미지 복사하기View

	<!DOCTYPE html>
	<html lang="en">
	<head>
	    <meta charset="UTF-8">
	    <title>설정</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>
	        jQuery(document).ready(function(){
	          //img li의 성질을 display:inline으로 변경하기
	          $(".box li").css("display","inline");
	          $(".box li img").css("width","200");

	          //버튼을 클릭하면 다 사라지게
	          $(".button").click(function(){
	                  $(".box").css("display","none");
	              });
	          //버튼2번을 클랙했을 때 이미지가 또 나오게
	          $(".button2").click(function(){
	                  $(".box").append($(".box").clone());
	              });
	                               });
	    </script>
	</head>
	<body>
	  <button class="button">button</button>
	  <button class="button2">button2</button>
	    <div class="box">
	      <ul>
	        <li><img src="assets/img/face1.png"></li>
	        <li><img src="assets/img/face2.png"></li>
	        <li><img src="assets/img/face3.png"></li>
	        <li><img src="assets/img/face4.png"></li>
	        <li><img src="assets/img/face5.png"></li>
	      </ul>
	    </div>
	</body>
	</html>

속성

Attributes

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

Attr

$(selector).attr(name,value);
$(selector).attr(name,function(index.attr));
$(selector).attr(object);
AttrView

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>attr</title>
    <script src="asse<ts/js/jquery-1.12.4.min.js"></script>
    <script src="assets/js/jquery-ui-1.12.1.min.js"></script>
    <script>
        jQuery(document).ready(function(){
          var value=$(":input").attr("value");
          alert(value);

          $(":input").attr("value","비밀번호를 입력해주세요");
          $(":input").attr({"value":"비밀번호를 입력해주세요", "id":"names","class":"names"});

          $("img").attr("width","200");
          $("img").attr("width",function(i){
            return(i+1)*50;
          });
          $("img").attr({width:function(i){
            return(i+1)*80;
          },
          height:function(j){
            return(j+1)*40;
          }
          });
                               });
    </script>
</head>
<body>
    <input type="text" value="이름을 입력해주세요" id="name" class="name">
    <img src="assets/img/face1.png">
    <img src="assets/img/face2.png">
    <img src="assets/img/face3.png">
    <img src="assets/img/face4.png">
    <img src="assets/img/face6.png">
</body>
</html>
Attr을 이용한 탭 메뉴 만들기View

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

    <script>
        jQuery(document).ready(function(){

                               });
    </script>
    <style>
      * {margin: 0;padding: 0;}
      #tab-menu {width: 400px; margin: 100px auto;}
      #tab ul {overflow: hidden;}
      #tab li {float: left; list-style: none; width: 100px; text-align: center;}
      #tab li a {background-color: #ccc; padding: 20px 0; display: inline-block;margin-right: 1px;width: 99px;margin-bottom: 10px;}
    </style>
</head>
<body>
    <div id="tab-menu">
      <div id="tab">
        <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>
        </ul>
      </div>
      <div id="menu">
        <img src="assets/img/face1.png" width="400">
      </div>
    </div>

    <script src="assets/js/jquery-1.12.4.min.js"></script>
    <script src="assets/js/jquery-ui-1.12.1.min.js"></script>
    <script>
      $("#tab li:eq(0)").click(function(){
        $("#menu>img").attr({src:"assets/img/face1.png",alt:"이미지1"})
      });
      $("#tab li:eq(1)").click(function(){
        $("#menu>img").attr({src:"assets/img/face2.png",alt:"이미지1"})
      });
      $("#tab li:eq(2)").click(function(){
        $("#menu>img").attr({src:"assets/img/face3.png",alt:"이미지1"})
      });
      $("#tab li:eq(3)").click(function(){
        $("#menu>img").attr({src:"assets/img/face4.png",alt:"이미지1"})
      });
    </script>

</body>
</html>

Dimensions

위치와 크기를 일고 설정하는 메서드입니다.

메서드 설명
width() 요소의 가로 크기를 반환하거나 변경합니다.
height() 요소의 세로 크기를 반환하거나 변경합니다.
innerWidth() padding 값을 포함한 가로 크기를 반환하거나 변경합니다.
innerHeight() padding 값을 포함한 세로 크기를 반환하거나 변경합니다.
outerWidth(boolean) padding 값과 border 값을 포함한 가로 크기를 반환하거나 변경합니다.
outerHeight(boolean) padding 값과 border 값을 포함한 세로 크기를 반환하거나 변경합니다.
DimensionsView

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>설정</title>
    <style>
    * {margin: 0;padding: 0;}
    span {font-size: 20px;color:red;}
    #wrapper {border: 5px solid blue; padding: 50px;margin: 50px;}
    </style>
    <script src="assets/js/jquery-1.12.4.min.js"></script>
    <script src="assets/js/jquery-ui-1.12.1.min.js"></script>
    <script>
        jQuery(document).ready(function(){
          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>
</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>

</body>
</html>
클릭하면 이미지 나오는 탭 메뉴 만들기2View

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Dimentions</title>
    <style>
    * {padding: 0;margin: 0;}
      .btn {width: 100px;padding: 10px;border-radius: 5px;background-color: #f57c00;color: #fff; border:0; cursor: pointer;}
      #layer {position: absolute;left: 50%;top: 50%; width: 400px;height: 400px; display: none;}

    </style>
    <script src="assets/js/jquery-1.12.4.min.js"></script>
    <script src="assets/js/jquery-ui-1.12.1.min.js"></script>
    <script>
        jQuery(document).ready(function(){
          $("body").css("background-color","#ddd");
          $(".btn").click(function(){
            var wHeight = $(window).height();
            var wWidth = $(window).width();
            var iheight = $("#layer").height();
            var iwidth = $("#layer").height();
            //alert(wHeight);
            //alert(wWidth);
            $("#layer").css("top",wHeight/2-iheight/2);
            $("#layer").css("left",wWidth/2-iwidth/2);
            $("#layer").fadeIn();
          });
          $("#layer img").click(function(){
            $("#layer").fadeOut();
          });
        });
    </script>
</head>
<body>
    <button class="btn">Click</button>
    <div id="layer">
      <img src="assets/img/faceC1.png" alt="이미지1" width="400">
    </div>
</body>
</html>

Offset

요소의 위치 값을 알아내는 메서드입니다.

메서드 설명
.offset() 웹 문서를 기준으로 위치값을 읽어오며 left와 top의 속성을 통해 x축과 y축의 좌표를 알려줍니다.
.position() 기준점을 통해 선택한 요소의 위치값을 읽어오며, left와 top의 속성을 통해 x축과 y축의 좌표를 알려줍니다.
.scrollLeft() 브라우저 요소의 가로 스크롤 이동 값을 가져옵니다.
.scrollTop() 브라우저 요소의 세로 스크롤 이동 값을 가져옵니다.
offsetView

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Dimentions</title>
    <style>
    #drag {width: 150px;height: 150px;background-color:pink; border-radius: 50%; text-align: center; color: #000; line-height: 150px; font-size: 25px;}
    </style>
    <script src="assets/js/jquery-1.12.4.min.js"></script>
    <script src="assets/js/jquery-ui-1.12.1.min.js"></script>
    <script>
        jQuery(document).ready(function(){
          $(drag).draggable({
            drag:function(){
              info.find(".ol").text(box.offset().top);
              info.find(".ot").text(box.offset().left);
              info.find(".pl").text(box.offset().top);
              info.find(".pt").text(box.offset().left);
            }
          });

          var box=$("#drag");
          var info=$("#position-info");
        });
    </script>
</head>
<body>
    <div id="position-info">
      <span>offset().left =</span><span class="ol">0</span>
      <span>offset().top =</span><span class="ot">0</span>
      <span>position().left =</span><span class="pl">0</span>
      <span>position().top =</span><span class="pt">0</span>
    </div>
    <div id="drag">
      <img src="assets/img/faceC1.png" width="150">
    </div>
</body>
</html>
scrollView

css

메서드 설명
.css() css() 요소 값을 알아낼 수도 있고, 설정도 할 수 있습니다.
.addClass() 특정한 클래스 요소를 추가 할 수 있습니다.
.hasClass() 특정한 클래스를 있는지를 찾을 수 있습니다.
.removeClass() 특정한 클래스를 요소에서 제거할 수 있습니다.
.toggleClass() 특정한 클래스의 추가 제거를 한번에 할 수 있습니다.

addClass

$(selector).attr(value);
addClass를 이용한 탭 메뉴 만들기View

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>설정</title>
    <style>
      * {margin: 0;padding: 0;}
      #tab-menu {width: 400px; margin: 100px auto;}
      #tab ul {overflow: hidden;}
      #tab li {float: left; list-style: none; width: 100px; text-align: center;}
      #tab li a {background-color: #ccc; padding: 20px 0; display: inline-block;margin-right: 1px;width: 99px;margin-bottom: 10px;}
      #menu {width: 400px;height: 400px;}
      #menu.img1 {background:url(assets/img/face1.png);background-size:cover;}
      #menu.img2 {background:url(assets/img/face2.png);background-size:cover;}
      #menu.img3 {background:url(assets/img/face3.png);background-size:cover;}
      #menu.img4 {background:url(assets/img/face4.png);background-size:cover;}
    </style>
</head>
<body>
  <div id="tab-menu">
    <div id="tab">
      <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>
      </ul>
    </div>
    <div id="menu" class="img1">
    </div>
  </div>


  <script src="assets/js/jquery-1.12.4.min.js"></script>
  <script src="assets/js/jquery-ui-1.12.1.min.js"></script>
  <script>
      jQuery(document).ready(function(){
        $("#tab li:nth-child(1)").click(function(){
          $("#menu").removeClass().addClass("img1");
        });
        $("#tab li:nth-child(2)").click(function(){
          $("#menu").removeClass().addClass("img2");
        });
        $("#tab li:nth-child(3)").click(function(){
          $("#menu").removeClass().addClass("img3");
        });
        $("#tab li:nth-child(4)").click(function(){
          $("#menu").removeClass().addClass("img4");
        });
                             });
  </script>

</body>
</html>
클릭하면 이미지 나오는 탭 메뉴 만들기2View

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>설정</title>
    <style>
      * {margin: 0;padding: 0;}
      #tab-menu {width: 400px; margin: 100px auto;}
      #tab ul {overflow: hidden;}
      #tab li {float: left; list-style: none; width: 100px; text-align: center;}
      #tab li a {background-color: #ccc; padding: 20px 0; display: inline-block;margin-right: 1px;width: 99px;margin-bottom: 10px;text-decoration: none;}
      #tab li a.active {background-color: #000;color: #fff;}
      #menu { width: 400px;height: 400px;}
      #menu>div {display: none;}
      #menu>div:first-child {display: block;}
    </style>
</head>
<body>
  <div id="tab-menu">
    <div id="tab">
      <ul>
        <li><a href="#" class="active">tab1</a></li>
        <li><a href="#">tab2</a></li>
        <li><a href="#">tab3</a></li>
        <li><a href="#">tab4</a></li>
      </ul>
    </div>
    <div id="menu" class="img1">
      <div><img src="assets/img/faceC1.png" alt="이미지1"></div>
      <div><img src="assets/img/faceC2.png" alt="이미지1"></div>
      <div><img src="assets/img/faceC3.png" alt="이미지1"></div>
      <div><img src="assets/img/faceC4.png" alt="이미지1"></div>
    </div>
  </div>


  <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 tab=$("#tab>ul>li");  //탭버튼을 변수 tab에 할당
      var menu=$("#menu>div");  //각 컨텐츠 영역을 변수 menu에 할당

      tab.click(function(){  //클릭에 대한 이벤트를 설정함
        var tg = $(this);  //클릭한 요소 타켓을 this를 통해서 변수 tg에 할당
        var tc = tg.find('>a');  //this에 자식 요소 a 태그를 변수 tc에 할당

        tab.find(">a").removeClass("active"); //메뉴 요소에 있는 클래스 active 삭제
        tc.addClass("active");  //클릭한 메뉴 요소에게 클래스 active 추가

        var i=tg.index();  //클릭한 메뉴 요소에게 index 할당
        //alert(index)

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

</body>
</html>

이벤트

브라우저에서 사용자가 취하는 모든 동작을 이벤트라고 합니다.

마우스로 클릭을 하거나 마우스를 올리는 행위가 이벤트에 해당되며 이벤트가 발생했을 때 자바스크립트 실행문을 실행하는 것을 이벤트 핸들러라고 합니다.

이벤트 핸들러

메서드 설명
.bind() 선택한 요소에 한 개 이상의 이벤트를 등록할 수 있습니다.
.unbind() 선택한 요소에 이벤트를 제거합니다.
.delegate() 선택한 요소에 지정한 하위 요소에 이벤트를 등록합니다.
.undelegate() 선택한 요소에 지정한 하위 요소에 이벤트를 제거합니다.
.on() 선택한 요소에 이벤트를 설정합니다.
.off() on() 메서드로 생성한 이벤트를 제거합니다.
.one() 선택한 요소에 이벤트가 한번만 발생됩니다.
.triggle() 선택한 요소에 이벤트를 수동으로 발생시킵니다.
.triggleHandler() 선택한 요소에 이벤트를 수동으로 호출합니다.

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

on()

$(selector).on(object);
$(selector).on(eventName, function(event){});
onView

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>on</title>
    <style>
      p.on {background-color: blue; color:#fff;}
    </style>
    <script src="assets/js/jquery-1.12.4.min.js"></script>
    <script src="assets/js/jquery-ui-1.12.1.min.js"></script>
    <script>
        jQuery(document).ready(function(){
        /*$("p").click(function(){
          $(this).css({"background-color":"blue","color":"#fff"});
        });*/
        $("p").on("click",function(){
          $(this).html(function(index,html){
            return html + "+";
          });
        });
        $("p").on({
          mouseenter:function(){
            $(this).addClass("on");
          },
          mouseleave:function(){
            $(this).removeClass("on");
          }
         });
         });
    </script>
</head>
<body>
    <p>jQuery1</p>
    <p>jQuery2</p>
    <p>jQuery3</p>
    <p>jQuery4</p>

</body>
</html>

off()

$(selector).off(object);
$(selector).off(eventName, function(event){});
offView

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>on</title>
    <style>
      p.on {background-color: blue; color:#fff;}
    </style>
    <script src="assets/js/jquery-1.12.4.min.js"></script>
    <script src="assets/js/jquery-ui-1.12.1.min.js"></script>
    <script>
        jQuery(document).ready(function(){
        //p태그를 클릭 했을 때 글씨 색을 파란색으로 변경
        $("p").on("click",function(){
          $(this).css("color","blue").text("javascript").off();
          alert("이벤트가 발생했습니다.");

        });

         });
    </script>
</head>
<body>
    <p>jQuery1</p>
    <p>jQuery2</p>
    <p>jQuery3</p>
    <p>jQuery4</p>

</body>
</html>

trigger()

$(selector).trigger(object);
$(selector).trigger(eventName, data);
triggerView

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>trigger</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>
        jQuery(document).ready(function(){
          $("p").on("click",function(){
            $(this).html(function(index,html){
            return html + "+";
            });
            });
            setInterval(function(){
              //$("p").last().click();
              $("p").last().trigger("click");
            },1000);

        });
    </script>
</head>
<body>
    <p>javascript : </p>
    <p>jQuery : </p>
</body>
</html>
폰트 사이즈 변경하기View

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>설정</title>
    <style>
      body {font: 12px Dotum,"돋움",sans-serif;}
    </style>
    <script src="assets/js/jquery-1.12.4.min.js"></script>
    <script src="assets/js/jquery-ui-1.12.1.min.js"></script>
    <script>
        jQuery(document).ready(function(){
          var size = 12;
          var body =  $("body");
          $(".zoom button").on("click",function(){
            var btn_index = $(this).index();
            //alert(btn_index);
            if(btn_index==0){
              size++
              body.css("font-size",size+'px');
            }else if(btn_index==2){
              size--
              body.css("font-size",size+'px');
            } else {
              body.css("font-size","12px");
            }
          });

          $("#fs").on("change",function(){
            body.css("font-family",$(this).val());
          });
        });
    </script>
</head>
<body>
    <div id="f-wrap">
      <dl>
        <dt>글자 크기</dt>
        <dd class="zoom">
          <button>+</button>
          <button>0</button>
          <button>-</button>
        </dd>
      </dl>
      <dl>
        <dt>글자 모양</dt>
        <dd class="f-style">
          <select name="fs" id="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>
        </dd>
      </dl>
    </div>
    <p id="tex_wrap">
    LG 스마트폰의 가장 큰 매력은 뭘까. 단연 ‘노크온’ 기능이다. 스마트폰을 켜기 위해 굳이 손가락으로 홈버튼이나 측면 버튼을 누를 필요없다. 톡톡, 두드리면 화면이 켜진다. LG폰을 하루만 써봐도 어느새 이 폰, 저 폰 액정을 톡톡 두드리는 자신을 발견하게 될지 모른다. 후면 버튼은 호불호가 갈린다. 절대적 지지자의 입장에서 서술하자면, 손에 폰을 쥐었을 때 검지손가락이 자연스럽게 닿는 곳에 후면 버튼이 있다. 지문인식도 후면 버튼에서 편하게 하면 된다. 또 후면 버튼이 뒤에 달린 덕에 ‘베젤리스’ 디자인이 훨씬 깔끔하게 뽑힐 수 있었다. 갤럭시S8은 지문인식 버튼만 후면에 따로 배치했는데, 번거롭게 느껴진다. ‘그냥 얼굴인식 기능을 쓰면 된다’는 반응이 많다.
    <br>
    We’re looking for articles, lists, insights, opinions, tutorials and case studies on Inspiration, User Interface Design, Usability, Interaction Design, Prototyping, Product Design, and any other topic that relates to designing and building digital products, art & design industry.

Make sure your article has a clear value to our readers so they can take something away in a way that will impact their daily lives.
  </p>
</body>
</html>

마우스 이벤트

메서드 설명
.click() 선택한 요소를 클릭했을 때 이벤트가 발생합니다.
.dblclick() 선택한 요소를 더블 클릭했을 때 이벤트가 발생합니다.
.hover() 선택한 요소에 마우스를 올렸을 때(mouseenter)와 벗어 났을 때(mouseleave) 각각 이벤트가 발생합니다.
.mousedown() 선택한 요소에서 마우스 버튼을 눌렀을 때 이벤트가 발생합니다.
.mouseout() 선택한 요소에서 마우스가 벗어 났을 때 이벤트가 발생합니다.
.mouseover() 선택한 요소에서 마우스를 올렸을 때 이벤트가 발생합니다.
.mouseup() 선택한 요소에서 마우스를 눌렀다가 떼었을 때 이벤트가 발생합니다.
.mouseenter() 선택한 요소 범위 내에서 마우스를 올렸을 때 이벤트가 발생합니다.
.mouseleave() 선택한 요소 범위 내에서 마우스를 벗어 났을 때 이벤트가 발생합니다.
.mousemove() 선택한 요소 범위 내에서 마우스를 움직였을 때 이벤트가 발생합니다.
마우스 이벤트View

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>설정</title>
    <style>
      .btn {background-image: linear-gradient(to right, #f6d365 0%, #fda085 51%, #f6d365 100%);padding: 10px 30px; display: inline-block; color: #fff; border-radius: 5px;cursor: pointer;}
    </style>
    <script src="assets/js/jquery-1.12.4.min.js"></script>
    <script src="assets/js/jquery-ui-1.12.1.min.js"></script>
    <script>
        jQuery(document).ready(function(){

        $(".btn1").on("click",function(){
          $("h1").css("background-color","#f6d365");
        });
        $(".btn2").on("dblclick",function(){
          $("h1").css("background-color","#f6d365");
        });
        $(".btn3").on("mouseover",function(){
          $("h1").css("background-color","#f6d365");
        });
        $(".btn4").on("mouseout",function(){
          $("h1").css("background-color","pink");
        });
        $(".btn5").hover(function(){
          $("h1").css("background-color","powderblue");
        },function(){
          $("h1").css("background-color","#888");
        });
        $(".btn6").on("mouseenter",function(){
          $("h1").css("background-color","red");
        });
        $(".btn6").on("mouseleave",function(){
          $("h1").css("background-color","blue");
        });

        });
    </script>
</head>
<body>
    <h1>제이쿼리 마우스 이벤트</h1>
    <p class="btn btn1">Click</p>
    <p class="btn btn2">dblClick</p>
    <p class="btn btn3">mousehover</p>
    <p class="btn btn4">mouseout</p>
    <p class="btn btn5">hover</p>
    <p class="btn btn6">mouseenter,mouseleave</p>

</body>
</html>
마우스 오버시 탭메뉴 나오기View

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>설정</title>
    <style>
      * {padding: 0;margin: 0;}
      li {list-style: none;}
      a {text-decoration: none;}
      .btn1 {padding: 20px; width: 300px; margin: 100px auto;}
      .btn1 li {display: inline-block; position: relative;}
      .btn1 li a {background-color: #ea9c9c; padding: 10px;color: #fff;border-radius: 5px; display: inline-block;}
      .btn1 li em {position: absolute;left: 50%;bottom: 70px;margin-left: -100px; background-color: #000;color: #fff; width: 200px;padding: 10px;border-radius: 5px; opacity:0;transition: all 0.3s ease-in-out;}
      .btn1 li em::after{content: ""; position: absolute; left: 50%; bottom: -8px;transform: translateX(-50%);border-top:10px solid #000;border-left:10px solid transparent;border-right:10px solid transparent; }
      .btn1 li:hover em {opacity:1; bottom: 60px;}
      .btn2 {padding: 20px; width: 300px; margin: 100px auto;}
      .btn2 li {display: inline-block; position: relative;}
      .btn2 li a {background-color: #ea9c9c; padding: 10px;color: #fff;border-radius: 5px; display: inline-block;}
      .btn2 li em {position: absolute;left: 50%;bottom: 70px;margin-left: -100px; background-color: #000;color: #fff; width: 200px;padding: 10px;border-radius: 5px; opacity:0;}
      .btn2 li em::after{content: ""; position: absolute; left: 50%; bottom: -8px;transform: translateX(-50%);border-top:10px solid #000;border-left:10px solid transparent;border-right:10px solid transparent; }
      .btn2 li:hover em {opacity:1; bottom: 60px;}
    </style>
    <script src="assets/js/jquery-1.12.4.min.js"></script>
    <script src="assets/js/jquery-ui-1.12.1.min.js"></script>
    <script>
        jQuery(document).ready(function(){
          //css,animate를 이용한 경우
          /*$("#jstab li a").hover(function(){
            //$(this).next("em").css("opacity":"1");
            $(this).next("em").animate({"opacity":"1", bottom:"60px"},300);
          },function(){
            //$(this).next("em").css("opacity","0");
            $(this).next("em").animate({"opacity":"0", bottom:"50px"},300);
          });*/
          //append를 이용한 경우
          /*$("#jstab li a").append("<em>JavaScript is the programming language of HTML and the Web.</em>");
          $("#jstab li a").hover(function(){
            $(this).find("em").animate({"opacity":"1", bottom:"60px"},300);
          },function(){
            $(this).find("em").animate({"opacity":"0", bottom:"50px"},300);
          });*/
          //attr을 이용한 경우
          var hoverText=$("#jstab li a").attr("data");
          $("#jstab li a").hover(function(){
            $(this).next("em").animate({"opacity":"1", bottom:"60px"},300).text(hoverText);
          },function(){
            $(this).next("em").animate({"opacity":"0", bottom:"50px"},300);
          });
        });
    </script>
</head>
<body>
  <div id="csstab" class="btn1">
    <ul>
      <li><a href="#">CSS Tab1</a><em>JavaScript is the programming language of HTML and the Web.</em></li>
      <li><a href="#">CSS Tab2</a><em>JavaScript is the programming language of HTML and the Web.</em></li>
      <li><a href="#">CSS Tab3</a><em>JavaScript is the programming language of HTML and the Web.</em></li>
    </ul>
  </div>
  <div id="jstab" class="btn2">
    <ul>
      <li><a href="#" data="JavaScript is the programming language of HTML and the Web.">js Tab1</a><em></em><!--<em>JavaScript is the programming language of HTML and the Web.</em>--></li>
      <li><a href="#" data="JavaScript is the programming language of HTML and the Web.">js Tab2</a><em></em><!--<em>JavaScript is the programming language of HTML and the Web.</em>--></li>
      <li><a href="#" data="JavaScript is the programming language of HTML and the Web.">js Tab3</a><em></em><!--<em>JavaScript is the programming language of HTML and the Web.</em>--></li>
    </ul>
  </div>
</body>
</html>
마우스 오버 버튼 효과View
마우스 오버 이미지 효과View

<!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 {overflow: hidden; width: 1230px;margin: 20px auto;}
      li {list-style: none; float: left;}
      li {position: relative; margin-right: 10px;overflow: hidden;}
      .css-effect  em {background:rgba(0,0,0,0.8);width: 400px; padding: 20px; box-sizing: border-box;position: absolute; bottom: 0;left: 0; color: #fff; opacity: 0;transition:all 1s ease; z-index: 10;}
      .css-effect li span {width: 100%;height: 100%;background:rgba(255,0,0,0.5); position: absolute; top: 0; left: 0; z-index: 5; opacity: 0; transition:all 1s ease; }
      .js-effect em {background:rgba(0,0,0,0.8);width: 400px; padding: 20px; box-sizing: border-box;position: absolute; bottom: 0;left: 0; color: #fff; opacity: 0; z-index: 10;}
      .js-effect li span {width: 100%;height: 100%;background:rgba(255,0,0,0.5); position: absolute; top: 0; left: 0; z-index: 5; opacity: 0; }
      .css-effect li:nth-child(1):hover em {opacity: 1;}
      .css-effect li:nth-child(1):hover span{opacity: 1;}
      .css-effect li:nth-child(2) em { left: -100%; }
      .css-effect li:nth-child(2):hover em {opacity: 1; left: 0;}
      .css-effect li:nth-child(2):hover span{opacity: 1;}
      .css-effect li:nth-child(3) em { bottom: -100%; }
      .css-effect li:nth-child(3):hover em {opacity: 1; bottom: 0;}
      .css-effect li:nth-child(3):hover span{opacity: 1;}

      .js-effect li:nth-child(2) em {opacity: 0;left: -100%; }
      .js-effect li:nth-child(3) em {opacity: 0;bottom: -100%; }

    </style>

</head>
<body>
    <h1>CSS Hover Effect</h1>
    <div class="css-effect">
      <ul>
        <li><img src="assets/img/sample1.jpg" width="400"><em>CSS EFFECT1</em><span></span></li>
        <li><img src="assets/img/sample2.jpg" width="400"><em>CSS EFFECT1</em><span></span></li>
        <li><img src="assets/img/sample3.jpg" width="400"><em>CSS EFFECT1</em><span></span></li>
      </ul>
    </div>
    <div class="js-effect">
      <ul>
        <li><img src="assets/img/sample1.jpg" width="400"><em>js EFFECT1</em><span></span></li>
        <li><img src="assets/img/sample2.jpg" width="400"><em>js EFFECT1</em><span></span></li>
        <li><img src="assets/img/sample3.jpg" width="400"><em>js EFFECT1</em><span></span></li>
      </ul>
    </div>

    <script src="assets/js/jquery-1.12.4.min.js"></script>
    <script src="assets/js/jquery-ui-1.12.1.min.js"></script>
    <script>
        jQuery(document).ready(function(){
          var $image = $(".js-effect>ul>li");

          $image.filter(":nth-child(1)")
          .on("mouseover",function(){
            //$(this).find("em,span").css("opacity","1");
            $(this).find("em,span").stop().animate({opacity:1},300);
          })
          .on("mouseout",function(){
            //$(this).find("em,span").css("opacity","0");
            $(this).find("em,span").stop().animate({opacity:0},300);
          });

          $image.filter(":nth-child(2)")
          .on("mouseover",function(){
            $(this).find("em").stop().animate({opacity:1, left:'0%'},500);
            $(this).find("span").stop().animate({opacity:1},500)
          })
          .on("mouseout",function(){
            $(this).find("em").stop().animate({opacity:0, left:'-100%'},500)
              $(this).find("span").stop().animate({opacity:0 },500)
          });

          $image.filter(":nth-child(3)")
          .on("mouseover",function(){
            $(this).find("em").stop().animate({opacity:1, bottom:'0%'},500);
            $(this).find("span").stop().animate({opacity:1},500);
            $(this).find("img").stop().animate({top:'-20px'},500);
          })
          .on("mouseout",function(){
            $(this).find("em").stop().animate({opacity:0, bottom:'-100%'},500)
              $(this).find("span").stop().animate({opacity:0 },500);
              $(this).find("img").stop().animate({top:'0px'},500);
          });
        });
    </script>
</body>
</html>
마우스 오버시 이미지 변경 View

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>설정</title>
    <style>
      h1{text-align: center; padding: 70px;}
      .img-hover {overflow: hidden; width: 960px; margin: 00px auto;}
      .img-hover > div {float: left; width: 300px; margin: 10px; height: 350px; }
      .img-hover > div img:nth-child(1){ position: absolute;}
      .img-hover > div img:nth-child(2){opacity: 0; width: 300px;}
    </style>
    <script src="assets/js/jquery-1.12.4.min.js"></script>
    <script src="assets/js/jquery-ui-1.12.1.min.js"></script>
    <script>
        jQuery(document).ready(function(){
          $(".img-hover>div")
          .on({mouseover:function(){
            $(this).find("img:nth-child(1)").stop().animate({opacity:0},300);
            $(this).find("img:nth-child(2)").stop().animate({opacity:1},300);
          }, mouseout:function(){
            $(this).find("img:nth-child(1)").stop().animate({opacity:1},300);
            $(this).find("img:nth-child(2)").stop().animate({opacity:0},300);
          }});
        });
    </script>
</head>
<body>
  <h1>마우스 오버 이미지 변경</h1>
  <div class="img-hover">
    <div class="img1">
      <img src="assets/img/face1.png">
      <img src="assets/img/faceC1.png">
    </div>
    <div class="img2">
      <img src="assets/img/face2.png">
      <img src="assets/img/faceC2.png">
    </div>
    <div class="img3">
      <img src="assets/img/face3.png">
      <img src="assets/img/faceC3.png">
    </div>
  </div>

</body>
</html>

입력 양식 이벤트

메서드 설명
.blur() 요소에서 포커스가 떠날 때 이벤트가 발생합니다.
.change() 요소에서 값이 변경될 때 이벤트가 발생합니다.
.focus() 요소에 포커스를 획득했을 때 이벤트가 발생합니다.
.focusin() 선택한 요소에 포커스가 맞추어지기 바로 전에 발생합니다.
.focusout() 선택한 요소에서 포커스가 사라지기 바로 전에 발생합니다.
.select() 입력 양식 텍스트를 선택했을 때 이벤트가 발생합니다.
.submit() submit 버튼을 누르면 이벤트가 발생합니다.
.reset() reset 버튼을 누르면 이벤트가 발생합니다.
셀렉트 메뉴 선택하기 View

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>셀렉트 메뉴</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>
        jQuery(document).ready(function(){
          $("#select").change(function(){
            var url = $(this).val();
            if (url){
              location.href="http://"+url;
            }
          });
        });
    </script>
</head>
<body>
  <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.google.com">구글</option>
  </select>

</body>
</html>

키보드 이벤트

메서드 설명
.keydown() 선택한 요소에서 키보드를 눌렀을 때에 이벤트가 발생합니다.
.keypress() 선택한 요소에서 키보드를 계속 누르고 있을 때에 이벤트가 발생합니다.
.keyup() 선택한 요소에서 키보드를 눌렀다가 떼었을 때에 이벤트가 발생합니다.
글자 개수 설정하기 View

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>글자 개수 설정</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>
        jQuery(document).ready(function(){
          $("textarea").keyup(function(){
            var inputLength=$(this).val().length;
            var remain=150-inputLength;
            $("h1").text(remain);
            if(remain>=0){
              $("h1").css("color","black");
            }else{
              $("h1").css("color","red"  );
            }
          });

        });
    </script>
</head>
<body>
  <div>
    <p>지금 내 생각을</p>
    <h1>150</h1>
    <textarea rows="5" cols="70"></textarea>
  </div>
</body>
</html>

웹브라우저 이벤트

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>인덱스 설정하기</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>
        jQuery(document).ready(function(){
          $("#menu li a").mouseover(function(){
          $("#menu li a").css("background","none");
          $(this).css("background","yellow");

          var num=$("#menu li a").index(this);
          $(".txt").text(num);
          });
        });
    </script>
</head>
<body>
  <div id="menu">
    <ul>
      <li><a href="#">내용1</a></li>
      <li><a href="#">내용2</a></li>
      <li><a href="#">내용3</a></li>
      <li><a href="#">내용4</a></li>
      <li><a href="#">내용5</a></li>
      <li><a href="#">내용6</a></li>
      <li><a href="#">내용7</a></li>
      <li><a href="#">내용8</a></li>
      <li><a href="#">내용9</a></li>
      <li><a href="#">내용10</a></li>
    </ul>
  </div>
  <p class="txt"></p>
</body>
</html>
마우스 오버하면 툴팁 보이게 하기 View

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>마우스 오버하면 툴팁 보이게 하기</title>
    <style>
    * {margin: 0;padding: 0;}
    .box {width: 200px;height: 100px;line-height: 100px;border-radius: 5px; background-color: #ff5722;color: #fff;text-align: center;font-size: 20px; }
    #img {position: absolute;left: 0;top: 0;display: none; }
    </style>
    <script src="assets/js/jquery-1.12.4.min.js"></script>
    <script src="assets/js/jquery-ui-1.12.1.min.js"></script>
    <script>
        jQuery(document).ready(function(){
         $(".box").hover(function(){
          $("#img").show();
         },function(){
          $("#img").hide();
         });

         $(".box").mousemove(function(event){
           $("#img").css("left",event.pageX+20).css("top",event.pageY+20);
         });
        });
    </script>
</head>
<body>
  <div id="img"><img src="assets/img/hand1.png"></div>
  <div class="boxwrap">
    <div class="box">Mouse Hover</div>
  </div>
</body>
</html>
Canvas를 이용한 그림 그리기 View

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>설정</title>
    <style>
      * {margin: 0;padding: 0;}
      #canvas {border:3px solid #1c117f;}
    </style>

</head>
<body>
    <canvas id="canvas" width="700" height="400"></canvas>

    <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>

이벤트 객체

메서드 설명
.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 발생한 이벤트의 타입명을 알려줍니다.
마우스 좌표 알아내기View

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>마우스 좌표 알아내기</title>
    <style>
    * {margin: 0;padding: 0;}
  #wrap {width: 3000px;height: 3000px;}
  #box {width: 400px;height: 400px;border:2px solid blue;margin-left: 300px;margin-top: 100px;position: fixed;}
    </style>
    <script src="assets/js/jquery-1.12.4.min.js"></script>
    <script src="assets/js/jquery-ui-1.12.1.min.js"></script>
    <script>
        jQuery(document).ready(function(){
          $("#box").mousemove(function(event){
            $("#clientX").text(event.clientX);
            $("#clientY").text(event.clientY);
            $("#offsetX").text(event.offsetX);
            $("#offsetY").text(event.offsetY);
            $("#pageX").text(event.pageX);
            $("#pageY").text(event.pageY);
            $("#screenX").text(event.screenX);
            $("#screenY").text(event.screenY);
          });
        });
    </script>
</head>
<body>
  <div id="wrap">
    <div id="box">
      clientX = <span id="clientX">0</span><br>
      clientY = <span id="clientY">0</span><br>
      offsetX = <span id="offsetX">0</span><br>
      offsetY = <span id="offsetY">0</span><br>
      pageX =<span id="pageX">0</span><br>
      pageY = <span id="pageY">0</span><br>
      screenX =<span id="screenX">0</span><br>
      screenY =   <span id="screenY">0</span><br>
    </div>
  </div>
</body>
</html>

이벤트 버브링

메서드 설명
.preventDefault() 기본 이벤트를 제거합니다.
.stopPropagation() 이벤트 전달을 제거합니다.

효과

jQuery UI