-
제이쿼리 - 애니메이션 처럼 보이게 만들기프로그래밍/jQuery 제이쿼리 2021. 10. 29.반응형
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <link rel="icon" href="data:;base64,iVBORw0KGgo="> <style type="text/css"> *{ padding: 0; margin: 0; } body { font-size:14px; font-family:"맑은 고딕", 나눔고딕, 돋움, sans-serif; } a { color: #000; text-decoration: none; } a:hover, a:active { color: tomato; text-decoration: underline; } .btn{ color:#333; font-weight:500; border:1px solid #ccc; background-color:#fff; text-align:center; cursor:pointer; padding:3px 10px 5px; border-radius:4px; } ul { list-style: none; } li{ padding: 0; } h3{ margin: 30px; } .box{ box-sizing: border-box; width: 350px; min-height: 50px; margin: 20px auto; border: 3px dotted gray; padding: 15px; } .ps { font-size: 15px; color: #fff; background: #333; padding: 5px; margin-bottom: 5px; } </style> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script type="text/javascript"> $(function() { // 처음, 마지막 // $("#s1 li").first().css("background", "#eee"); // $("#s1 li").last().css("background", "#eee"); // $("#s1 li").eq(0).css("background", "#eee"); // 처음 // $("#s1 li").eq(-1).css("background", "#eee"); // 마지막 // $("#s1 li").filter(":odd").css("background", "#eee"); // 홀수번째 // $("#s1 li").not(":odd").css("background", "#eee"); // 홀수 제외 $("#s1 li").has(".item").css("border", "1px solid red"); // li 요소중 클래스 item을 하위 요소로 가진 모든 li 요소 if($("label").parents().is("p")){ // 존재하면 true $(".box1").text("<label> 요소의 상위 요소로 p 요소가 존재"); } // map() : 선택한 요소 집합의 각 요소마다 지정된 콜백 함수 실행 var val = $("#s1 li").map(function(){ return $(this).html(); }).get().join(","); $(".box2").html(val); // 인덱스 범위의 요소 $("#s2 li").slice(2).css("color", "tomato"); // 인덱스 2 이상 $("#s2 li").slice(1, 3).css("border", "1px solid #777"); // 인덱스 1이상, 3미만 }); $(function(){ $(".box3").css("background", "tomato"); $(".btn1").click(function(){ var isHidden = $(".box3").is(":hidden"); // var isVisible = $(".box3").is(":visible"); if(isHidden) { $(".box3").show(300); } else { $(".box3").hide(300); } }) }); /* -- 필터링 메소드 .first() : 선택한 요소 중에서 첫 번째 요소를 선택함. .last() : 선택한 요소 중에서 마지막 요소를 선택함. .eq() : 선택한 요소 중에서 전달받은 인덱스에 해당하는 요소를 선택함. .filter() : 선택한 요소 중에서 전달받은 선택자에 해당하거나, 함수 호출의 결과가 참(true)인 요소를 모두 선택함. .not() : 선택한 요소 중에서 전달받은 선택자에 해당하거나, 함수 호출의 결과가 참(true)인 요소를 제외한 나머지 요소를 모두 선택함. .has() : 선택한 요소 중에서 전달받은 선택자에 해당하는 요소를 자손 요소로 가지고 있는 요소를 모두 선택함. .is() : 선택한 요소 중에서 전달받은 선택자에 해당하는 요소가 하나라도 존재하면 참(true)을 반환함. .map() : 선택한 요소 집합의 각 요소마다 콜백 함수를 실행하고, 그 반환값으로 구성된 jQuery 객체를 반환함. .slice() : 선택한 요소 중에서 전달받은 인덱스 범위에 해당하는 요소만을 선택함. */ </script> </head> <body> <h3>탐색(Traversing)</h3> <div class="box"> <p class="ps" id="p1"> <label>프로그래밍</label> </p> <ul id="s1"> <li>자바</li> <li>스프링</li> <li><span class="item">파이썬</span></li> <li>C</li> <li><span class="item">C++</span></li> <li>Unix C</li> </ul> </div> <div class="box"> <p class="ps" id="p2"> <label>웹 프로그래밍</label> </p> <ul id="s2"> <li>자바스크립트</li> <li class="item3"> HTML</li> <li>CSS</li> <li class="item4">Node.js</li> <li>JSP</li> <li>ASP.NET</li> <li><span class="item4">PHP</span></li> </ul> </div> <div class="box box1"></div> <div class="box box2"></div> <hr> <p> <button type="button" class="btn btn1">확인</button> </p> <div class="box box3"></div> </body> </html>show 와 hide 를 이용해서 마치 애니메이션을 넣은 것 처럼 효과를 줄 수 있다.
확인 버튼을 눌렀을때 빨간 박스가 없으면 나오게 만들고 있으면 없앤다
show(움직이는 속도) 괄호안에 속도를 줘서 움직이는 속도를 조절 할 수 있다
숫자가 작을수록 빠르고 클 수록 느리게 움직인다.
전체 코드 중 애니메이션 처럼 보이게 하는 코드 부분
$(function(){ $(".box3").css("background", "tomato"); $(".btn1").click(function(){ var isHidden = $(".box3").is(":hidden"); // var isVisible = $(".box3").is(":visible"); if(isHidden) { $(".box3").show(300); } else { $(".box3").hide(300); } }) });반응형'프로그래밍 > jQuery 제이쿼리' 카테고리의 다른 글
제이쿼리 - 기초(4) (0) 2021.10.30 제이쿼리 - 기초(3) / 이벤트 (0) 2021.10.30 제이쿼리 - 기초(2) (0) 2021.10.29 제이쿼리 - each 반복문 (0) 2021.10.29 jQuery 제이쿼리 기초 (0) 2021.10.27
