클래스명추가 (.on 클래스 추가 / 좌표값 구하기)
.on 클래스 추가하여 이벤트 설정하기
<!DOCTYPE html>
<html lang="ko">
<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>클래스명추가</title>
<style>
* {margin:0; padding:0; box-sizing:border-box;}
ul { /*자식 요소에 width 값이 없어 자식들이 한줄정렬 될 수 없음*/
/*display:flex; justify-content:space-between; align-items:center; *//*절대 줄바꿈이 되지 않아 flex 사용 불가능함*/
width:950px; margin:50px auto;
}
ul li {
float:left; list-style:none;
width:295px; height:420px; margin:10px; /* margin으로 띄우기 전에는 딱 붙어서 나오기 때문에 여백을 준다.*/
/*(ul width 950 / 3 ) - margin(좌우합쳐) 20 = 295*/
background:#F2F2F2;
}
.clear {clear:both;}
#box {width:295px; height:420px; margin:5px auto; background:#F2F2F2;}
li.on, #box.on { /*.on을 먼저 구현한다.*/ background:#FC0;} /*개발자 모드에서 class가 들어갔는지 정확하게 확인해야함*/
</style>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
$(function() {
$('li').eq(0).on('click', function() {
$('li').removeClass('on');
$('#box').addClass('on');
});
$('#box').on('click', function() {
$('li').removeClass('on');
$('#box').removeClass('on');
$('li').eq(1).addClass('on');
});
$('li').eq(1).on('click', function() {
$('li').removeClass('on');
$('#box').addClass('on');
// $('li').eq(2).addClass('on');
});
});
</head>
<body>
<ul>
<li class="on"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<div class="clear"></div>
<div id="box"></div>
</body>
</html>좌표값을 이용해서 배경 바꾸기
- mousemove 이벤트
<!DOCTYPE html>
<html lang="ko">
<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>클래스명추가</title>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
$(window).on('mousemove', function(event) { // 좌표값을 이용해서 background 이미지를 바꿔줄 수 있다!
var mx = event.pageX; // 마우스 커서의 X값을 얻어온다.
var mY = event.pageY; // 마우스 커서의 Y값을 얻어온다.
console.log('마우스 커서 X 값',mx,'마우스 커서 Y 값',mY);
if(mx >= 0 && mx < 600){
if(mY >= 0 && mY < 600 ){
// 브라우저의 600,600 범위 안에 들어갔을때
$('body').css('background','pink');
}
}else {
$('body').css('background','gray');
}
});
});
</script>
</head>
<body>
</body>
</html>-> 배경 이미지 뿐만 아니라 on 클래스를 추가해서 이벤트도 넣을 수 있다.
'국비지원 JAVA 풀스택 과정 > Jquery' 카테고리의 다른 글
| 글자 및 태그 조작 메서드 (0) | 2022.10.27 |
|---|---|
| 배열 관련 메서드 (0) | 2022.10.27 |
| 위치 탐색 선택자 (0) | 2022.10.27 |
| 속성 선택자 (0) | 2022.10.27 |
| 형제 요소 선택자 (0) | 2022.10.27 |