Jquery 2020은 간단한 프로젝트 숨기기/표시, 페이드, 슬라이드를 추가합니다.
자세히 살펴보겠습니다.
이것은 우리의 HTML 구조입니다
단순화를 위해 Visual Studio 코드를 사용합니다.
<!doctype html>
<html lang="en">
<head>
<title>Jquery within 1 hour</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.js'></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script>
$(()=> {
//
})
</script>
</body>
</html>
1. 제이쿼리 선택기
아래 선택기의 예
예시
<button id="demo">Click Me</button>
<ul class="nav justify-content-center">
<li class="nav-item">
<a class="nav-link active" href="#">Active link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled link</a>
</li>
</ul>
<script>
$(()=> {
//
$('#demo').click(()=> {
$('[class*="nav justify-content"]').toggle()
})
})
</script>
2. 제이쿼리 이벤트
jquery 이벤트의 경우 click,dblclick,mouseleave,load,onclick,ondblclick,onmouseleave,onload,onchange의 인스턴스 변경과 같은 접두사 "on"을 제거합니다.
아래 예
$(()=> {
$('button').click(()=> {
alert("Hello Button")
})
})
click은 바닐라 js에서 onclick을 의미합니다.
3. 제이쿼리 숨기기/보이기
위의 버튼을 사용하는 것처럼 HTML을 전환하는 동일한 방법을 사용할 수 있습니다.
예 1
$(()=> {
$('button').click(()=> {
$('ul').hide()
})
})
hide() 디스플레이 추가: 없음 CSS 스타일
$(()=> {
$('button').click(()=> {
$('ul').show()
})
})
show() 디스플레이 제거: 없음
또 다른 콜백은 toggle()입니다. HTML을 표시하도록 토글합니다. 없음;
$(()=> {
$('button').click(()=> {
$('ul').toggle()
})
})
토글, 숨기기, 괄호 표시 안에 토글(2000)이 2초를 의미하는 것과 같은 전환 효과를 추가할 수도 있습니다.
우리는 전환 거짓말을 얻기 위해 다른 방법을 사용할 수 있습니다
*toggle(2*2000)//2초;
*toggle("천천히")//느리게
토글("빠른")//빠름
4. 제이쿼리 페이드
jquery 숨기기/표시를 알고 있다면 jquery 페이드 효과를 알고 있다는 의미입니다.
Jquery에는 다음과 같은 페이드 방법이 있습니다.
예시
$(()=> {
$('button').click(()=> {
$('ul').fadeToggle("slow")
})
})
4. 제이쿼리 슬라이드
Jquery에는 다음과 같은 슬라이드 방식이 있습니다.
숨기기/토글, 페이드, 슬라이드 이 3가지 효과는 다르지만 사용할 수 있는 방식은 같습니다.
예시
$(()=> {
$('button').click(()=> {
$('ul').slideToggle("slow")
})
})
이것은 간단한 숨기기/표시, 페이드, 슬라이드 jquery 자습서입니다.
간단한 랜딩 페이지의 경우 jquery를 항상 사용하는 것이 좋습니다.
대규모 프로젝트의 경우 여러 라이브러리 reactjs가 있으며 angularjs를 사용하는 것이 좋습니다.
이 짧은 튜토리얼이 마음에 든다면 더 많은 게시물을 격려하기 위해 좋아요, 댓글, 공유를 부탁드립니다.
감사.
Reference
이 문제에 관하여(Jquery 2020은 간단한 프로젝트 숨기기/표시, 페이드, 슬라이드를 추가합니다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/nikhilroy2/jquery-2020-adding-simple-project-hide-show-fade-slide-51hc텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
