jQuery를 실습하기 전, 내가 실습하고 싶은 이미지를 가져온다.
선생님은 귀멸의 칼날 이미지로 하셨지만 나는 귀멸의 칼날을 보지 않았기 때문에 코코로 실습해볼 것이다 ✌(내사랑 코코.. 언제봐도 질리지 않는 세뇰ㄹ 데라쿠르즈 ...)
jQuery 기본 함수 사용법에 대해 알아보자!
| 메서드(method) | 설명 |
| .show() | 보이기 |
| .hide() | 감추기 |
| .toggle() | 보이기/감추기 |
| .slideDown() | 서서히 보이기 |
| .slideUp() | 서서히 감추기 |
| .slideToggle() | 서서보이기/감추기 |
| .fadeIn() | 서서히 보이기 |
| .fadeOut() | 서서히 감추기 |
| .fadeToggle() | 서서히 보이기/감추기 |
| .addClass() | 클래스 추가 |
| .removeClass() | 클래스 삭제 |
| .toggleClass() | 클래스 추가/삭제 |
1. js-this 객채(자기자신을 가르킨다)
<script>
$('button').click(function(){
$(this).toggleClass('active');
});
</script>
2. 메서드(요소찾기): dropdown menu구현
| 메서드(method) | 설명 |
| .children() | 바로 아래 자식요소만 선택 |
| .siblings() | 형제 요소 선택 |
| .stop() | animation 멈춤 |
3. 그외 유용한 함수들
| 메서드(method) | 설명 |
| scroll() | 스크롤 이벤트 함수("window 객체에 주로 사용) |
| scrollTop() | 스크롤 위치 값 반환, 스크롤 위치값 입력("window 객체에 주로 사용") |
| offset()top | 상대주소를 반환한다 |
| attr() | 엘리먼트의 속성을 반환한다 |
| index() | 엘리먼트의 index를 반환한다 |
| eq(index) | 해당하는 index의 element를 반환한다 |
| animate(속성:value) | aniamtion 효과를 발생시킨다 |
| stop() | 중첩된 이벤트 멈추게 함 |
| each() |
(참고) 더 많은 함수를 알고 싶다면!
이곳을 참고하기!! 잘정리되어있다 ㅎㅎ!
jQuery 강좌 – CODING FACTORY
www.codingfactory.net
** 실습화면
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>jquery prac</title>
<!-- basic css, js import 순 -->
<style>
img {
width: 300px;
}
.container {
text-align: center;
}
button {
padding: 1rem;
background: #2929;
}
</style>
<!-- jquery cdn -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<!-- basic -->
<button id="btnDark">dark-theme</button>
<button id="btnWhite">white-theme</button>
<button id="btnShow">show</button>
<button id="btnHide">hide</button>
<button id="btnToggle">toggle</button>
<!-- slide -->
<button id="btnSlideDown">slideDown</button>
<button id="btnSlideUp">slideUp</button>
<button id="btnSlideToggle">SlideToggle</button>
<!-- fade -->
<button id="btnFadeIn">fadeIn</button>
<button id="btnFadeOut">fadeOut</button>
<button id="btnFadeToggle">fadeToggle</button>
</div>
<h1>title</h1>
<img src="./image/img.jpg" alt="coco">
<!--
** js link하면 가장 효율 좋은 위치
아래쪽에 있을 때는 defer 선언이 필요없다.
-->
<script>
$(function(){
// who
var btnDark = $('#btnDark');
var btnWhite = $('#btnWhite');
var $title = $('h1');
const darkTheme = {'font-size': '3rem', 'color': 'red'}
// 언제든지 사용가능하게 해야한다면 global로 적어주는게 베스트
var imgElement = $('img');
var $btnToggle = $('#btnToggle')
// 어떻게 하겠다
// 1번 dark 버튼을 누르면 배경색을 검정색으로 변환
btnDark.click(function(){
$('body').css('background', '#111');
$('img').css('width', 'auto');
// $title.css('font-size', '3rem');
// $title.css('color', 'red');
// 위 두개를 한번에 멀티스타일 적용
$title.css({'font-size': '3rem', 'color': 'red'});
const darkTheme = {'font-size': '3rem', 'color': '#fff'}
$title.css(darkTheme);
})
$title.css(darkTheme);
// 2번 white버튼을 클릭하면 하얀색으로 배경 변경
btnWhite.click(function(){
$('body').css('background', '#fff')
imgElemnt.css('width', '200px')
})
// 변수 선언 : 추상화
var $btnShow = $('#btnShow');
var $btnHide = $('#btnHide');
// show 버튼을 누르면 이미지 보이기
$btnShow.on('click', function(){
imgElement.show();
})
// hide 버튼을 누르면 이미지 숨기기
$btnHide.on('click', function(){
imgElement.hide();
})
// toggle
$btnToggle.on('click', function(){
imgElement.toggle(); /* show, hide 클릭 한번에 */
})
var $btnSlideDown = $('#btnSlideDown')
var $btnSlideUp = $('#btnSlideUp')
var $btnslideToggle = $('#btnSlideToggle')
//slide Down
$btnSlideDown.click(function(){
imgElement.slideDown();
})
// slide Up
$btnSlideUp.click(function(){
imgElement.slideUp();
})
//slide Toggle
$btnslideToggle.click(function(){
imgElement.slideToggle();
})
var btnFadeIn = $('#btnFadeIn');
var btnFadeOut = $('#btnFadeOut');
var btnFadeToggle = $('#btnFadeToggle');
btnFadeIn.click(function(){
imgElement.fadeIn();
})
btnFadeOut.click(function(){
imgElement.fadeOut();
})
btnFadeToggle.click(function(){
imgElement.fadeToggle();
})
})
</script>
</body>
</html>
'웹 > (LIBRARY) JQUERY' 카테고리의 다른 글
| [코딩 공부_98] jQuery로 img 무한 복제 시키기 (0) | 2021.06.17 |
|---|---|
| [코딩 공부_97] bx slider 사용하기 (0) | 2021.06.16 |
| [코딩 공부_96] slick 슬라이더 사용하기 (0) | 2021.06.16 |
| [코딩 공부_95] jQuery로 modal, tab 만들기 (0) | 2021.06.13 |
| [코딩 공부_93] JS 라이브러리, JQuery import 및 적용방법 (0) | 2021.06.11 |
댓글