[JavaScript] - [jQuery] 기초, 입문자 1
[jQuery] 기초, 입문자 1
jQuery - JS 코드양을 줄일 수 있는 방법 - 라이브러리 - 요즘은 jQuery 보다 react를 더 많이 씀 - 근데 jQuery로 개발된 사이트가 엄청 많음 ^ ^ - 문법이 간결하다 - 사용하기 쉽다 - 빠르게 배울 수 있다 -
hyonyong.tistory.com
css, removeAttr, attributing
<!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="https://code.jquery.com/jquery-3.6.4.min.js"
integrity="sha256-oP6HI9z1XaZNBrJURtCoUT5SUnxFr8s3BzRl+cbzUq8=" crossorigin="anonymous"></script>
<div class="parent">
<ul class="children_list">
<li>1 첫번</li>
<li>2 둘</li>
<li>3 삼</li>
</ul>
</div>
<script>
// 1
$('.children_list li').eq(1).css({
color : 'red'
})
$('.children_list li').eq(1).removeAttr('style'); // 속성 제거
// 2
$('.children_list li').eq(1).attr('style', 'color:pink'); // 속성 지정
console.log($('.children_list li').eq(1).attr('style')); // 속성 가져오기 --> color:pink
</script>
</body>
</html>
each
<!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="https://code.jquery.com/jquery-3.6.4.min.js"
integrity="sha256-oP6HI9z1XaZNBrJURtCoUT5SUnxFr8s3BzRl+cbzUq8=" crossorigin="anonymous"></script>
<div class="parent">
<ul class="children_list">
<li>1 첫번</li>
<li>2 둘</li>
<li>3 삼</li>
</ul>
</div>
<script>
// forEach 같은 반복문
$('.children_list li').each(function(index, list) {
console.log(index, list)
})
</script>
</body>
</html>
width, height, outerWidth, outerHeight
<!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="https://code.jquery.com/jquery-3.6.4.min.js"
integrity="sha256-oP6HI9z1XaZNBrJURtCoUT5SUnxFr8s3BzRl+cbzUq8=" crossorigin="anonymous"></script>
<div class="parent">
<ul class="children_list">
<li>1 첫번</li>
<li>2 둘</li>
<li>3 삼</li>
</ul>
</div>
<script>
// 앨리먼트 여백을 제외(패딩 제외)한 넓이 값
console.log($('.children_list li').width());
// 여백을 포함한 넓이 값 (패딩 포함)
console.log($('.children_list li').outerWidth());
// 여백 제외 높이
console.log($('.children_list li').height());
// 여백 포함 높이
console.log($('.children_list li').outerHeight());
</script>
</body>
</html>
offset, position
<!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>
.parent {
position: relative;
margin: 50px;
background-color: antiquewhite;
}
li {
border-bottom: 1px solid #999;
list-style: none;
background-color: pink;
padding: 10px;
margin: 10px;
}
</style>
</head>
<body>
<script src="https://code.jquery.com/jquery-3.6.4.min.js"
integrity="sha256-oP6HI9z1XaZNBrJURtCoUT5SUnxFr8s3BzRl+cbzUq8=" crossorigin="anonymous"></script>
<div class="parent">
<ul class="children_list">
<li>1 첫번</li>
<li>2 둘</li>
<li>3 삼</li>
</ul>
</div>
<script>
// offset - left top 좌표
console.log($('.children_list li').offset());
console.log($('.children_list li').offset().top);
// position - 부모 기준으로 left top 좌표
console.log($('.children_list li').position());
console.log($('.children_list li').position().top);
</script>
</body>
</html>
text
<!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="https://code.jquery.com/jquery-3.6.4.min.js"
integrity="sha256-oP6HI9z1XaZNBrJURtCoUT5SUnxFr8s3BzRl+cbzUq8=" crossorigin="anonymous"></script>
<div class="parent">
<ul class="children_list">
<li>1 첫번</li>
<li>2 둘</li>
<li>3 삼</li>
</ul>
</div>
<script>
// text 내용을 변경하거나 가져올 때 사용
$('.children_list li').text('텍스트 바꾸기');
$('.children_list li').eq(1).text('two');
</script>
</body>
</html>
fade, fadeOut, hide, show, animate
<!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="https://code.jquery.com/jquery-3.6.4.min.js"
integrity="sha256-oP6HI9z1XaZNBrJURtCoUT5SUnxFr8s3BzRl+cbzUq8=" crossorigin="anonymous"></script>
<div class="parent">
<ul class="children_list">
<li>1 첫번</li>
<li>2 둘</li>
<li>3 삼</li>
</ul>
</div>
<script>
// 요소의 사라짐
$('.children_list li').eq(1).fadeOut(500);
// 요소의 등장
$('.children_list li').eq(2).fadeIn(500);
// 사라졌다가 등장 1
$('.children_list li').eq(1).hide(500);
$('.children_list li').eq(1).show(500);
// 사라졌다가 등장 2
$('.children_list li').eq(1).slideUp(500);
$('.children_list li').eq(1).slideDown(500);
// 애니매이션 설정
// 속도 지정, 콜백 함수 사용 가능
$('.children_list li').eq(1).animate({
height : '300px',
}, 1000, function() {
console.log('call back');
$('.children_list li').eq(0).text('콜백 실행');
});
</script>
</body>
</html>
scrollLeft, scrollTop, event
<!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>
.parent {
background-color: pink;
height: 5000px;
}
</style>
</head>
<body>
<script src="https://code.jquery.com/jquery-3.6.4.min.js"
integrity="sha256-oP6HI9z1XaZNBrJURtCoUT5SUnxFr8s3BzRl+cbzUq8=" crossorigin="anonymous"></script>
<div class="parent">
<ul class="children_list">
<li>1 첫번</li>
<li>2 둘</li>
<li>3 삼</li>
</ul>
</div>
<script>
// 스크롤의 가로 위치
console.log($('html').scrollLeft()); // 0
// 스크롤의 세로 위치
console.log($('html').scrollTop()); // 0
// 스트롤 이벤트 추가
$(window).scroll(function() {
console.log('scroll event');
})
$(window).resize(function() {
console.log('resize event');
})
// on으로도 추가 가능
$(window).on('scroll',function() {
console.log('scroll event');
})
$(window).on('resize',function() {
console.log('resize event');
})
// click 이벤트
$('.children_list li').on('click',function() {
console.log('클릭', $(this).text());
})
// 이벤트 제거
$('.children_list li').off();
</script>
</body>
</html>
'JavaScript' 카테고리의 다른 글
| [JavaScript] 스크롤에 따라 svg path 그리는 방법 (0) | 2023.04.14 |
|---|---|
| [JavaScript] JS 애니메이션 라이브러리 5가지 (Typelt, ScrollOut, Anime.js, Rellax, GreenSock) (0) | 2023.04.14 |
| [jQuery] 기초, 입문자 1 (0) | 2023.04.12 |
| [JavaScript] Drag&Drop, mouse wheel (0) | 2023.04.05 |
| [JavaScript] 구조분해할당 (0) | 2023.03.14 |
