** 이번 강좌에서는 제이쿼리에서 $(window) 객체를 사용하는 방법을 알아보도록 하겠습니다.
- window객체가 갖고 있는 대표적인 이벤트인 resize와 scroll을 보도록 하겠습니다.
- 그리고 자바스크립트에는 없었지만, 제이쿼리에서 window객체를 위해 만든 메서드도 보도록 하겠습니다.
1. window객체
- window객체는 BOM객체입니다. BOM객체 중 최상위객체인 브라우저 전체 창을 의미합니다.
## JS에서의 window문법
window.속성명;
window.메서드명();
## jQuery에서의 window문법
$(window).메서드명();- 위에서 보다시피 제이쿼리는 $()안에다 쓴다는 점이 다릅니다.
- 하지만 자바스크립트에서 썼던 속성이나 메서드를 $(window) 에 쓰면 안됩니다.
- 제이쿼리에서 새롭게 만든 메서드를 붙일 때만 $()안에 쓴다고 보면 됩니다.
- 예를 들어 새창을 열라는 메서드는 open() 입니다. 자바스크립트에서 쓰는 메서드죠. 제이쿼리가 새롭게 open() 이라는 메서드를 만들지는 않았습니다. 그래서 자바스크립트 문법으로 써야 합니다.
//자바스크립트 메서드
window.open(); //맞는 코드
$(window).open(); //틀린 코드
//제이쿼리 메서드
window.resize(); //틀린 코드
$(window).resize(); //맞는 코드
** 자바스크립트의 window에 대한 자세한 공부가 더 필요한 분은 아래 주소를 클릭하세요.
https://ossam5.tistory.com/224
[JS강좌] 14강 BOM - window객체 - 오쌤의 니가스터디
** 영상으로 보고 싶은 분은 아래 주소를 클릭해주세요. https://youtu.be/fLgJWCBoibk * 객체의 큰 부분 종류 설명 기본내장객체 기본적인 객체들로 보통 컴퓨터 언어들은 갖고 있는 객체 BOM(Browser Object M
ossam5.tistory.com
2. $(window)의 메서드
- 사용될 메서드는 $(window) 객체 만을 위해 나온 메서드는 아닙니다. 문서객체에도 사용할 수 있는 메서드들입니다.
- 대신 다른 메서드와는 다르게 $(window) 객체에도 사용가능하다는 것입니다.
| 메서드 | 설명 |
| width() | 창의 가로폭을 반환하는 메서드, 미디어쿼리 수치와 다르게 나옵니다. |
| height() | 창의 높이를 반환하는 메서드 |
| scrollTop() | 창의 세로스크롤바 상단 좌표를 반환하는 메서드 |
| scrollLeft() | 창의 가로스크롤바 왼쪽 좌표를 반환하는 메서드 |
1) width()와 height() 메서드
## 코드 보기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>제이쿼리 - window객체</title>
<script src="jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function(){
//1. 수치를 담는 변수
var w = $(window).width();
var h = $(window).height();
//2. 수치를 텍스트로 처리
$('.w').html(w);
$('.h').html(h);
});
</script>
</head>
<body>
<h1>width수치 : <span class="w"></span></h1>
<h1>height수치 : <span class="h"></span></h1>
</body>
</html>- 창의 가로폭과 높이를 각각 w와 h라는 변수에 담았습니다.
- 그리고 <span> 태그에 각각 수치를 텍스트로 반환합니다.
- html() 메서드는 문서객체의 텍스트컨텐츠를 컨트롤하는 메서드입니다.
## 결과 보기
- 아직 resize이벤트를 넣은 것은 아니라서, 매번 새로고침해야 사이즈가 변경되는 것이 확인됩니다.
- 문서가 준비되자마자 창의 폭과 높이를 변수에 담기 때문입니다.
2) scrollTop()과 scrollLeft() 메서드
## 코드 보기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>제이쿼리 - window객체</title>
<style>
body{ width: 3000px; height: 3000px; }
h1:first-child{ position: fixed; left: 20px; top: 20px; }
h1:last-child{ position: fixed; left: 20px; top: 120px; }
</style>
<script src="jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function(){
//1. 수치를 담는 변수
var top = $(window).scrollTop();
var left = $(window).scrollLeft();
//2. 수치를 텍스트로 처리
$('.top').html(top);
$('.left').html(left);
});
</script>
</head>
<body>
<h1>scrollTop위치 : <span class="top"></span></h1>
<h1>scrollLeft위치 : <span class="left"></span></h1>
</body>
</html>- 가로세로 스크롤바를 처리하기 위해 CSS로 body에 가로폭과 높이를 3000px로 처리했습니다.
- 그리고 스크롤바 이동시 <h1> 태그가 가려서 안보일까봐 fixed 처리해뒀습니다.
## 결과 보기
- 처음엔 스크롤바 좌표값들이 다 상단과 좌측에 딱 붙어 있으므로 0이 나오는 것이 확인됩니다.
- 그러다 스크롤바를 이동하고 새로고침을 누르면 위치들이 변경되는 것이 확인됩니다.
3. $(window)의 이벤트
- window객체에 쓸 수 있는 이벤트가 자바스크립트보다 늘어난 것은 아닙니다. 사용되는 이벤트는 같습니다.
- 대신 JS에서는 고전이벤트나 addEventListenr() 메서드를 사용했으나, 제이쿼리는 이벤트타입자체가 메서드화가 되었다는 점이 다릅니다.
## 이벤트 사용법 - click이벤트예시
//자바스크립트
h1Tag.onclick = function(){ }
h1Tag.addEventListener('click', function(){});
//제이쿼리
$('h1').click(function(){ });
1) 자주 사용되는 window 이벤트 종류
| 이벤트 | 설명 |
| load | 창이 로드되면 이벤트가 발생 |
| resize | 창 사이즈를 변화시킬 때 이벤트가 발생 |
| scroll | 창의 스크롤바를 움직일 때 이벤트가 발생 |
- 위의 세개 이벤트를 제이쿼리에서는 많이 사용합니다.
- 특히 첫번째 이벤트는 준비구문으로 잘 사용됩니다.
## 제이쿼리 window 준비구문
$(window).load(function(){
});- 창을 다 읽고 나면 콜백함수의 명령을 실행하라는 구문입니다.
2) resize이벤트
- 이번에는 창사이즈가 변경될 때 실시간으로 창의 폭을 확인해보도록 하겠습니다.
## 코드 보기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>제이쿼리 - window객체</title>
<script src="jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function(){
//1. resize이벤트 실행
$(window).resize(function(){
//2. 수치를 담는 변수
var w = $(window).width();
var h = $(window).height();
//3. 수치를 텍스트로 처리
$('.w').html(w);
$('.h').html(h);
});
//4. 초기값 실행 안되므로 trigger발생
$(window).trigger('resize');
});
</script>
</head>
<body>
<h1>width수치 : <span class="w"></span></h1>
<h1>height수치 : <span class="h"></span></h1>
</body>
</html>- resize이벤트 안에 코드들을 담았기 때문에 변화될때마다 변수값이 바뀝니다.
- 그래서 처음에는 수치들이 안보이기 때문에 아래 trigger() 메서드를 사용했습니다.
- trigger() 메서드는 이벤트를 강제발생시키는 메서드인데 문서를 시작하자마자 이벤트 코드를 강제 발생시켜 resize이벤트를 실행하지 않아도 수치가 보이게 됩니다.
## 결과 보기
- 이번에는 창사이즈 변화할 때 실시간으로 수치가 달라지는 것을 확인할 수 있습니다.
3) scroll이벤트
- 이번에는 창사이즈가 변경될 때 실시간으로 창의 폭을 확인해보도록 하겠습니다.
## 코드 보기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>제이쿼리 - window객체</title>
<style>
body{ width: 3000px; height: 3000px; }
h1:first-child{ position: fixed; left: 20px; top: 20px; }
h1:last-child{ position: fixed; left: 20px; top: 120px; }
</style>
<script src="jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function(){
//1. 스크롤 이벤트 발생
$(window).scroll(function(){
//2. 수치를 담는 변수
var top = $(window).scrollTop();
var left = $(window).scrollLeft();
//3. 수치를 텍스트로 처리
$('.top').html(top);
$('.left').html(left);
});
//4. 초기에 스크롤이벤트 강제발생
$(window).trigger('scroll');
});
</script>
</head>
<body>
<h1>scrollTop위치 : <span class="top"></span></h1>
<h1>scrollLeft위치 : <span class="left"></span></h1>
</body>
</html>- scroll이벤트 안에 코드들을 담았기 때문에 스크롤바를 움직일 때마다 변수값이 바뀝니다.
## 결과 보기
- 스크롤바 이동시 실시간으로 위치의 수치값이 변경되는 것이 확인됩니다.
'웹언어 > jQuery' 카테고리의 다른 글
| [jQuery강좌] 15강 폼관련 change와 submit이벤트 (0) | 2022.08.29 |
|---|---|
| [jQuery강좌] 13강 animate()메서드 - 오쌤의 니가스터디 (0) | 2022.08.24 |
| [jQuery강좌] 12강 시각효과메서드 - 오쌤의 니가스터디 (0) | 2022.08.22 |
| [jQuery강좌] 11강 제이쿼리 이벤트 관련 메서드 - 오쌤의 니가스터디 (0) | 2022.08.10 |
| [jQuery강좌] 10강 문서객체 영역 메서드 - 오쌤의 니가스터디 (0) | 2022.08.10 |
