본문 바로가기
목차
JQuery

[JQuery]제이쿼리 줍줍

by 지각생 2022. 3. 29.
728x90

jQuery 사용한다고 선언하기

<!-- 적용방법 1 -->
<script src="js/jquery.js"></script>
<!-- 적용방법 2 : cdn -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- 적용방법 3 -->
<script src="http://code.jquery.com/jquery-latest.js"></script>
  1. 첫 번째 방법은 API를 직접 다운받아 사용하는 방법입니다. 다운로드 주소 링크파일은 compressed(jquery.js), uncompressed(jquery.min.js) 두 가지가 존재하는데 압축된 것과 안된 것으로 배포할 때는 min파일(compressed)를 사용하는 것이 좋습니다. (용량차이)
  1. 두 번째 방법은 CDN을 이용하는 방법으로 위의 예제에서는 구글의 것을 사용했습니다.
  2. 세 번째 방법은 jquery에서 제공하는 최신 버전의 jQuery url입니다.

제이쿼리 사용방법

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>

효과

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() 선택한 요소에 범위 내에서 마우스를 움직였을 때 이벤트가 발생합니다.

입력양식 이벤트

메서드설명
.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() 이벤트가 발생한 요소를 알려줍니다.

 

 

http://kimju7.dothome.co.kr/javascript/jquery.html

 

jQuery Reference

Effect 메서드 설명 .hide() 선택 한 요소를 숨김니다. .show() 숨겨져 있던 요소를 보여줍니다. .toggle() 숨겨져 있던 요소를 노출시키고, 노출되어 있던 요소는 숨깁니다. .fadeIn() opacity를 0에서 1로 전

kimju7.dothome.co.kr

 

728x90
저작자표시 비영리

'JQuery' 카테고리의 다른 글

Uncaught TypeError: $(...).each(...).done is not a function  (0) 2022.02.22
jquery를 가져올때 (난 cdn) slim으로 가져왔다. ajax미지원  (0) 2022.02.22
$ajax의 Uri 변수 경로  (0) 2022.02.21
$ajax 공부 (url 주소 보낼땐 시큐리티 조심!//$ajax 통신법은 숙지!)  (0) 2022.02.14
[ajax]데이터 전송(체크박스 데이터 등 배열 형태로 데이터 전송)  (0) 2022.02.10

관련글

댓글

티스토리툴바