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() → 부모 요소의 형제요소를 의미한다.
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() : 요소 항목을 뒤로 타겟 뒤로 가지고 온다 요소항목이 존재할 경우 생성
좋은 글 보고갑니다~~총총총...