티스토리 뷰
[ 1. 클래스 메소드 ] (***)
<!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="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-migrate/3.4.0/jquery-migrate.min.js"></script>
<style>
.aqua{
background-color: #0ff;
}
.red{
background-color: red;
}
.green{
background-color: #0f0;
}
.yellow{
background-color: #ff0;
}
/* 클래스 속성은 재사용이 가능하기때문에 중요하다. */
</style>
<script>
$(function(){
console.clear();
// Selector이 선택한 요소에 글로벌 속성인 class = "aqua" 추가
$("#p1").addClass("aqua");
// Selector이 선택한 요소에서 글로벌 속성인 class = "red" 삭제
$("#p2").removeClass("red");
// + 클래스는 하나의 속성값만 가지는 것이 아니라 class = "v1 v2 v3"와 같이 다수의 속성값을 가질 수 있다. (*)
// + 그렇기에 removeClass는 클래스를 삭제하는 것이 아니라 해당 속성값을 삭제하는 것이다. (***)
// Selector이 선택한 요소에서 글로벌 속성인 class = "green"을 추가/삭제 토굴
$("#p3").toggleClass("green");
$("#p4").toggleClass("green");
// + toggleClass는 해당 속성(이 경우 class = "green")이 없으면 추가해주고, 있으면 삭제해준다. ( 실해할때마다 다른 결과가 나온다. ) (*)
// Selector이 선택한 요소의 컨텐츠를 인자값으로 변경
$("#p6").text( $("#p5").hasClass("yellow") );
// p5아이디를 가지고 있는 태그가 클래스 속성으로 yellow값을 가지고 있는지 텍스트로 출력해 준다.
}) // .jq
</script>
</head>
<body>
<p id="p1">내용2</p>
<p id="p2" class="red">내용2</p>
<p id="p3">내용3</p>
<p id="p4" class="green">내용4</p>
<p id="p5" class="yellow">내용5</p>
<p id="p6"></p>
</body>
</html>[ 2. prop 메소드 ]
<!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="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-migrate/3.4.0/jquery-migrate.min.js"></script>
<script>
$(function(){
console.clear();
// val() 메소드는 입력양식의 사용자 입력값을 반환한다.
let result1 = $("#user_name").val();
console.log(result1);
// val(인자) 메소드는 입력양식에 인자값을 넣어준다.
$("#user_id").val("javascript");
// 선택자가 선택한 요소(태그)의 속성(속성 노드가 아니다.) 중 이름이 "defaultValue"인 속성값을 반환한다.
// prop는 선택자가 선택한 객체의 필드의 값을 추출한다. ( 속성과는 다르다. )
let result2 = $("#user_id").prop("defaultValue");
console.log(result2);
// defaultValue 속성값으로
}) // .jq
</script>
</head>
<body>
<h1>객체 조작 및 생성</h1>
<form action="#" id="form1">
<p>
<label for="user_name">이름</label>
<input type="text" name="user_name" id="user_name" value="용대리">
</p>
<p>
<label for="user_id">아이디</label>
<input type="text" name="user_id" id="user_id" value="hello">
</p>
<!-- 라벨 테그를 통해서 input:text를 만드는 것이 좋다. -->
</form>
</body>
</html>[ 3. 수치조작 메소드 ]
<!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="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-migrate/3.4.0/jquery-migrate.min.js"></script>
<style>
*{
padding: 0;
}
#p1, #p2 {
width: 100px;
height: 50px;
padding: 20px;
border: 5px solid black;
background-color: yellow;
/* background는 여백까지 색칠해준다. */
}
</style>
<script>
$(function(){
console.clear();
// 박스모델의 컨텐츠 영역의 높이 반환
let w1 = $("#p1").height();
console.log(w1);
// 박스모델의 컨텐츠 영역 + 안쪽 여백(패딩)의 높이 반환
let w2 = $("#p1").innerHeight();
console.log(w2);
// 박스모델의 컨텐츠 + 안쪽여백(padding) + 경계선(border)까지 포함한 높이값 반환
let w3 = $("#p1").outerHeight();
console.log(w3);
// 박스모델의 컨텐츠 + 안쪽여백(padding) + 경계선(border)까지 포함한 너비와 높이값 설정
$("#p2").outerWidth(100).outerHeight(100);
// 마치 border박스 기준으로 설정하는 것처럼 된다.
}) // .jq
</script>
</head>
<body>
<h1>수치 조작 메소드</h1>
<p id="p1">내용1</p>
<p id="p2">내용2</p>
</body>
</html>[ 4. 객체 편집 메소드 ] (***)
<!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="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-migrate/3.4.0/jquery-migrate.min.js"></script>
<style>
*{
margin: 0;
padding: 0;
}
#box_wrap{
width: 300px;
height: 200px;
margin: 50px auto 0;
position: relative;
background-color: #ccc;
}
.box{
width: 50px;
height: 50px;
position: absolute;
top: 50px;
left: 100px;
/* absolute는 부모요소 중 relative인 요소를 기준으로 위치를 잡는다. ( 없으면 body태그를 기준으로 한다. ) */
background-color: red;
}
</style>
<script>
// 제이쿼리 메소드를 이용해서, 선택한 요소의 위치값을 얻어보자!
$(function(){
console.clear();
// init객체 생성
let $txt1 = $(".txt_1 span");
let $txt2 = $(".txt_2 span");
let $box = $(".box");
// 지금의 핵심 : offset(), position() 메소드 ( 서로 기준점이 다르다. ) (***)
var off_t = $box.offset().top; // 100
var pos_t = $box.position().top; // 50
// position() 메소드는 상대위치로 기준점이 되었던 relative요소를 기준으로 위치값을 반환한다.
// offset() 메소드는 절대위치로 뷰포트를 기준으로 위치를 반환한다.
// span태그에 텍스트로 값을 넣어주었다.
$txt1.text(off_t);
$txt2.text(pos_t);
}) // .jq
</script>
</head>
<body>
<div id="box_wrap">
<p class="box">박스</p>
</div>
<p class="txt_1">절대 top위칫값 : <span></span></p>
<p class="txt_2">상대 top위칫값 : <span></span></p>
</body>
</html>[ 5. 위치 메소드 ] (****)
<!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="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-migrate/3.4.0/jquery-migrate.min.js"></script>
<style>
*{
margin: 0;
padding: 0;
}
body{
line-height: 1;
}
#wrap{
height: 5000px;
padding-top: 2000px;
}
</style>
<script>
$(function(){
console.clear();
// 뷰포트를 기준으로 h1 태그의 위치값 반환
let topNum = $("h1").offset().top;
console.log(`topNum : ${topNum}`);
// 최상위 객체인 window 객체의 메소드인 scrollTop(스크롤위치값)으로 수직 스크롤바의 위치를 조절(***)
$(window).scrollTop(topNum);
// + 수직스크롤의 위치를 h1의 위치로 이동시킨다.
// 현재 수직 스크롤바의 위치값 획득
let sct = $(window).scrollTop();
console.log(sct);
}) // .jq
</script>
</head>
<body>
<div id="wrap">
<h1>위치 메소드</h1>
</div>
</body>
</html>[ 6. 조별과제 - 스크롤바 자동으로 내리기 ] (**)
<!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="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-migrate/3.4.0/jquery-migrate.min.js"></script>
<style>
body{
height: 3000px;
/* 높이를 3000px로 정했어도, 노트북 사양에 따라서 제한될 수 있다. ( 본인의 경우 2047이 최대이다. ) */
background-image: linear-gradient(45deg, red, yellow, blue);
}
</style>
<script>
// $(function(){
// console.clear();
// let hi = 0; // 시작 높이 지정
// setInterval(function(){
// $(window).scrollTop(hi); // 해당 위치로 이동
// hi += 10;
// if( hi == 3000 ){
// hi = 0;
// } // if - 마지막까지 갔으면, 다시 위로 올라간다.
// }, 10);
// }); // .jq 1
// ===============================================================
// console.debug(`window.innerHeight : ${window.innerHeight}`);
// const interval1 = setInterval(() => {
// window.scrollBy(0, 10);
// console.debug(`current scroll pos : ${window.scrollY}`);
// window.scrollY는 스크롤된 길이, window.innerHeight는 주소창을 제외한 뷰포트의 높이를 의미한다.(**)
// if( (window.scrollY + window.innerHeight) >= document.body.offsetHeight ) {
// console.log(`scroll finished.`);
// clearInterval(interval1);
// } // if
// }); // interval1
// ===============================================================
// 선생님의 코드 1
// ===============================================================
// const px = 1;
// const interval = 50;
// const maxHeight = 3000;
// // 1. 지정된 시간주기에 따라서, 수직스크롤바를 움직일 이동 픽셀 수를 호출함수의 인자로 전달
// const intervalId = setInterval(scrollTop_T, interval, px);
// // 2. 웹 브라우저 윈도의 스크롤바의 위치에 이동할때 발생하는 이벤트인 scroll에 이벤트 핸들러로 익명함수 설정
// $(window).scroll(() => {
// console.debug(`>>>> current position : ${window.scrollY}`);
// // 화면끝에 도착했는지를 판단하는 방법 (***)
// if($(window).innerHeight() + $(window).scrollTop() > $("body").height() ){
// clearInterval(intervalId);
// console.debug(`>>>>>> setInterval Released.`);
// } // if
// }) // 제이쿼리의 이벤트 설정 방법
// // 3. window 내장객체의 scrollBy(x,y) 메소드로 인자값만큼의 픽셀수로 수직 스크롤을 증분이동시킨다.
// function scrollTop_T(pixels){
// window.scrollBy(0, pixels);
// } // scrollTop_T
// ===============================================================
// $(function(){
// console.clear();
// setInterval(function(){
// window.scrollBy(0, 10); // 호출될때마다 10씩 이동하게 된다. (***)
// }, 100);
// // scrollBy는 현재 좌표를 기준으로 전달된 좌표(x,y)만큼 이동한다. (***)
// if( (window.scrollY + window.innerHeight) >= document.body.offsetHeight ){
// console.log(`scroll finished.`);
// clearInterval(setInterval);
// } // if
// }); //.jq 2
// ===============================================================
// window.onscroll = function(){
// console.debug(`현재 위치 : ${window.scrollY}`);
// } // onscroll - 스크롤이 움직일때마다 현재 위치를 반환한다.
// ===============================================================
// animate를 통해서 수직 스크롤이 3000px까지 이동하게 할 수 있다. ( 듀레이션 시간을 3000으로 지정하였다. )
// $('html,body').animate({ scrollTop: "3000px" }, 3000); // .jq3
// ===============================================================
// 선생님의 코드 2
// ===============================================================
const px = 10; // 매 주기마다 스크롤바를 이동시킬 픽셀수
const interval = 10; // (간격)주기 설정(milliseconds)
const maxHeight = 3000; // 브라우저 viewport 의 최대 높이 설정
// 1. 지정된 시간주기에 따라, 수직스크롤바를 움직일 이동픽셀수를 호출함수의 인자로 전달
const intervalId = setInterval(scrollTop, interval, px)
// 2. 웹브라우저 윈도의 스크롤바의 위치에 이동할 때 발생하는 이벤트인,
// onscroll에 Event Handler 로 익명함수 설정:
// 1st. window 내장객체의 onscroll 이벤트 속성에 이벤트 핸들러 설정 (***)
// window.onscroll = function () { // 1st. method
// ...
// };
// 2nd. window 내장객체의 이벤트 설정 메소드인 addEventListener 이용하여 이벤트 핸들러 설정
// window.addEventListener('scroll', function () { // 2nd. method (***)
// ...
// };
// 3rd. 제이쿼리의 이벤트 설정 메소드 이용 방법
$(window).scroll(() => { // 3rd. method (***)
console.debug(`>> current position: ${window.scrollY}`)
//----- How to detect the end of scroll bar in the web browsers. (*******)
if($(window).innerHeight() + $(window).scrollTop() > $("body").height()) { // 1. 제이쿼리 메소드 이용
// if(window.innerHeight + window.scrollY > document.body.scrollHeight) { // 2. 자바스크립트 내장객체 속성이용
clearInterval(intervalId); // setInterval 자원해제
console.debug('>>> setInterval released.')
} // if
});
// 3. window 내장객체의 scrollBy(x,y) 메소드로, 인자값만큼의 픽셀수로 수직스크롤 증분이동시킴
function scrollTop(pixels) {
window.scrollBy(0, pixels) // 수직스크롤 증분이동
} // scrollTop
</script>
</head>
<body>
</body>
</html>[ 7. 조별과제 2 - 프로그래스 바 생성 ] (****)
<!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="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-migrate/3.4.0/jquery-migrate.min.js"></script>
<style>
body{
height: 3000px;
background-image: linear-gradient(45deg, red, yellow, blue);
}
#scroll{
position: fixed;
top: 50px;
left: 5%;
width: 1700px;
height: 20px;
align-items: center;
}
</style>
<script>
$( function(){
console.clear();
console.debug(`window.innerHeight : ${window.innerHeight}`);
let pg = 0;
window.onscroll = function(){
console.log(`현재 위치 : ${window.scrollY}`);
pg = window.scrollY;
$('#scroll').attr({value : pg });
}; // onscroll - 스크롤 위치에 따라서 프로그래스 바가 달라지게 설정 ( 자동으로 움직이는 것 외에도 바가 변하도록 )
// scroll에 max 속성 추가
$("#scroll").attr({ max : document.body.offsetHeight - window.innerHeight });
const interval = setInterval(() => {
window.scrollBy(0,10);
// x로 0, y로 10만큼 이동한다.
pg += 10;
$('#scroll').attr({value : pg });
if( (window.scrollY + window.innerHeight) >= document.body.offsetHeight ) {
clearInterval(interval);
} // if
}, 10);
}); // .jq
</script>
</head>
<body>
<progress id="scroll" value="0" max="3000"></progress>
</body>
</html>
728x90
'KH 정보교육원 [ Java ]' 카테고리의 다른 글
| KH 73일차 - 제이쿼리 ( 이벤트 메소드 ) (***) (0) | 2022.06.13 |
|---|---|
| KH 72일차 - 제이쿼리 ( 객체 편집 메소드 ) (****) (0) | 2022.06.10 |
| KH 70일차 - 제이쿼리 ( 선택자 / 메소드 ) (*****) (0) | 2022.06.08 |
| KH 69일차 - 제이쿼리 ( jQuery ) 선택자 (***) (0) | 2022.06.07 |
| KH 68일차 - 문서 객체 모델 (**) / 제이쿼리 시작 (0) | 2022.06.03 |
댓글