JavaScript/개념정리
JavaScript 04 <jQuery>
Itchild
2024. 4. 23. 13:28
728x90
반응형
JS 라이브러리 중 jQuery에 대해 알아보자 !
jQuery 는 CDN 연결이 필요한데
여기서 CDN 이란?
라이브러리를 가져와 사용할 때는 로컬에 다운로드하거나 웹의 주소를 입력하며 됩니다.
여기서 웹 주소를 입력하는 것이 cdn입니다.
cdn은 content delivery nerwork의 약자로
웹사이트의 접속자가 콘텐츠를 다운로드할 때 자동으로 가장 가까운 서버에서 다운로드할 수 있도록 하는 기술입니다.
cdn을 사용하면 빠르게 제이쿼리를 로드할 수 있습니다.
스크립트형식에 src 소스붙여서 url을 입력하면 된다.
$( ) 괄호 안의 제이쿼리 인자에 css 태그 선택자의 이름을 집어넣으면 된다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
div,ul,li {
margin: 5px;
}
</style>
cnd 연결 jQuery
<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");
'header'의 표가 검은색 실선으로 선굵기가1px
$('ul > li').css("border","3px solid green");
'li'들의 표가 초록색 실선으로 선굵기가 3px
$('div.gnb').css("border","3px solid pink");
li들의 전체 'gnb'가 분홍색 선굵기가 3px
$('li[class="test"]').css("background","lightblue");
list중 'test'라는 이름을 가진애는 배경색을, 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번째는 속성 name과 score를 불러와 출력 해준다.
name 속성의 값 = 홍길동
score 속성의 값 = 85
제이쿼리를 이용해 갤러리처럼 사진 넘기기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>갤러리 프로젝트</title>
==========================================================================
순서 2. 스타일 적용
<style type="text/css">
#wrap { 전체
width: 700px;
}
#wrap .page { 페이지
text-align: right;
margin: 5px;
}
#wrap .photo { 이미지
border: 2px solid black; 선굵기 2px의 실선의 표
width: 450px; 넓이 450
height: 400px; 높이 400
overflow: hidden; 넘치는 부분은 짤려서 보여지지 않게 해준다.
}
</style>
==========================================================================
순서 3. 자바 스크립트 (제이쿼리)
<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; 이미지의 개수 크기 만큼 ( 3 )
var num = 1;
$('.pageInfo > span:first').text(num); 첫번째 <span> 태그엔 1부터 넣어주고
$('.pageInfo > span:last').text(total); 마지막 <span> 태그엔 크기만큼 넣어줘 (3)
$('.btn1').click(function(){ 버튼 1번을 클릭하면
num--; 숫자가 빠지게 해줘
$('.photo div:last').insertBefore('.photo div:first'); 첫번째 사진의 앞에 마지막이오게
- insertBefore(): 요소 삽입할 곳 앞에 추가
if(num<1){ 1보다 작아지면
num=total; 숫자를 마지막 숫자로 바꿔줘
}
$('.pageInfo > span:first').text(num); 1보다 작아질 시 마지막 숫자 넣기
});
$('.btn2').click(function(){ 버튼 2번을 누르면
num++; 숫자가 증가하게 해줘
$('.photo div:first').insertAfter('.photo div:last'); 마지막사진의 뒤에 첫번째사진이오게
if(num>total){ 마지막 숫자보다 넘어가게 되면
num=1; 숫자를 다시 1로 바꿔줘
}
$('.pageInfo > span:first').text(num); 전체 보다 커질 시 1 넣기
});
});
</script>
</head>
<body>
==========================================================================
순서 1. 틀을 먼저 잡아준다.
<div id="wrap"> 'wrap'으로 감싸주기
<div class="page"> 페이지 / 포토
<span class="pageInfo"> <span></span> / <span></span> </span>
페이지정보를 ㅇ/ㅇ로 나누어 현재페이지 / 전체페이지로 만들예정
<button class="btn1"> < </button> 왼쪽 꺽새
<button class="btn2"> > </button> 오른쪽 꺽새
</div>
<div class="photo"> 포토 / 페이지 로 나뉨
<div><img alt="이미지 01" src="images/보노보노.jpg"></div> 첫번째 이미지
<div><img alt="이미지 02" src="images/짱구.jpg"></div> 두번째
<div><img alt="이미지 03" src="images/짱구2.jpg"></div> 세번째
</div>
</div>
==========================================================================
</body>
</html>마우스 이벤트를 사용해보자
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>마우스 이벤트</title>
<style type="text/css">
.box {
background: 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(){
- mouseover() : 선택한 요소의 영역에서 마우스를 올렸을 때 이벤트가 발생
$('.result').append('<p>마우스오버이벤트발생!</p>');
- append() : $("요소 선택").append("새 요소");
★★★★★ 박스를 실행 시킬 함수 안으로 또 메서드를 생성 했다.
박스에 마우스를 올리면 <p>마우스오버이벤트발생!</p> 를 추가해줘
});
});
</script>
</head>
<body>
<div class="box">mouseover</div>
<hr>
<div class="result"></div>
</body>
</html>
이와 비슷하게 키보드 이벤트 도 있다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>키보드 이벤트</title>
<style type="text/css">
.box {
background: 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>실습 문제
Q) 버튼이 3개가 있다. 버튼1을 누르면 없어지고, 버튼 2를 누르면 다시 보인다.
버튼3은 누르면 없어지고 또 누르면 생기는 것을 반복한다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
============================================================
순서 2. 스타일 적용
<style type="text/css">
@keyframes test{ 이것은 색깔이 다채롭게 보이도록 설정한것 // 안해도 된다.
0% { background: blue; transform: translate(0,0);}
25% { background: purple; transform: translate(0,0);}
50% { background: pink; transform: translate(0,0);}
75% { background: green; transform: translate(0,0);}
100% { background: blue; transform: translate(0,0);}
}
#box{ 색깔 있는 사각형 박스
width: 300px;
height: 200px;
background-color: lightblue;
margin: 4px;
animation-name: test; 애니메이션을 추가 하였다. 애니메이션 이름은 test
animation-duration: 5s; 5초 애니메이션 속도, 지속 시간
animation-fill-mode: none; 애니메이션을 움직이는 이동을 시키진 않을것이다.
animation-iteration-count: infinite; 무한으로
}
#wrap > div >button {
width: 100px;
height: 50px;
background-color: lightgray;
margin: 4px;
cursor: pointer;
}
</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(){
$('.button1').click(function(){ 버튼 1번을 클릭하면
$('#box').hide(); 노출되어 있는 요소를 숨김
})
$('.button2').click(function(){ 버튼 2번을 클릭하면
$('#box').show(); 숨겨져 있던 요소를 노출
})
$('.button3').click(function(){ 버튼 3번을 클릭하면
$('#box').toggle(); 숨겨져 있던 요소는 노출시키고, 노출되어 있던 요소를 숨김
})
});
</script>
============================================================
</head>
<body>
============================================================
순서 1. 틀 만들어 주기
<div id="wrap">
<div> 버튼 3개를 만들어 준다.
<button class="button1">버튼1</button>
<button class="button2">버튼2</button>
<button class="button3">버튼3</button>
</div>
</div>
<div id="box"></div> 버튼을 눌렀을때 이벤트가 보일 색깔을 가지고 있는 사각형 박스
============================================================
</body>
</html>
728x90
반응형