반응형
JavaScript로는 이미지를 리스트에 담아서 리스트 반복문에 넣어서 이미지의 크기를 설정해줘야 하는데
jQuery에서는 간단하게 바꿀 수 있다.
jQuery 문법
html : 태그요소에 접근
css : 스타일 변경
on : 이벤트 추가(키보드,마우스 등)
attr : 속성 (src, href, value등)
ex01jQuery사용법.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<ul>
<li>안현진</li>
<li>최태양</li>
<li>손지영</li>
</ul>
<h1>빅데이터반😀</h1>
<h2>기분좋은 월요일~</h2>
<body>
<!--1. 직접 다운로드 받아서 로드하는 방법-->
<script src="js/jquery-3.6.0.min.js"></script>
<!--2. CDN(Content Delivery Network)을 활용해서 로드하는 방법-->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<!--integrity, crossorigin : 보안상 필요한 옵션(수정하지 말 것)-->
<script>
// 절대 jquery 파일 로딩하는 script 태그 안쪽에 코드 작성하지 말 것.
// 태그에 여러개의 스타일을 적용시키는 방법
// 1. 메소드 체인
$('li').css('color','blue').css('font-size','50px').css('font-family','궁서');
// 2. javascript의 객체 형태로 스타일 적용시키기
// {'property1' : '값', 'property2' : '값'}
$('h1').css({'color':'pink',
'font-family':'굴림'})
// 3. javascript의 객체 형태로 스타일 적용시키기2
$('h2').css({color:'orange',
fontFamily:'나눔고딕'})
</script>
</body>
</html>ex02jquery.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id = 'div1'>
<div id="div2">안녕 div2</div>
<div id="div3">div3</div>
<div id="div4">div4</div>
</div>
<script src="js/jquery-3.6.0.min.js"></script>
<script>
//1. 자식요소 가져오는 방법
console.log($('#div1').children('div'));
//2. 부모요소 가져오는 방법
console.log($('#div2').parents('div'));
//3. 이전 요소들을 가져오는 방법
console.log($('#div4').prevAll());
//4. 다음 요소들을 가져오는 방법
console.log($('#div2').nextAll());
</script>
</body>
</html>ex03jqeury이벤트.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1{
width: 100px;
height: 100px;
background-color: coral;
font-size: 30px;
text-align: center;
}
.box2{
width: 200px;
height: 200px;
background-color: black;
}
</style>
</head>
<body>
<div class='box1'>
클릭
</div>
<div class='box1'>
클릭2
</div>
<script src="js/jquery-3.6.0.min.js"></script>
<script>
$('div').on('click',()=>{
//$('div').css('width','200px').css('height','200px').css({backgroundColor:'black'})
$('div').removeClass().addClass('box2');
// css변경은 임의의 box2라는 클래스를 만들어 style태그에 선언 후 removeClass후 addClass로
// style선언한 box2 클래스로 변경시킨다.
})
</script>
</body>
</html>jQuery의 Event 종류
ex04jquery이벤트.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src="js/jquery-3.6.0.min.js"></script>
<script>
// 키보드를 눌렀을 때 이벤트 처리하는 방법
$('body').on('keydown',function(event){
console.log(event);
//keycode만 가지고오고 싶다면?
console.log(event.keyCode);
});
</script>
</body>
</html>ex05감중이의여행.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/moveImgStyle.css">
</head>
<body>
<div id="bg">
<img src="img/gam2.png">
<button class="btn left">LEFT</button>
<button class="btn right">RIGHT</button>
</div>
<script src="js/jquery-3.6.0.min.js"></script>
<script>
// 1. LEFT 버튼을 클릭했을 때 이벤트 처리하기
// $('.btn.left').on('click',()=>{
// // 2. 감중img를 가지고 와서 왼쪽으로 50px 움직이기
// $('img').css('position','absolute').css(
// 'right','50px');
// // left -> 내 웹페이지 기준 왼쪽에서 부터 몇 px 떨어질껀지를 의미한다.
// })
// 버튼 클릭시 그 방향으로 계속 이동
// 부드럽게 움직일 수 있게 하는 방법
// $('요소').animate({객체형태로 property}, 지속시간(ms))
let m = 0;
$('.btn.left').on('click', () => {
if (m <= 1100) {
$('img').css('position', 'absolute').animate({
'right': (m += 50) + 'px'
}, 100);
}
})
$('.right').on('click', () => {
if (m >= 0) {
$('img').animate({ 'right': (m -= 50) + 'px' }, 100);
}
});
// 키보드를 눌렀을때 처리하는 방식으로 변경 (숙제)
// < 누르면 왼쪽으로 / >누르면 오른쪽으로
// 키보드마다 keyCode -->를 활용
$('body').on('keydown', () => {
// 매개변수로 event(키보드 버튼에 따른 keyCode를 찾기위한 객체 / 변수명 의미없음) 객체를
// 넣고 키보드마다 keyCode를 알아본다
if (event.keyCode == 37) {
if (m <= 1100) {
$('img').css('position', 'absolute').animate({
'right': (m += 50) + 'px'
}, 100);
}
} else if (event.keyCode == 39) {
// 사용자가 오른쪽 화살표를 눌렀을때
if (m >= 0) {
$('img').animate({ 'right': (m -= 50) + 'px' }, 100);
}
}
});
</script>
</body>
</html>
조작메소드
ex06조작메소드.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>여기는 div1</div>
<script src="js/jquery-3.6.0.min.js"></script>
<script>
// 간단한 조작 메소드들
// 1. prepend(앞)
// --> 해당하는 태그의 컨텐츠를 기점으로 앞쪽에 붙는 함수
$('div').prepend('<div>여긴 div2~</div>');
// 2. append(뒤)
// --> 해당하는 태그의 컨텐츠를 기점으로 뒤쪽에 붙는 함수
$('div').append('<div>여긴 div3~</div>');
// 3. before(앞)
// --> 해당하는 태그의 바깥쪽 앞쪽에 붙는 함수
$('div').before('<div>여긴 div4~</div>');
// 4. after(뒤)
// --> 해당하는 태그의 바깥쪽 뒤쪽에 붙는 함수
$('div').after('<div>여긴 div5~</div>');
// 5. empty(비워버리기)
$('div1').empty();
// div1안의 내용들을 지운다 / div1 태그는 그대로
</script>
</body>
</html>
반응형
'빅데이터 서비스 교육 > Java Script' 카테고리의 다른 글
| Java Script AJAX (0) | 2022.05.31 |
|---|---|
| Java Script DOM (0) | 2022.05.26 |
| Java Script 배열, 함수, 객체 (0) | 2022.05.24 |
| Java 입출력문, 조건문, 반복문 (0) | 2022.05.23 |