Web/Javascript
[Javascript] jQuery 라이브러리
웹코린이
2023. 6. 29. 15:23
728x90
jQuery
HTML 문서를 다루고 상호 작용을 쉽게 구현하기 위한 자바스크립트 라이브러리
jQuery는 자바스크립트 코드를 간소화하고, 브라우저 간의 호환성 문제를 해결하며, 다양한 웹 개발 작업을 단순화하기 위해 만들어진 오픈 소스 라이브러리임
jQuery 사용 방법 (CDN)
jQuery CDN
jQuery CDN – Latest Stable Versions jQuery Core Showing the latest stable release in each major branch. See all versions of jQuery Core. jQuery 3.x jQuery 2.x jQuery 1.x jQuery Migrate jQuery UI Showing the latest stable release for the current and legac
releases.jquery.com
jQuery Core 3.7.0 의 minified 클릭 후 코드 복사하여 사용할 html 문서에 붙혀넣어 사용
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
실습 1 : 선택자로 스타일 적용
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
div, ul, li {
margin: 5px;
}
</style>
<script src="https://code.jquery.com/jquery-3.7.0.min.js" integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#header').css("border", "1px solid black");
$('ul > li').css("border", "3px solid green");
$('div.gnb').css("border", "3px solid pink");
$('li[class="test"]').css("background", "lightblue");
});
</script>
</head>
<body>
<div id="header">
<div id="Logo">로고</div>
<div>공지사항</div>
</div>
<div class="gnb">
<ul>
<li>메뉴 01
<ul>
<li class="test">하위 메뉴 01</li>
<li>하위 메뉴 02</li>
</ul>
</li>
<li>메뉴 02</li>
<li>메뉴 03</li>
<li>메뉴 04</li>
</ul>
</div>
<div id="footer">푸터</div>
</body>
</html>
실습2 : ready() 함수
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-3.7.0.min.js" integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous"></script>
<script type="text/javascript">
$(document).ready(function(){
var datas = ['사과', '바나나', '키위'];
// 향상된 each 메서드
$.each(datas, function(index, value) {
console.log(index + '번 인덱스: ' + value);
});
var obj = {name: '홍길동', score: 85};
$.each(obj, function(key, value) {
console.log(key + ' 속성의 값= ' + value);
});
});
</script>
</head>
<body>
</body>
</html>
실습 3 : 갤러리 프로젝트
/
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>갤러리 프로젝트</title>
<style type="text/css">
#wrap {
width: 160px;
}
#wrap .page {
text-align: right;
margin: 5px;
}
#wrap .photo {
border: 2px solid black;
width: 160px;
height: 160px;
overflow: hidden;
}
</style>
<script src="https://code.jquery.com/jquery-3.7.0.min.js" integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous"></script>
<script type="text/javascript">
$(document).ready(function() {
var total = $('.photo > div').length;
var num = 1;
$('.pageInfo > span:first').text(num);
$('.pageInfo > span:last').text(total);
$('.btn1').click(function() {
num--;
$('.photo div:last').insertBefore('.photo div:first');
if (num < 1) {
num = total;
}
$('.pageInfo > span:first').text(num);
});
$('.btn2').click(function() {
num++;
$('.photo div:first').insertAfter('.photo div:last');
if (num > total) {
num = 1;
}
$('.pageInfo > span:first').text(num);
});
});
</script>
</head>
<body>
<div id="wrap">
<div class="page">
<button class="btn1"> < </button>
<span class="pageInfo"> <span></span> / <span></span> </span>
<button class="btn2"> > </button>
</div>
<div class="photo">
<div><img alt="이미지01" src="images/Galio.png"></div>
<div><img alt="이미지02" src="images/Gangplank.png"></div>
<div><img alt="이미지03" src="images/Garen.png"></div>
</div>
</div>
</body>
</html>
실습 4 : 마우스 이벤트
mouseover
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>마우스 이벤트</title>
<style type="text/css">
.box {
background-color: lightgray;
padding: 10px;
}
</style>
<script src="https://code.jquery.com/jquery-3.7.0.min.js" integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.box').mouseover(function() {
$('.result').append('<p>마우스오버이벤트발생!</p>');
});
});
</script>
</head>
<body>
<div class="box">mouseover</div>
<hr>
<div class="result"></div>
</body>
</html>
실습 5 : 키보드 이벤트
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>키보드 이벤트</title>
<style type="text/css">
.box {
background-color: lightgray;
padding: 10px;
}
</style>
<script src="https://code.jquery.com/jquery-3.7.0.min.js" integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous"></script>
<script type="text/javascript">
$(document).ready(function() {
$('textarea').keydown(function() {
$('.result').text($(this).val());
});
});
</script>
</head>
<body>
<textarea rows="5" cols="5"></textarea>
<hr>
<div class="result"></div>
</body>
</html>
실습 6 : 버튼 이벤트
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>실습</title>
<style type="text/css">
#box {
width: 200px;
height: 200px;
background-color: lightseagreen;
}
.test {
display: none;
}
</style>
<script src="https://code.jquery.com/jquery-3.7.0.min.js" integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous"></script>
<script type="text/javascript">
$(document).ready(function() {
/*
$('#wrap button:eq(0)').click(function() {
$('#wrap .box').addClass("test");
});
$('#wrap button:eq(1)').click(function() {
$('#wrap .box').removeClass();
});
$('#wrap button:eq(2)').click(function() {
if ($('#wrap .box').attr("class") == 'test') {
$('#wrap .box').removeClass();
}
else {
$('#wrap .box').addClass("test");
}
});
*/
$('#wrap button:eq(0)').click(function() {
$('#wrap .box').hide();
});
$('#wrap button:eq(1)').click(function() {
$('#wrap .box').show();
});
$('#wrap button:eq(2)').click(function() {
$('#wrap .box').toggle();
});
});
</script>
</head>
<body>
<div id="wrap">
<button>버튼1</button>
<button>버튼2</button>
<button>버튼3</button>
<hr>
<div class="box"></div>
</div>
</body>
</html>728x90