JQuery 3일차

박창희·2021년 2월 3일
1

JQuery

목록 보기
3/4

1. Jquery 에서 다양한 이펙트 효과

  • hide() : 요소 대상이 사라짐
  • show() : 요소 대상을 보여지게함
  • toggle() : 요소 대상을 사라질경우 보이게하고 보일경우 사라짐
  • slideUp() : 요소를 위쪽으로 사라짐
  • slideDown() : 요소를 아래쪽으로 나타냄
  • slideToggle() : 요소를 위쪽으로 사라지게 하거나 아래쪽으로 나타냄
  • fadeIn() : 서서히 나타남
  • fadeOut() : 서서히 사라짐
  • fadeTo() : 요소의 투명도를 조절할 수 있음
  • fadeToggle() : 없을경우 서서히 나타나게 하고 요소가 있을 경우 서서히 나타나게 함
  • animate() : 요소의 animation 을 사용할 수 있게함

animate 의 경우 여러번 요소를 반복할 수 있음

2. JQuery 이펙트 효과 응용

$(this).next().slideToggle();
$(this).parent().siblings().find("ul").slideUp();

// 위의 두 요소를 합칠경우
$(this).next().slideToggle().end().parent().siblings().find("ul").slideUp();
  • siblings() : 형제 요소를 의미한다.

ex) .parent().siblings() → 부모 요소의 형제요소를 의미한다.

  • end() 처음 선택한 요소로 돌아간다.

ex) 위의 예제에서는 $(this) 로 다시 돌아가게된다.

3. function 복습

$(function(){

})

$(document).ready(function(){

})

windows.onload = function(){

}

위의 3개의 코드전부 같은 의미를 지닌다.

전부 html이 실행된 이후 script를 통해 요소 효과를 적용한다.

4. CDN 방식

CDN은 Content Delivery Network 의 약어로서 전 세계에 전략적으로 분산되어있는 서버 네트워크입니다(지리적으로). CDN은 사용자가 리소스를 다운로드 할 수있는 대체 서버 노드를 제공

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

5. toggleClass() / hasClass() / removeClass()

  • toggleClass() : 요소의 class 를 토글 형식으로 추가 혹은 삭제가 가능하다.
  • hasClass() : 요소의 class 의 존재의 여부를 확인한다.
  • addClass() : 요소의 class를 추가한다.

6. replaceWith() , replaceAll()

  • replaceWith() : //replaceWith() 선택한 모든 요소를 지정된 요소를 대체한다.
  • replaceAll() : //replaceAll() 선택한 요소를 지정된 요소로 대체한다. 전부를 -> p

7. prepend() append() .html() .text()

  • prepend() : 요소 이전에 항목을 추가한다.
$("div").prepend($("<p>").addClass("prepend").text("prepend"+(cnt++)))
  • append() : 요소 이후에 항목을 추가한다.
$("div").append($("<p>").addClass("append").text("append"+(cnt++)))
  • html() : innerHTML 요소로 형태를 만든다
$("div").html("<b>html 요소를 바꾼다</b>");
  • text() : textContent 형식으로 요소를 만든다.
$("div").text("<b>text 요소를 바꾼다</b>");

8. setInterval() / appendTo()

  • setInterval() : 함수를 시간마다 반복 실행
  • append() : 요소 항목을 뒤로 타겟 뒤로 가지고 온다 요소항목이 존재할 경우 생성
profile
큰꿈의 개발자

1개의 댓글

comment-user-thumbnail
2021년 2월 3일

좋은 글 보고갑니다~~총총총...

답글 달기