jQuery Reference

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

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

제이쿼리 장점

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

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


<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
/*        #list2 li {color: red;}*/
    </style>
    
    <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 src="assets/js/jquery-1.11.0.min.js"></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 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>
    </div>
</body>
</html>

jQuery(document).ready(function(){

});

$(document).ready(function(){

});

$(function(){

});

기본 선택자

종류	예시	설명
태그 선택자	$("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 ~ display : block (영역x)(애니메이션x)
visibility : hidden ~ visibility : visible (영역o)(애니메이션x)
opacity : 0 ~ opcity : 1 (영역o)(애니메이션o)
width : 0; height : 0; overflow : hidden;
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="ko">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    
    <script src="assets/js/jquery-1.11.0.min.js"></script>
    <script>
		$(document).ready(function(){
			//태그 선택자
//			$("h1").css({"backgroundColor":"#bbdefb" , "border":"2px dashed #303f9f"});			
			//클래스 선택자
//			$(".list8").css({"backgroundColor":"#bbdefb" , "border":"2px dashed #303f9f"});			
			//아이디 선택자
//			$("#list2").css({"backgroundColor":"#bbdefb" , "border":"2px dashed #303f9f"});			
			//그룹 선택자
//			$("#list2, .list8").css({"backgroundColor":"#bbdefb" , "border":"2px dashed #303f9f"});			
			//전체 선택자
//			$("*").css({"backgroundColor":"#bbdefb" , "border":"2px dashed #303f9f"});
			
			
			
			//자손 선택자
//			$(".list li").css({"backgroundColor":"#bbdefb" , "border":"2px dashed #303f9f"});			
			//child 선택자
//			$(".list > li").css({"backgroundColor":"#bbdefb" , "border":"2px dashed #303f9f"});			
			//sibling 선택자
//			$(".list3 + li").css({"backgroundColor":"#bbdefb" , "border":"2px dashed #303f9f"});			
			//siblings 선택자
//			$(".list3 ~ li").css({"backgroundColor":"#bbdefb" , "border":"2px dashed #303f9f"});
			
			
			
//			속성 선택자[name="value"]
//			$("li[class='list4']").css({"backgroundColor":"#bbdefb" , "border":"2px dashed #303f9f"});
//			속성 선택자[name^="value"]
//			$("li[class^='list']").css({"backgroundColor":"#bbdefb" , "border":"2px dashed #303f9f"});
//			속성 선택자[name$="4"]	
//			$("li[class$='4']").css({"backgroundColor":"#bbdefb" , "border":"2px dashed #303f9f"});
//			속성 선택자[name*="4"]			
//			$("li[class*='4']").css({"backgroundColor":"#bbdefb" , "border":"2px dashed #303f9f"});			
//			속성 선택자[name!="4"]			
//			$("li[class!='4']").css({"backgroundColor":"#bbdefb" , "border":"2px dashed #303f9f"});	
//			속성 선택자[name="value"][name="value"]			
//			$("li a[href][title]").css({"backgroundColor":"#bbdefb" , "border":"2px dashed #303f9f"});				
			
			
			
//			기본 필터 선택자 :eq(index)
//			$("li:eq(3)").css({"backgroundColor":"#bbdefb" , "border":"2px dashed #303f9f"});
//			기본 필터 선택자 :lt(index)
//			$("li:li(3)").css({"backgroundColor":"#bbdefb" , "border":"2px dashed #303f9f"});
//			기본 필터 선택자 :gt(index)
//			$("li:gt(3)").css({"backgroundColor":"#bbdefb" , "border":"2px dashed #303f9f"});
//			기본 필터 선택자 :first
//			$("li:first(3)").css({"backgroundColor":"#bbdefb" , "border":"2px dashed #303f9f"});
//			기본 필터 선택자 :last
//			$("li:last(3)").css({"backgroundColor":"#bbdefb" , "border":"2px dashed #303f9f"});	
//			기본 필터 선택자 :odd
//			$("li:odd(3)").css({"backgroundColor":"#bbdefb" , "border":"2px dashed #303f9f"});				
//			기본 필터 선택자 :even
//			$("li:even(3)").css({"backgroundColor":"#bbdefb" , "border":"2px dashed #303f9f"});		
//			기본 필터 선택자 :not
//			$("li:not(:eq(4))").css({"backgroundColor":"#bbdefb" , "border":"2px dashed #303f9f"});			
			
			
			
//			내용 필터 선택자 : contains
//			$("li:contains('list4')").css({"backgroundColor":"#bbdefb" , "border":"2px dashed #303f9f"});
//			내용 필터 선택자 : empty			
//			$("li:empty").css({"backgroundColor":"#bbdefb" , "border":"2px dashed #303f9f"});
//			내용 필터 선택자 : parent			
//			$("li:parent").css({"backgroundColor":"#bbdefb" , "border":"2px dashed #303f9f"});	
//			내용 필터 선택자 : has()			
//			$("li:has('li')").css({"backgroundColor":"#bbdefb" , "border":"2px dashed #303f9f"});			
			
			
			
//			보임 필터 선택자 : hidden
//			$("li:hidden").css({"backgroundColor":"#bbdefb" , "border":"2px dashed #303f9f"});
//			보임 필터 선택자 : visible
//			$("li:visible").css({"backgroundColor":"#bbdefb" , "border":"2px dashed #303f9f"});	
			
			
			
//			자식 필터 선택자
//			$("li:first-child").css({"backgroundColor":"#bbdefb" , "border":"2px dashed #303f9f"});
//			$("li:first").css({"backgroundColor":"#bbdefb" , "border":"2px dashed #303f9f"});
//			$("li:last-child").css({"backgroundColor":"#bbdefb" , "border":"2px dashed #303f9f"});
//			$("li:last").css({"backgroundColor":"#bbdefb" , "border":"2px dashed #303f9f"});
//			$("li:nth-child(4)").css({"backgroundColor":"#bbdefb" , "border":"2px dashed #303f9f"});		
//			$("li:nth-child(even)").css({"backgroundColor":"#bbdefb" , "border":"2px dashed #303f9f"});	
//			$("li:nth-child(odd)").css({"backgroundColor":"#bbdefb" , "border":"2px dashed #303f9f"});					
//			$("li:nth-child(4n)").css({"backgroundColor":"#bbdefb" , "border":"2px dashed #303f9f"});	
//			$("li:nth-child(4n+2)").css({"backgroundColor":"#bbdefb" , "border":"2px dashed #303f9f"});	
//			$("li:only-child").css({"backgroundColor":"#bbdefb" , "border":"2px dashed #303f9f"});					
		});
		
	</script>
</head>
<body>
    <h1>jQuery</h1>
  <div id="sample">
    <ul id="list1" class="list">
      <li class="list1"><a href="#list2">list1</a></li>
      <li class="list2"><a href="http://naver.com">list2</a></li>
      <li class="list3"><a href="http://www.daum.net">list3</a></li>
      <li class="list4"><a href="http://webstoryboy.co.kr" title="사이트">list4</a></li>
      <li class="list5">list5</li>
      <li class="list6">list6</li>
      <li class="list7">list7</li>
      <li class="list8">list8</li>
      <li class="list9">list9</li>
      <li class="list10">list10</li>
    </ul>
    <ul id="list2" class="list">
      <li class="list1">list1</li>
      <li class="list2">list2</li>
      <li class="list3">list3</li>
      <li class="list4">list4</li>
      <li class="list5"></li>
      <li class="list6">list6</li>
      <li class="list7">list7</li>
      <li class="list8">list8</li>
      <li class="list9">list9</li>
      <li class="list10">list10
        <ul>
          <li>list10-1</li>
          <li style="width:0; height:0; overflow:hidden;">list10-2</li>
          <li style="opacity:0;">list10-3</li>
          <li style="visibility:hidden;">list10-4</li>
          <li style="display:none;">list10-5</li>
          <li>list10-6</li>
        </ul>
      </li>
      </ul>
    </div>
</body>
</html>

jquery의 선택자를 기준으로 선택한 요소 중 원하는 요소를 다시 한번 더 선택할 수 있는 탐색과 관련된 jquery 메서드입니다.

트리구조 탐색

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

필터링

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

종류	설명
`.clone()`	선택한 요소를 복사합니다.
`.unwrap()`	선택한 요소의 부모 요소를 삭제합니다.
`.wrap()`	선택한 요소에 새로운 요소를 추가합니다.
`.wrapAll()`	선택한 요소에 새로운 요소를 한꺼번에 추가합니다.
`.wrapInner()`	선택한 요소에 새로운 요소를 각각 추가합니다.
`.append()`	선택한 요소 마지막 위치에 새로운 요소를 추가합니다.
`.appendTo(target)`	선택한 요소(타겟) 마지막 위치에 새로운 요소를 추가합니다.
`.prepend()`	선택한 요소 처음 위치에 새로운 요소를 추가합니다.
`.prependTo(target)`	선택한 요소(타겟) 처음 위치에 새로운 요소를 추가합니다.
`.after()`	선택한 요소 다음 위치에 새로운 요소를 추가합니다.
`.before()`	선택한 요소 이전 위치에 새로운 요소를 추가합니다.
`.insertafter(target)`	선택한 요소(타겟) 다음 위치에 새로운 요소를 추가합니다.
`.insertbefore(target)`	선택한 요소(타겟) 이전 위치에 새로운 요소를 추가합니다.
`.empty()`	선택한 요소의 하위 내용들을 삭제합니다.
`.remove()`	선택한 요소를 삭제합니다.
`.replaceAll()`	선택한 요소를 새로운 요소로 바꿉니다.
`.replaceWidt()`	선택한 요소를 새로운 요소로 바꿉니다.
`.html()`	선택한 요소 내부의 html을 읽고 쓸 수 있습니다.
`.text()`	선택한 요소의 텍스트를 읽고 쓸 수 있습니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>append</title>
</head>
<body>
    <h3>jquery</h3>
    <div>
        <ul class="list">
            <li class="slist1">내용1</li>
            <li class="slist2">내용2</li>
        </ul>
        <p class="plist1">데스크1</p>
        <p class="plist2">데스크2</p>
        <p class="plist3">데스크3</p>
        <p class="plist4">데스크4</p>
    </div>
    
   <script src="assets/js/jquery-1.11.0.min.js"></script>
   <script>
       //$(".list").append("<li>내용3</li>")
       //$(".list").prepend("<li>내용0</li>")
       
       //$("<li>내용3</li>").appendTo(".list");
       //$("<li>내용0</li>" ).prependTo(".list");
       
       //$(".slist1").before("<li>내용0</li>");
       //$(".slist2").after("<li>내용3</li>");
       
       //$("<li>내용0</li>").insertBefore(".slist1");
       //$("<li>내용3</li>").insertAfter(".slist2");
       
       $(".list").unwrap( );
       $(".plist1").wrap("<div />" );
       $("p").wrapAll("<div />" );
       $("li").wrapInner("<h4 / >");
       
       //$("h3").replaceWith("<h2>javascript</h2>");
       $("h3").text("데스트");
       $("h3").html("<em>데스트</em>");
       $("h3").remove( );
       $(".list").empty( );
   </script>
</body>
</html>

.append ( ) View

선택된 요소 내부 가장 뒤에 매개 변수로 전달되는 문자열 및 요소를 추가 해주는 함수입니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>append()</title>
</head>
<body>
   <button id="append">append</button>
    <div id="container">
        
    </div>
    
    <script src="assets/js/jquery-1.10.2.min.js"></script>
    <script>
        //버튼을 클릭하면 alert으로 "클릭했습니다." 출력
        
        $("button").click(function(){
            
            $("#container").append(fun1);
        });
        
        function fun1(){
            var number = Math.ceil(Math.random()*9);
            var img = "<img src='assets/img/"+number+".png' alt='' width='100'>";
            return img;
        }
    </script>
</body>
</html>

Attributes

메서드	설명
`.eq()`	인덱스 번호에 해당하는 요소를 찾습니다.
`.filter()`	선택된 요소 집합에서 선택자를 추가하거나 함수를 사용해서 원하는 결과를 추출해냅니다.
`.first()`	선택된 요소 집합에서 첫번째 자식 요소를 찾습니다.
`.has()`	선택된 요소들이 자신의 자식 요소에서 주어진 선택자가 있는지를 확인하여 범위를 축소합니다.
`.is()`	문서 객체의 특징을 판별합니다.
`.last()`	선택된 노드 집합에서 마지막 자식 요소를 찾습니다.
`.map()`	대상이 되는 요소 집합의 배열을 새롭게 변경합니다.
`.not()`	조건에 맞지 않은 것들만 찾아서 선택합니다.
`.slice()`	선택된 집합을 조건의 범위로 재선택해줍니다.

.attr() 속성 값 가져오기 view


<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>Attr</title>
</head>
<body>
	<h1>.attr()</h1>
	<a href="#" title="얼굴이미지" id="face" class="face5">
		<img src="assets/img/face5.png" alt="얼굴">
	</a>
	<h2>a의 속성 값</h2>
	<ul>
		<li>title : <span class="a1">0</span></li>
		<li>id : <span class="a2"0></span></li>
		<li>class : <span class="a3"0></span></li>
		<li>img alt : <span class="a4"0></span></li>
		<li>img src : <span class="a5"0></span></li>
	</ul>
	
	<script src="assets/js/jquery-1.11.0.min.js"></script>
	<script>
		var title = $("#face").attr("title");	//#face의 title 속성 값을 변수 title에 저장
		var id = $("#face").attr("id");			//#face의 id 속성 값을 변수 id에 저장
		var cl = $("#face").attr("class");		//#face의 class 속성 값을 변수 cl에 저장
		var alt = $("#face img").attr("alt");
		var src = $("#face img").attr("src");
			
		$(".a1").text(title);					//.a1 span 영역에 변수 title 값을 넣어준 것입니다.
		$(".a2").text(id);						//.a2 span 영역에 변수 id 값을 넣어준 것입니다.
		$(".a3").text(cl);						//.a3 span 영역에 변수 cl 값을 넣어준 것입니다.
		$(".a4").text(alt);
		$(".a5").text(src);
	</script>
</body>
</html>

.attr() 속성 값 변경하기 view


<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <h1>.atter( )속성값 변경하기</h1>
    <a href="#" title="얼굴 이미지" id="face" 
    class="face1">
        <img src="assets/img/face2.png" alt="얼굴">
    </a>
    <h2>a의 속성 값 변경하기</h2>
    <ul>
        <li><span class="a1">width:100(클릭)</span></li>
        <li><span class="a2">width:200</span></li>
        <li><span class="a3">width:300</span></li>
        <li><span class="a4">width:400</span></li>
        <li><span class="a5">width:500</span></li>
    </ul>
    <script src="assets/js/jquery-1.11.0.min.js"></script>
    <script>
        $("#face").attr({"title":"일러스트 얼굴", "id": "face2"});
       
        
        //all을 클릭했을 떄 img의 속성 width값 height값을 변경
        $(".a1").click(function( ){ 
            $(".face1 > img").attr({"with":"100", "height":"100"});
        });
        $(".a2").click(function( ){ 
            $(".face1 > img").attr({"with":"200", "height":"200"});
        });
        $(".a3").click(function( ){ 
            $(".face1 > img").attr({"with":"300", "height":"300"});
        });
        $(".a4").click(function( ){ 
            $(".face1 > img").attr({"with":"400", "height":"400"});
        });
        $(".a5").click(function( ){ 
            $(".face1 > img").attr({"with":"500", "height":"500"});
        });
    </script>
</body>
</html>

.attr()을 이용한 탭 메뉴 만들기 view


<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Attr을 이용한 탭 메뉴 만들기</title>
    <style>
        * {padding: 0; margin: 0;}
        li {list-style: none;}
        a {text-decoration: none;}
        #tab-menu {width: 350px; margin: 50px auto;}
        .tab-btn ul {overflow: hidden; margin-bottom: 1px;}
        .tab-btn li {float: left; width: 20%; text-align: center;}
        .tab-btn li a {padding: 14px; display: block; background-color: #1e88e5; color: #fff; margin-right: 1px; }
        .tab-btn li:last-child a {margin-right: 0;}
    </style>
</head>
<body>
    <div id="tab-menu">
        <div class="tab-btn">
            <ul>
                <li><a href="#">Tab1</a></li>
                <li><a href="#">Tab2</a></li>
                <li><a href="#">Tab3</a></li>
                <li><a href="#">Tab4</a></li>
                <li><a href="#">Tab5</a></li>
            </ul>
        </div>
        <div class="tab-cont">
            <img src="assets/img/kim1.jpg" width="350" alt="이미지1">
        </div>
    </div>
    
   
   
    
    <script src="assets/js/jquery-1.10.2.min.js"></script>
    <script>
        //tab1 클릭하면 버튼 배경색을 빨간색으로 변경해주세요.
//        $(".tab-btn ul li:eq(0)").click(function(){
//            $(".tab-btn ul li:eq(0) a").css("background","red");
//        });
        var src = $(".tab-cont img").attr("src");
//        console.log(src);
        $(".tab-btn ul li:eq(0)").click(function(){
            $(".tab-cont > img").attr({"src":"assets/img/kim1.jpg","alt":"이미지1"});
        });
        $(".tab-btn ul li:eq(1)").click(function(){
            $(".tab-cont > img").attr({"src":"assets/img/kim2.jpg","alt":"이미지2"}); 
        });
        $(".tab-btn ul li:eq(2)").click(function(){
            $(".tab-cont > img").attr({"src":"assets/img/kim3.jpg","alt":"이미지3"});
        });
        $(".tab-btn ul li:eq(3)").click(function(){
            $(".tab-cont > img").attr({"src":"assets/img/kim4.jpg","alt":"이미지4"});
        });
        $(".tab-btn ul li:eq(4)").click(function(){
            $(".tab-cont > img").attr({"src":"assets/img/kim5.jpg","alt":"이미지5"});
        });
    </script>
</body>
</html>

Offset

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

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

Offset View

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>offset</title>
    <style>
        *{padding: 0; margin: 0;}
        body {width: 2000px; height: 4000px;}
        #box{position: absolute; width: 100px; height: 100px; left: 50%; top: 50; background: #000;}
        #info{position: fixed; left: 10px; top: 10px;}
        
    </style>
</head>
<body>
    <div id="info">
        <span>offset().left =</span><span class="offset_left">0</span><br>
        <span>offset().top =</span><span class="offset_top">0</span><br>
        <span>position().left =</span><span class="position_left">0</span><br>
        <span>position().top =</span><span class="position_top">0</span><br>
        <span>scrollLeft =</span><span class="scroll_left">0</span><br>
        <span>scrollTop =</span><span class="scroll_top">0</span><br>
    </div>
    
    <div id="box">Drag</div>
    
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
     <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script>
      //#box 요소에게 백그라운드 컬러를 #f06292를 적용하세요
      //color : #fff, border-radius: 50% 적용
      $("#box").css({
         'backgroundColor':'#f06292',
         'color':'#fff',
         'borderRadius':'50%',
         'textAlign':'center',
         'lineHeight':'100px'
      });
      //$(".offser_left").text("offset(  ).left");
      //$("#info span:eq(0)").text();
      
//      var tt = $("#info span:eq(0)").text( );
//        $(".offset_left").text(tt);
      
      $("#box").draggable({
         drag:function(){
            $('.offset_left').text($("#box").offset().left);
            $('.offset_top').text($("#box").offset().top);
            $('.position_left').text($("#box").position().left);
            $('.position_top').text($("#box").position().top);
         }
      });
      $(window).scroll(function(){
         $(".scroll_left").text($(window).scrollLeft());
         $(".scroll_top").text($(window).scrollTop());
      });
      
   </script>
</body>
</html>

Dimensions

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

dimesions view


<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>dimensions</title>
    <style>
        #box {margin: 10px; padding: 10px; border: 10px solid #ccc;}
    </style>
</head>
<body>
    
    <div id="box">
        <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>박스의 innerWidth = </span><span id="innerHeight">0</span><br>
        <span>박스의 outerHeight = </span><span id="outerHeight">0</span><br>
    </div>
</body>

    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script>
      //
      $(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>
</html>

제이쿼리는 CSS 속성을 알아 낼 수도 있으며, 속성을 줄 수도 있습니다.

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

.addclass( ) 속성을 이용한 탭메뉴 만들기 View

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>addclass</title>
    <style>
        * {padding: 0; margin: 0; }
        li {list-style: none;}
        a {text-decoration: none;}
        #tab-menu {width: 350px; margin: 50px auto;}
        .tab-btn ul {overflow: hidden; margin-bottom: 1px;}
        .tab-btn li {float: left; width: 20%; text-align:  center;}
        .tab-btn li a {padding: 14px; display: block; background-color: #1e88e5; color: #fff; margin-right: 1px; }
        .tab-btn li:last-child a {margin-right: 0;}
        #tabImg{width: 350px; height: 300px;}
        #tabImg.img1 {background: url(assets/img/1.png) no-repeat; background-size: 350px;}
        #tabImg.img2 {background: url(assets/img/2.png) no-repeat; background-size: 350px;}
        #tabImg.img3 {background: url(assets/img/3.png) no-repeat; background-size: 350px;}
        #tabImg.img4 {background: url(assets/img/4.png) no-repeat; background-size: 350px;}
        #tabImg.img5 {background: url(assets/img/5.png) no-repeat; background-size: 350px;}
    </style>
</head>
<body>
    <div id="tab-menu">
      <div class="tab-btn">
         <ul>
            <li><a href="#">Tab1</a></li>
            <li><a href="#">Tab2</a></li>
            <li><a href="#">Tab3</a></li>
            <li><a href="#">Tab4</a></li>
            <li><a href="#">Tab5</a></li>
         </ul>
      </div>
          <div class="img1" id="tabImg"></div>
      </div>

   <script src="assets/js/jquery-1.11.0.min.js"></script>
   <script>
      $(document).ready(function(){
         $(".tab-btn ul li:eq(0)").click(function(){
            $("#tabImg").removeClass( ).addClass("img1");
         });
         $(".tab-btn ul li:eq(1)").click(function(){
            $("#tabImg").removeClass( ).addClass("img2");
         });
         $(".tab-btn ul li:eq(2)").click(function(){
            $("#tabImg").removeClass( ).addClass("img3");
         });
         $(".tab-btn ul li:eq(3)").click(function(){
            $("#tabImg").removeClass( ).addClass("img4");
         });
         $(".tab-btn ul li:eq(4)").click(function(){
            $("#tabImg").removeClass( ).addClass("img5");
         });
      });
   </script>
</body>
</html>

탭메뉴 만들기

See the Pen Tab Menu by wngus3277 (@wngus3277) on CodePen.

햄버거 메뉴 만들기

See the Pen menu-hamburger style1 by wngus3277 (@wngus3277) on CodePen.

Effect

메서드	설명
`.hide()`	선택 한 요소를 숨김니다.
`.show()`	숨겨져 있던 요소를 보여줍니다.
`.toggle()`	숨겨져 있던 요소를 노출시키고, 노출되어 있던 요소는 숨깁니다.
`.fadeIn()`	opacity를 0에서 1로 전환하면서 서서히 나타나게 처리합니다.
`.fadeOut()`	opacity를 1에서 0으로 전환하면서, 서서히 사라지게 처리합니다.
`.fadeToggle()`	fldeIn()과 fadeOut()을 번갈아 가며 실행해줍니다.
`.fadeTo()`	불투명도를 지정하여 fade를 조절합니다.
`.slideDown()`	슬라이딩 스타일로 요소를 보이게 합니다.
`.slideUp`	슬라이딩 스타일로 요소를 숨기게 합니다.
`.slideToggle()`	slideDown()와 slideUp()을 반복하여 바꿔줍니다.

.slideToggle view


<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>slideToggle</title>
    <style>
        * {margin: 0; padding: 0;}
        a {text-decoration: none;}
        .accordion-tit {background: #ccc; width: 100%; display: block; padding: 5px; border-top: 1px solid #000;}
        .accordion-desc {display: none;}
    </style>
</head>
<body>
   <div>
       <ul class="accordion">
           <li><a href="#" class="accordion-tit">title1</a>
               <div class="accordion-desc">
                   <p>내용</p>
               </div>
           </li>
           <li><a href="#" class="accordion-tit">title2</a>
               <div class="accordion-desc">
                   <p>내용</p>
               </div>
           </li>
           <li><a href="#" class="accordion-tit">title3</a>
               <div class="accordion-desc">
                   <p>내용</p>
               </div>
           </li>
       </ul>
   </div>
   
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script>
        //첫번째 버튼을 클릭하면 첫번째 컨텐츠를 보여주세요!
        $(".accordion-tit").click(function(){
           $(this).next(".accordion-desc").slideToggle(100);
        });
    </script>
</body>
</html>

Animation

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

$(selector).animate(properties);
$(selector).animate(properties,duration);
$(selector).animate(properties,duration,easing);
$(selector).animate(properties,duration,easing,collback);
properties : border, margin, padding, height, width, font-size, bottom, left, right, top, line-height(background-color [X])

//폰트 사이즈를 현재 크기에서 20px로 변경하면서 2초동안 애니메이션 합니다.
$("selector").animate({"font-size":"20px"},2000);
$("selector").animate({fontSize:"20px"},2000);

//선택한 요소의 왼쪽, 오른쪽 margin을 100px로 변경하면서 600밀리세컨드동안 애니메이션 합니다.
$("selector").animate({"margin-left":"100px","margin-right":"100px"},600);
$("selector").animate({marginLeft:100,marginRight:100},"slow");

//선택한 요소의 현재 위치를 기준으로 2초마다 오른쪽으로 20px만큼 애니메이션 합니다.
$("selector").animate({left:"+=20"},2000);

//선택한 요소의 현재 위치를 기준으로 2초마다 오른쪽으로 20px만큼 애니메이션하고 collback함수를 호출합니다.
$("selector").animate({left:"+=20"},2000,function(){});

Animation view


<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>Animation</title>
	<style>
		#box {
			width: 70px; height: 70px; 
			background: linear-gradient(to right, #4facfe 0%, #00f2fe 100%);
			border-radius: 50%;
			position: absolute; left: 50%; top: 50%;
			margin-left: -35px; margin-right: -35px;
		}
		.btn1 {
			position: relative; z-index: 1000;
		}
	</style>
</head>
<body>
	<button class="btn1">Color</button>
	<button class="btn2">Width,height</button>
	<button class="btn3">Animation</button>
	<button class="btn4">None</button>
	<button class="btn5">5</button>
	<button class="btn6">Top</button>
	<button class="btn7">7</button>
	<button class="btn8">8</button>
	<button class="btn9">9</button>
	<button class="btn10">10</button>
	<button class="btn11">Loop</button>
	<button class="btn12">setInterval</button>
	
	<div id="box"></div>
	
	<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script>
    	//btn1을 클릭하면 box의 백그라운드 색을 빨간색으로 변경해주세요!
		$(".btn1").click(function(){
			$("#box").css("background","red");
		});
		
		//btn2을 클릭하면 box의 크기를 두배로 변경해주세요!
		$(".btn2").click(function(){
			$("#box").css({"width":"140px","height":"140px"});
		});
		
		//btn3을 클릭하면 box의 크기를 두배로 애니메이션 해주세요!
		$(".btn3").click(function(){
			$("#box").animate({"width":"140px","height":"140px"},600);
		});
		
		//btn4을 클릭하면 box를 사라지게 해주세요! (4가지)
//		$(".btn4").click(function(){
//			$("#box").css("display","none");
//		}); 
//		$(".btn4").click(function(){
//			$("#box").hide();
//		});
//		$(".btn4").click(function(){
//			$("#box").slideUp();
//		});
		$(".btn4").click(function(){
			$("#box").fadeOut();
		});
		
		//btn5을 클릭하면 box가 사라지고 한번 더 클릭하면 나타나게 해주세요! 
		$(".btn5").click(function( ){ 
           //$("#box").slideToggle( );
           //$("#box").fadeToggle( );
           $("#box").toggleClass("on");
           if($("#box").hasClass("on")){
               $("#box").hide();
           }else{
               $("#box").show( );
           }
        });
		
		//btn6을 클릭하면 box를 밑으로 이동시켜 주세요!
		$(".btn6").click(function(){
			$("#box").animate({"margin-top":"100px"},200);
		});
		
		$(".btn7").click(function(){
			$("#box").animate({"margin-top":"100px"},200);
			$("#box").animate({"margin-left":"100px"},200);
			$("#box").animate({"margin-top":"0"},200);
			$("#box").animate({"margin-left":"0"},200);
		});
		
		$(".btn8").click(function(){
			$("#box").animate({"left":"+=20px"});
		});
		
		$(".btn9").click(function(){
			$("#box").animate({"height":"toggle"});
		});
		
		$(".btn10").click(function(){
			$("#box").animate({"height":"100px", opacity:"0.4"},"slow");
			$("#box").animate({"width":"100px", opacity:"0.8"},"slow");
			$("#box").animate({"height":"70px", opacity:"0.4"},"slow");
			$("#box").animate({"width":"70px", opacity:"0.8"},"slow");
		});
		
		$(".btn11").click(function(){
			loop();
		});
		
		function loop(){
			$("#box")
					.css({"width":"200","height":"200"})
					.animate({marginTop:100},1000)
					.animate({marginLeft:100},1000,)
					.animate({marginTop:0},1000)
					.animate({marginLeft:0},1000,loop);
		};
		
		$(".btn12").click(function(){
			setInterval (time, 4000);
		});
		
		function time(){
			$("#box")
				.animate({opacity: "0.1"},1200)
				.animate({opacity: "1"},1200)
				.slideUp("slow")
				.slideDown("fast");
		};
		time();
    </script>
</body>
</html>

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

이벤트 핸들러

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

마우스 이벤트

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

See the Pen Mouse Event by wngus3277 (@wngus3277) on CodePen.

입력양식 이벤트

메서드	설명
`.blur()`	선택한 요소에 포커스가 떠날 때 이벤트가 발생합니다.
`.change()`	선택한 요소에 값이 변경될 때 이벤트가 발생합니다.
`.focusin()`	선택한 요소에 포커스를 획득했을 때 이벤트가 발생합니다.
`.focusout()`	선택한 요소에 포커스가 사라졌을 때 이벤트를 제거합니다.
`.select()`	입력 양식 텍스트를 선택했을 때 이벤트가 발생합니다.
`.submit()`	전송 버튼을 눌렀을 때 이벤트가 발생합니다.
`.reset()`	reset 버튼을 누르면 이벤트가 발생합니다.

키보드 이벤트

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

웹 브라우저 이벤트

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

이벤트 객체

메서드	설명
`.clientX()`	document에서 스크롤 값으 제외하고 마우스의 X좌표 값을 알려줍니다.
`.clientY()`	document에서 스크롤 값으 제외하고 마우스의 Y좌표 값을 알려줍니다.
`.data()`	이벤트 생성이 매개변수 두번째 값을 넘겨주면, 이벤트 프로퍼티를 통해서 전달됩니다.
`.offsetX()`	이벤트 발생시 이벤트의 대상으로부터 마우스의 X좌표 값을 알려줍니다.
`.offsetY()`	이벤트 발생시 이벤트의 대상으로부터 마우스의 Y좌표 값을 알려줍니다.
`.pageX()`	document에서 스크롤 이동값으 포함한 마우스의 X좌표 값을 알려줍니다.
`.pageY()`	document에서 스크롤 이동값으 포함한 마우스의 Y좌표 값을 알려줍니다.
`.screenX()`	모니터 화면을 기준으로 마우스의 X좌표 값을 알려줍니다.
`.screenY()`	모니터 화면을 기준으로 마우스의 Y좌표 값을 알려줍니다.
`.target()`	이벤트가 발생한 요소를 알려줍니다.

Mouse Event