728x90
jQuery
jQuery는 자바스크립트 언어를 간편하게 사용할 수 있도록 단순화시킨 오픈 소스 기반의 자바스크립트 라이브러리입니다. jQuery를 이용하면 문서 객체 모델(DOM)과 이벤트에 관한 처리를 손쉽게 구현할 수 있습니다. 또한, Ajax 응용 프로그램 및 플러그인도 jQuery를 활용하여 빠르게 개발할 수 있습니다.
jQuery 다운로드
Download jQuery | jQuery
link Downloading jQuery Compressed and uncompressed copies of jQuery files are available. The uncompressed file is best used during development or debugging; the compressed file saves bandwidth and improves performance in production. You can also download
jquery.com
jQuery 로드 방법
- jQuery.js 파일 로드
- CDN 로드
1. jQuery.js 파일 로드
<head>
<script src="/파일경로/제이쿼리파일명.js"></script>
</head>2. CDN 로드
<head>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<head/>실습
실습 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>GitHub
https://github.com/Qkrwnsgus0522/Web
GitHub - Qkrwnsgus0522/Web
Contribute to Qkrwnsgus0522/Web development by creating an account on GitHub.
github.com
728x90
