Day40
2020. 11. 25. 11:06ㆍ교육과정/KOSMO
키워드 : JQuery 준비 / JS에서의 오디오 재생 / JS에서 비디오 캡처 및 캔버스 적용 / JS에서 구글맵 사용 / JS로 드래그 앤 드롭 / JQuery 기초 / JQuery 선택자 /
****
0-1. JQuery 준비 (다운로드 방식)
(1) http://jquery.com 접속
(2) Download jQuery 클릭
(3) Download the compressed, production jQuery 3.5.1 우클릭 - 다른 이름으로 링크 저장 (min.js 파일)
(4) Download the uncompressed, development jQuery 3.5.1 우클릭 - 다른 이름으로 링크 저장 (js 파일)
(5) JQuery를 사용할 폴더에 lib 폴더를 생성 후 다운받은 js 파일을 넣는다.
(6) html 파일에서 </head> 안쪽에 jQuery를 작성할 스크립트를 쓴다.
<script type='text/javascript'>
$(function(){
제이쿼리 작성!
});
</script>
0-2. JQuery 준비 (CDN 방식)
(1) </head> 안쪽에 스크립트를 작성한다.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>(2) html 파일에서 </head> 안쪽에 jQuery를 작성할 스크립트를 쓴다.
<script type='text/javascript'>
$(function(){
제이쿼리 작성!
});
</script>
1. JS에서의 오디오 재생
※ 오디오 태그를 사용하지 않고도 JS에 내장된 오디오 class를 사용하여 오디오를 재생시킬 수 있다.
// 화면 구성
<body>
<div id="player"> <!-- 화면 구성 -->
<img src="../../images/sample/sensitive.jpg" id="img"/><br/>
<button id="control" onclick="togglePlay()">play</button>
<input type='number' id='current'/> <!-- 시간이 표시될 요소를 화면에 추가 -->
<button id="mute" onclick="toggleMute()">mute</button>
</div>
</body>
// html5에 내장된 Audio클래스를 사용하여 미디어 파일 연결
var audio = new Audio('../../media/peng.mp3');
// 이벤트 연결(html5에 내장되어 있는 timeupdate라는 이벤트는 재생시간을 표시해줌)
// id로 찾은 요소를 변수에 담음
// 요소의 값으로 currentTime이 출력되도록 대입
audio.addEventListener('timeupdate', function() {
var current = document.getElementById('current');
current.value = audio.currentTime;
});
// play 버튼을 클릭하면 재생 및 일시정지가 작동하도록 제어
// 객체를 찾아서 변수에 담은 뒤에 사용해야 오류발생을 줄일 수 있다.
// (window.onload 할 경우엔 function() 밖에서 변수 선언해도 됨)
var togglePlay = function() {
var control = document.getElementById('control');
// 오디오가 일시정지 중이거나 끝나있을 경우, play() 함수 실행 - 하는 일 : 재생
if(audio.paused || audio.ended) {
audio.play();
// 'play' 글자 대신 일시정지라고 글자 변경
control.innerHTML = '일시정지';
// 그 외(오디오 재생중)일 경우, pause() 함수 실행 - 하는 일 : 일시정지
} else {
audio.pause();
// 재생이라고 글자 변경
control.innerHTML = '재생';
}
}
// Mute 버튼을 클릭하면 음소거, 음소거 해제 되도록 제어 (not 연산자 ! 사용)
var toggleMute = function() {
audio.muted = !audio.muted;
}
<1_audio.html 전체 소스 코드>
더보기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Audio</title>
<style type="text/css">
input{
width:100px;
}
</style>
<script type="text/javascript">
var audio = new Audio('../../media/peng.mp3'); // html5에 내장된 Audio클래스를 사용하여 미디어 파일 연결
audio.addEventListener('timeupdate', function() { // 이벤트 연결(html5에 내장되어 있는 timeupdate라는 이벤트는 재생시간을 표시해줌)
var current = document.getElementById('current'); // id로 찾은 요소를 변수에 담음
current.value = audio.currentTime; // 요소의 값으로 currentTime이 출력되도록 대입
});
// play 버튼을 클릭하면 재생 및 일시정지가 작동하도록 제어
var togglePlay = function() {
var control = document.getElementById('control'); // 객체를 찾아서 변수에 담은 뒤에 사용해야 오류발생을 줄일 수 있다.
// (window.onload 할 경우엔 function() 밖에서 변수 선언해도 됨)
// 오디오가 일시정지 중이거나 끝나있을 경우, play() 함수 실행 - 하는 일 : 재생
if(audio.paused || audio.ended) {
audio.play();
// 'play' 글자 대신 일시정지라고 글자 변경
control.innerHTML = '일시정지';
// 그 외(오디오 재생중)일 경우, pause() 함수 실행 - 하는 일 : 일시정지
} else {
audio.pause();
// 재생이라고 글자 변경
control.innerHTML = '재생';
}
}
// Mute 버튼을 클릭하면 음소거, 음소거 해제 되도록 제어
var toggleMute = function() {
audio.muted = !audio.muted;
}
</script>
</head>
<body>
<div id="player"> <!-- 화면 구성 -->
<img src="../../images/sample/sensitive.jpg" id="img"/><br/>
<button id="control" onclick="togglePlay()">play</button>
<input type='number' id='current'/> <!-- 시간이 표시될 요소를 화면에 추가 -->
<button id="mute" onclick="toggleMute()">mute</button>
</div>
</body>
</html>
2. JS로 비디오 캡처 및 캔버스에 띄우기
// 화면 구성
<body>
<video width="320" height="240" controls="controls" id="video">
<source src="../../media/pengsu.mp4" type="video/mp4"></source>
<source src="../media/BigBuck.theora.ogv" type="video/ogg"></source>
<source src="../media/BigBuck.webm" type="video/webm"></source>
Your browser does not support the video tag.
</video>
<canvas id="canvas" width="320" height="240"></canvas> <!-- 화면캡처가 담길 캔버스를 화면에 구성 -->
</body>
// id를 이용하여 화면에 있는 요소를 찾아 변수에 담아둠
var video = document.querySelector('#video');
var canvas = document.querySelector('#canvas');
// 캔버스를 클릭하면 2d(평면 이미지)에 해당하는 값을 0,0좌표에 320,240 크기로 비디오의 내용을 그리게 함
// html5에 내장된 click이라는 이벤트를 canvas요소와 연결
// canvas에서 얻은 2d 컨텐츠를 ctx라는 변수에 담음
canvas.addEventListener('click', function(){
var ctx = canvas.getContext('2d');
ctx.drawImage(video, 0,0, 320,240);
});<2_video_canvas.html 전체 소스 코드>
더보기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Video</title>
<style type="text/css">
canvas{
border: 1px solid #000;
}
</style>
<script type="text/javascript">
window.onload = function() {
var video = document.querySelector('#video'); // id를 이용하여 화면에 있는 요소를 찾아 변수에 담아둠
var canvas = document.querySelector('#canvas');
// 캔버스를 클릭하면 2d(평면 이미지)에 해당하는 값을 0,0좌표에 320,240 크기로 비디오를 그리게 함
canvas.addEventListener('click', function(){ // html5에 내장된 click이라는 이벤트를 canvas요소와 연결
var ctx = canvas.getContext('2d'); // canvas에서 얻은 2d 컨텐츠를 ctx라는 변수에 담음
ctx.drawImage(video, 0,0, 320,240);
});
}
</script>
</head>
<body>
<video width="320" height="240" controls="controls" id="video">
<source src="../../media/pengsu.mp4" type="video/mp4"></source>
<source src="../media/BigBuck.theora.ogv" type="video/ogg"></source>
<source src="../media/BigBuck.webm" type="video/webm"></source>
Your browser does not support the video tag.
</video>
<!-- 화면캡처가 담길 캔버스를 화면에 구성 -->
<canvas id="canvas" width="320" height="240"></canvas>
</body>
</html>
3. JS에서 구글맵 사용하기 (참고)
※ 코드를 읽을 줄만 알면 된다.
<3_googlemap.html 전체 소스 코드>
더보기
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title> 읽기만 할 줄 알면 됨! </title>
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?sensor=true"></script>
<script type="text/javascript">
var map = null;
window.onload = function() {
getLocation();
var opt = { // opt도 json 구조
center : new google.maps.LatLng(37.518877, 126.732002),
zoom : 15,
mapTypeId : google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map"), opt);
}
function showLocation(position) {
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
alert("Latitude : " + latitude + " Longitude: " + longitude);
var hear = new google.maps.LatLng(latitude, longitude);
map.panTo(new google.maps.LatLng(latitude, longitude));
// 마커 (json 구조로 들어가게 해둠)
var marker = new google.maps.Marker({
position: hear,
title:"I'm hear!"
});
marker.setMap(map);
}
function errorHandler(err) {
if (err.code == 1) {
alert("Error: Access is denied!");
} else if (err.code == 2) {
alert("Error: Position is unavailable!");
}else if(err.code == 3){
alert("Erro : Time out");
}
}
function getLocation() {
if (navigator.geolocation) {
var options = {
timeout : 60000,
enabledHighAccuracy :true
};
navigator.geolocation.getCurrentPosition(showLocation,
errorHandler, options);
} else {
alert("Sorry, browser does not support geolocation!");
}
}
</script>
</head>
<body>
<div id="map" style="width: 800px; height: 600px"></div>
</body>
</html>
4. JS에서의 드래그 앤 드롭 (참고)
※ 좌측의 아이템들을 드래그 앤 드롭하여 나무 위에 올릴 수 있다.
<ChristmasView.html 전체 소스 코드>
더보기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> 도전 크리스마스트리</title>
<link href="./css/view.css" rel="stylesheet" type="text/css">
<!-- <script src="./js/1_events.js"></script> --> <!-- 이벤트 확인 -->
<!-- <script src="./js/2_events.js"></script> -->
<script src="./js/3_events.js"></script> <!-- 전송데이타들을 객체로 만들고 json 변환 -->
</head>
<body>
<div>
<h3> 트리를 예쁘게 </h3>
<div id="total" class='gifts'>
<img src="./images/1.PNG" class="item" id='gift1'>
<img src="./images/2.PNG" class="item" id='gift2' >
<img src="./images/3.PNG" class="item" id='gift3'>
<img src="./images/4.PNG" class="item" id='gift4' >
<img src="./images/5.PNG" class="item" id='gift5'>
<img src="./images/6.PNG" class="item" id='gift6'>
<img src="./images/7.PNG" class="item" id='gift7'>
<img src="./images/8.PNG" class="item" id='gift8'>
<img src="./images/9.PNG" class="item" id='gift9'> <!-- draggable="false" -->
</div>
</div>
<div id="myPan" >
<canvas id="tree" class="dropTarget" width='450' height='500'></canvas>
<img id='img' src='./images/christmastree.png' width='450' height='500'/>
</div>
</body>
</html><1_events.js 전체 소스 코드>
더보기
window.onload = function()
{
// 캔버스에 트리 이미지 삽입
var tree = document.querySelector("#tree");
var img = document.querySelector('#img');
img.style.display = 'none';
var ctx = tree.getContext("2d");
ctx.drawImage(img, 0, 0);
var lis = document.querySelectorAll(".item");
var targets = document.querySelectorAll(".dropTarget");
for (var i = 0; i < lis.length; i++) {
lis[i].addEventListener("dragstart", function() {
console.log("drag start event");
});
lis[i].addEventListener("drag", function() {
console.log("drag event");
});
lis[i].addEventListener("dragend", function() {
console.log("drag end event");
});
}
for (var i = 0; i < targets.length; i++) {
targets[i].addEventListener("dragenter", function(e) {
console.log("drag enter event");
});
targets[i].addEventListener("dragleave", function() {
console.log("drag leave event");
});
targets[i].addEventListener("dragover", function(e) {
e.preventDefault();
console.log("drag over event");
});
targets[i].addEventListener("drop", function(e) {
e.preventDefault();
console.log("drop event");
});
}
}
<드래그 앤 드롭 소스 포함된 폴더 파일>
5. JQuery 기초
| JavaScript | JQuery |
| - 자바스크립트 API 지원 수준 미흡 - 기능과 UI가 많아질수록 복잡도 증가 - 재사용 될 수 있는 기능들의 라이브러리화 필요 - 브라우저 호환성 (Cross-Browser) 대응 문제 - 각각의 개발자가 개별적으로 작성하여 협업 장애 |
- Write less, Do more - 문법이 간결함 - 사용하기 쉬움 - 다양한 플러그인 - 브라우저 호환성 문제 해결 - UI, Mobile 확장 가능 |
※ JQuery는 <script> 태그 안에 기술한다.
※ CSS 및 Script 작성 순서 (권장사항)
(1) 외부 CSS
<style rel='stylesheet' type='text/css' href='~~~~~.css'></style>
* CSS 파일 첫 줄에 @charset "euc-kr"(2) 내부 CSS
<style type='text/css'>
</style>(3) 외부 script
<script type='text/javascript' src='~~~~.js'></script>(4) 내부 script
<script type='text/javascript'>
</script>
※ 기본 구조
: JQuery는 "어떤 것을 가져와서 그것에 무언가 하기"이다.
$ (어떤것) . 무언가하기 ( ) ;
↓
$ ('selector') . 동작메소드 ( ) ;☞ 선택한 무언가에 무엇을 하기
☞ JQuery 객체화를 하고 어떤 기능을 부여
※ DOM이 사용될 준비가 되면 함수를 실행하기 위한 JQuery 코드
(window.onload 와 같은 기능)
(방법1)
jQuery(function($){
// your code using failsafe $ alias here
});(방법2)
$(document).ready(function(){
// document is ready
});(방법3)
$(function(){
// document is ready
});
※ JQuery에서의 selectors (선택자)
: CSS의 선택자 대부분을 지원한다.
* 전부 선택
# ID
. class
E element
E1, E2 여러개의 element 선택
< 속성(attribute) 선택자 >
[name] name 속성을 가진
[name="~~~~"] name 속성의 값이 ~~~~인
[name!="~~~~"] name 속성의 값이 ~~~~가 아닌
[name^="~~~~"] name 속성의 값이 ~~~~로 시작하는
[name$="~~~~"] name 속성의 값이 ~~~~로 끝나는
[name*="~~~~"] name 속성의 값이 ~~~~를 포함하는
< 기본 필터 (filter) 선택자 >
:first / :last 선택된 요소 중 처음 / 마지막 요소 선택
:even / :odd 짝수번째 / 홀수번째 요소 선택
:eq(n) n번째 요소 선택 (n은 0부터 시작)
:lt(n) / :gt(n) n보다 작은 / n보다 큰 요소 선택 (n은 0부터 시작)
:not() 선택자에 해당되지 않는 요소 선택
< 필터 (filter) 선택자 >
:first-child 부모 요소의 첫 자식 요소 선택
:last-child 부모 요소의 마지막 자식 요소 선택
:only-child 형제가 없는 요소 선택
:nth-child(n) 부모 요소의 n번째 자식 요소 선택 (n은 1부터 시작)
:contains('~~~') 특정 문자열 ~~~을 포함하는 요소 선택
:empty 빈 요소를 선택
:parent 자식이 있는 부모 요소를 선택
:has() 선택자에 해당하는 요소를 포함하는 상위 요소 선택
< 폼 (form) 선택자 >
:input :checkbox :radio
:text :password :file
:button :submit :image :reset
:focus
:checked
:selected
:enabled :disabled
< 계층 (hierarchy) 선택자 >
div > span div 요소의 자식인 span 요소 선택
div span div 요소의 자손인 span 요소 선택
div + span div 요소 다음으로 인접한 span 요소 선택
div ~ span div 요소 다음에 나오는 span 요소 형제들(복수개) 선택
< Visibilisity 선택자 >
:visible 보이는 요소를 선택
:hidden 보이지 않는 요소를 선택
※ JQuery의 트리구조에서의 함수들
.children() 자식 요소들
.siblings() 형제 요소들
.closest() 현재 요소를 포함하여 가까운 조상 요소
.find() 자손 요소 중에 선택자에 해당하는 요소
.next() / prev() 다음에 오는 / 이전에 오는 요소
.nextAll() / prevAll() 다음에 오는 / 이전에 오는 모든 요소
.nextUntil()/prevUntil()선택자에 해당하는 요소 전까지의 다음 / 이전 요소
.parent() 부모 요소
.parents() 루트 요소에 이르기까지 모든 부모 요소
.parentsUntil() 해당하는 선택자까지의 부모 요소
.offsetParent() 위치가 지정된 가장 가까운 조상 요소
< Filtering 함수들 >
.eq(n) n번째 요소
.first() / .last 첫번째 / 마지막 요소
.slice() 시작과 끝 사이에 해당하는 요소
.has() 선택자에 해당하는 요소를 가지고 있는 부모 요소(DOM 요소)
.not() 해당되는요소를 제외
.is() 현재 해당되는 요소를 제외
.map() 현재 선택된 요소들을 콜백함수에 보내서 새로운 jquery 객체를 반환.........???
.filter() 선택자(DOM 요소)에 해당되는 요소
.add() 인수()의 요소가 추가된 JQuery 객체를 반환
.end() 최근 필터링 결과를 끝내고 체인의 이전 상태로 되돌린다............????
.contents() 안에 포함하고 있는 자식 요소들을 선택
.addSelf() 이전 체이닝에 자기 자신을 합침............??????
※ childrent()의 contents()의 차이
※ find()와 filter()의 차이???????????????????
※ 조작 함수들
< 스타일 관련 >
.css() 스타일 속성의 값을 얻거나 추가, 변경
.height() 요소의 높이를 얻거나 설정
.width() 요소의 너비를 얻거나 설정
.innerHeight() padding, border 영역을 포함한 요소의 내부 높이를 얻거나 설정
.innerWidth() padding, border 영역을 포함한 요소의 내부 너비를 얻거나 설정
.outerHeight() padding, border 영역을 포함한 요소의 외부 높이를 얻거나 설정
.outerWidth() padding, border 영역을 포함한 요소의 외부 너비를 얻거나 설정
.position() 부모 요소로부터 위치 값을 얻음
.offset() 문서로부터 위치 값을 얻음
.scrollLeft() 좌우 스크롤바의 위치값을 얻음
.scrollTop() 상하 스크롤바의 위치값을 얻음
< 일반 속성 관련 >
.attr('name') HTML 속성 값을 얻어옴 --- getter 역할
.attr('name', '~~~') HTML 속성 값을 추가하거나 변경 --- setter 역할
.removeAttr('name') HTML 속성 제거
.prop('name') JavaScript 속성 값을 얻어옴 --- getter 역할
.prop('name', '~~~') JavaScript 속성 값을 추가하거나 변경 --- setter 역할
.removeProp('name') JavaScript 속성 제거
.val() 요소의 value 속성 값을 얻어옴 --- getter 역할
.val(value) 요소의 value 속성값을 추가하거나 변경 --- setter 역할
< 클래스 속성 관련 >
.addClass() 클래스를 추가
.removeClass() 클래스를 삭제
.hasClass() 클래스가 지정되어 있는지 확인
.toggleClass 현재의 클래스 값에 따라 클래스를 추가하거나 삭제
※ 이벤트
< DOM 관련 >
.text() 텍스트 내용을 얻어가 추가, 변경
.html() html 내용을 얻어가 추가, 변경
A.append(B) A가 끝나는 지점에 B를 자식 노드로 추가
A.appendTo(B) B가 끝나는 지점에 A를 자식 노드로 추가
A.prepend(B) A가 시작하는 지점에 B를 자식 노드로 추가
A.prependTo(B) B가 시작하는 지점에 A를 자식 노드로 추가
A.before(B) A의 이전에 B를 형제 노드로 추가
A.insertBefore(B) B의 이전에 A를 형제 노드로 추가
A.after(B) A의 이후에 B를 형제 노드로 추가
A.insertAfter(B) B의 이후에 A를 형제 노드로 추가
.remove() DOM tree에서 해당 대상 요소를 삭제
.detach() DOM tree에서 해당 요소를 삭제(데이터가 유지되기 때문에 저장했다가 다른 곳에 사용 가능)
.empty() DOM에서 해당 대상 요소의 자식 요소를 모두 삭제
.replaceWith() 인수의 요소로 jQuery 객체를 대체
.replaceAll() jQuery 객체로 인수의 요소를 대체
.wrap() 감싸는 요소로 추가
.wrapAll() 전체를 감싸는 요소로 추가
.unwrap() 감싸고 있는 부모 요소를 제거
.wrapInner() 내부의 콘텐츠를 감싸는 요소를 추가
< Event Handling : 이벤트가 발생할 때 실행할 함수 >
.bind(eventType, callback) 요소에 이벤트 핸들러 지정
.unbind() 지정된 이벤트 핸들러 삭제
.one() bind()와 동일하지만 단 한 번만 실행하고 unbind() 됨
ex) select 요소를 클릭하면 오렌지 색으로 변경
$('selector').bind('click', function(evt){
$(this).css({color:orange});
});
< Mouse Event : 마우스 이벤트 >
.click() 클릭할 때
.dbclick() 더블클릭 할 때
.mouseup() 마우스 버튼을 올릴 때
.mousedown() 마우스 버튼을 내릴 때
.mouseover() 마우스 포인터가 올라갈 때
.mouseout() 마우스 포인터가 내려갈 때
.mousemove() 마우스 포인터가 움직일 때
.mouseenter() 마우스 포인터가 들어올 때
.mouseleave() 마우스 포인터가 나갈 때
.toggle()
.hover() 마우스 포인터가 들어오고 나갈 때 이벤트 발생
< Focus Event : 포커스 이벤트 >
.focusin() 포커스를 받을 때
.focusout() 포커스를 잃을 때
< Keyboard Event : 키보드 이벤트 >
.keydown() 키가 내려갈 때
.keyup() 키가 올라갈 때
.keypress() 키가 누릴 때
< Form Events : 폼 이벤트 >
.focus() 포커스를 받을 때
.blur() 포커스를 잃을 때
.change() 값이 변경될 때
.select() 선택될 때
.submit() 전송될 때 (return false로 전송을 막을 수 있음)
< Document Events >
.load() 페이지 로딩이 완료되었을 때
.ready() DOM의 로딩이 완료되었을 때
.unload() 페이지를 벗어날 때 ---------- 사라진 명령어로 사용 불가
< Browser Events >
.error() 오류가 발생할 때
.resize() 화면 크기가 변경될 때
.scroll() 스크롤이 움직일 때
< Event Handler Attachment >
.live() 앞으로 생성될 요소에도 이벤트 핸들러를 지정
.die() .live()로 생성된 이벤트 핸들러 삭제
.on() 동적으로 생성된 요소에 이벤트를 적용하고자 할 때
.delegate() .live()와 동일하지만 특정 DOM 요소에 이벤트 핸들러 지정
.undelegate() .delegate()로 생성된 이벤트 핸들러 삭제
.trigger() 요소에 지정된 이벤트 핸들러와 동작을 실행
.triggerHandler() .trigger()와 동일하지만 지정된 핸들러 동작만 수행
※ 효과
< Effect : 효과 >
.show() 선택된 요소를 보여줌
.hide() 선택된 요소룰 감춤
.toggle() 선택된 요소를 상태에 따라 감추거나 보여줌
.fadeIn() 선택된 요소의 투명도를 조절하여 서서히 보여줌
.fadeOut() 선택된 요소의 투명도를 조절하여 서서히 감춤
.fadeTo() 선택된 요소를 지정된 투명도로 서서히 조절함
.fadeToggle() 선택된 요소를 서서히 감추거나 보여줌
.slideUp() 선택된 요소의 높이를 줄여서 감춤
.slideDown() 선택된 요소의 높이를 원상태로 복원하며 보여줌
.slideToggle() 선택된 요소를 슬라이드 효과로 감추고 보여줌
.animate() CSS의 애니메이션 효과를 만듦
6. JQuery 실습 - (1)
<body>
<div id="here">
아자아자 제이쿼리~~!!!
</div>
<div id="student">
<div id="name">홍길동</div>
<div id="age">34</div>
</div>
</body>
※ JQuery를 사용하여 클릭하면 내용이 바뀌게 하기
(방법1)
$('#here').click(function(){
$('#here').text('클릭하면 내용이 변경');
}); (방법2)
var h = $('#here'); // id에 해당하는 요소를 찾아 변수로 담음 (여러번 사용할 때 편하게 하려고)
h.click(function(){
h.text('클릭하면 내용이 변경');
});
※ JQuery를 사용하여 마우스가 올라오고 내려갈 때 출력내용이 바뀌게 하기
$(function() {
var h = $('#here');
h.mouseenter(function(){
h.text('눌러봐!');
});
h.mouseleave(function(){
h.text('아자아자 제이쿼리로 돌아와!');
});
})
※ JQeury를 사용한 hover 이벤트
$(function() {
var h = $('#here');
h.hover(function(){
h.css('border', '2px solid green');
}, function(){
h.css('border', '2px dashed red');
});
})
※ JQuery를 사용한 mouseover 이벤트 : 마우스가 올라오는 순간 발생하는 이벤트
$(function(){
var h = $('#here');
h.mouseover(function(){
h.html('<img src="images/cat.jpg">');
});
})
※ JQuery를 사용한 mouseout 이벤트 : 마우스가 올라왔다가 나가는 순간 발생하는 이벤트
$(function(){
var h = $('#here');
h.mouseout(function(){
h.html('<img src="images/puppy.jpg">');
});
})
※ JQuery를 사용한 fadeOut, FadeIn 이벤트 - (1) 기본 방식
$(function() {
var h = $('#here');
h.fadeOut(1000);
h.fadeIn(1000);
})
※ JQuery를 사용한 fadeOut, FadeIn 이벤트 - (2) 체인 방식 : 같은 요소에서 연속적으로 작동하고자 할 때
$(function() {
var h = $('#here');
h.fadeOut(1000).fadeIn(1000);
})
※ JQuery를 사용한 slideUp / slideDown 이벤트
$(function() {
var h = $('#here');
h.slideUp(1000).slideDown(1000);
})
※ JQuery를 사용한 애니메이션 이벤트
: position을 absolute나 fixed 등으로 설정해주어야 애니메이션이 적용된다.
$(function() {
var h = $('#here');
h.animate(top, 200);
})
<style type='text/css'>
#here {position:absolute;}
</style>
** 2개 이상의 속성을 사용하고자 할 때는 json 구조로 작성한다.
$(function() {
var h = $('#here');
h.animate({top:20, left:40});
})
※ JQuery를 사용한 CSS 적용
$(function() {
var n = $('#student').find('#name');
n.css('background', 'red');
n.css('color', 'yellow');
})
이 때, 2개 이상의 속성을 적용하려면 json 구조가 효율적이다.
n.css({
background:'red',
color:'yellow',
border:'2px solid green'
});
< 1_jqueryBasic.html 전체 소스 코드 >
더보기
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title> 첫 연습 </title>
<style type='text/css'>
/* #here {position:absolute;} */
</style>
<script src='../lib/jquery-3.5.1.min.js' type='text/javascript'></script>
<script type='text/javascript'>
$(function() { // window.onload와 같은 기능으로 화면이 뜨고 나면 js가 수행되게 함
/* $('#here').click(function(){
$('#here').text('클릭하면 내용이 변경');
}); */
var h = $('#here'); // id에 해당하는 요소를 찾아 변수로 담음 (여러번 사용할 때 편하게 하려고)
/* h.click(function(){
h.text('클릭하면 내용이 변경');
}); */
// mouseenter / mouseleave 이벤트 활용
/* h.mouseenter(function(){
h.text('눌러봐!');
});
h.mouseleave(function(){
h.text('아자아자 제이쿼리로 돌아와!');
}); */
// hover 이벤트 활용
/* h.hover(function(){
h.css('border', '2px solid green');
}, function(){
h.css('border', '2px dashed red');
}); */
// mouseover / mouseout 이벤트 활용
/* h.mouseover(function(){
h.html('<img src="images/cat.jpg">');
}); */
/* h.mouseout(function(){
h.html('<img src="images/puppy.jpg">');
}); */
// fadeOut / fadeIn 이벤트 활용
// 1. 기본 방식
/* h.fadeOut(1000);
h.fadeIn(1000); */
// 2. 체인 방식 (같은 요소에서 연속으로 작동하고자 할 때)
/* h.fadeOut(1000).fadeIn(1000); */
// slideUp / slideDown 이벤트 활용
/* h.slideUp(1000).slideDown(1000); */
// 애니메이션 이벤트 활용 - position을 absolute나 fixed 등으로 설정해주어야 애니메이션이 적용된다.
/* h.animate(top, 200); */
// 2개 이상의 속성을 사용하고자 할 때는 json 구조로 작성한다.
/* h.animate({top:20, left:40}); */
var n = $('#student').find('#name'); // n이라는 변수는 홍길동을 가리킨다.
// var n = $('#student > #name');
/* n.css('background', 'red');
n.css('color', 'yellow'); */
// 2개 이상의 속성을 적용하고자 하므로 json 구조가 효율적이다.
/* n.css({
background:'red',
color:'yellow',
border:'2px solid green'
}); */
})
</script>
<body>
<div id="here">
아자아자 제이쿼리~~!!!
</div>
<div id="student">
<div id="name">홍길동</div>
<div id="age">34</div>
</div>
</body>
</html>
7. JQuery 실습 - (2)
(1) ul에 JQuery를 사용하여 css 적용하기
<ul>
<li class="man">김수현</li>
<li class="woman">김희애</li>
<li class="woman">송혜교</li>
<li class="man">하정우</li>
<li class="woman">김태희</li>
</ul>
$(function(){
$('.man').css( 'background', 'lightpink');
$('ul>li.woman').css({
background':'lightblue',
'color':'red'
});
})
(2) 마우스 클릭했을 때 (포커스가 왔을 때) 이벤트 + 마우스가 떠났을 때 (포커스가 사라졌을 때) 이벤트
<input type="text" class="inputText"/>
<input type="text" class="inputText"/>
<input type="text" class="inputText"/>
$(function(){
$('.inputText').focus(function(){
$(this).addClass('active');
});
$('.inputText').blur(function(){
$(this).removeClass('active');
});
})
(3) JQuery에서의 text() / html() / remove() / attr() 함수 사용
<div id="divText">여기에 글씨를</div>
<div id="divHtml">여기에 그림을</div>
<div id="divEmpty">여기를 비움</div>
<p>
<img src="images/puppy.jpg" id='changeGrim'>
</p>
// "여기에 글씨를" -> text() 안의 문구로 대체됨
$('#divText').text('<img src="images/grim.jpg">');
// "여기에 그림을" -> html이 적용된 이미지로 대체됨
$('#divHtml').html('<img src="images/grim.jpg">');
// "여기를 비움" -> remove() 함수가 수행됨
$('#divEmpty').remove();
// 강아지 그림을 클릭하면 고양이 그림으로 변경
// attr() : 속성값을 얻어오거나 변경할 때 사용
$('#changeGrim').click(function(){
$('#changeGrim').attr('src', "images/cat.jpg");
});
(4) val() / attr()을 사용하여 textarea / input / 라디오버튼 체크값에 기본값 부여하기
<p>
이름:<input id="tf" type="text" size="20" /><br/>
메세지:<textarea id="ta" rows="3" cols="20"></textarea><br/>
주소:<select id="sel">
<option value="seoul">서울</option>
<option value="busan">부산</option>
<option value="masan">마산</option>
<option value="incheon">인천</option>
</select>
<select id="sel_m" multiple="multiple">
<option value="seom1">제주도</option>
<option value="seom2">울릉도</option>
<option value="seom3">독도</option>
<option value="seom4">거제도</option>
</select>
성별:<input type='radio' name='gender' value='남자'/>남자
<input type='radio' name='gender' value='여자'/>여자<br/>
<input type='button' id='check' value='확인'/>
</p>
// 속성 value 값을 얻거나 지정 : val()
$('#tf').val('홍길동');
$('#ta').val('작성중...');
$('#sel').val('masan');
$('#sel_m').val(['seom1', 'seom3']);
$('input[name="gender"]:eq(0)').attr('checked', true);
(5) "확인" 버튼 클릭했을 때, 사용자 입력값과 선택값을 모아서 <div id='result'></div>에 출력하기
※ 주의!
JavaScript에서는 innerHTML 사용
JQuery에서는 text() 또는 html() 사용
<p>
이름:<input id="tf" type="text" size="20" /><br/>
메세지:<textarea id="ta" rows="3" cols="20"></textarea><br/>
주소:<select id="sel">
<option value="seoul">서울</option>
<option value="busan">부산</option>
<option value="masan">마산</option>
<option value="incheon">인천</option>
</select>
<select id="sel_m" multiple="multiple">
<option value="seom1">제주도</option>
<option value="seom2">울릉도</option>
<option value="seom3">독도</option>
<option value="seom4">거제도</option>
</select>
성별:<input type='radio' name='gender' value='남자'/>남자
<input type='radio' name='gender' value='여자'/>여자<br/>
<input type='button' id='check' value='확인'/>
</p>
$('#check').click(function() {
var sel = $('#sel option:selected').text();
var sel_m = $('#sel_m option:selected').text();
var tf = $('#tf').val();
var ta = $('#ta').val();
var gender = $('input[name="gender"]:checked').val();
$('#result').text([ tf, ta, sel, sel_m, gender ]);
});
(6) "확인" 버튼 클릭했을 때 사용자 입력값으로 동적 테이블 그리기
<p>
이름:<input id="tf" type="text" size="20" /><br/>
주소:<select id="sel">
<option value="seoul">서울</option>
<option value="busan">부산</option>
<option value="masan">마산</option>
<option value="incheon">인천</option>
</select>
성별:<input type='radio' name='gender' value='남자'/>남자
<input type='radio' name='gender' value='여자'/>여자<br/>
메세지:<textarea id="ta" rows="3" cols="20"></textarea><br/>
<input type='button' id='check' value='확인'/>
</p>
$('#check').click(function() {
var tf = $('#tf').val();
var sel = $('#sel option:selected').text();
var gender = $('input[name="gender"]:checked').val();
var ta = $('#ta').val();
var tbl = $('#tbl');
var tr = $('<tr/>');
var td1 = $('<td/>');
var td2 = $('<td/>');
var td3 = $('<td/>');
var td4 = $('<td/>');
td1.text(tf);
td2.text(sel);
td3.text(gender);
td4.text(ta);
tr.append(td1);
tr.append(td2);
tr.append(td3);
tr.append(td4);
tbl.append(tr);
}
(7) 태그의 위치를 이동하여 부모 자식 관계로 만들기
: 각 태그의 id값을 찾아 변수에 담은 뒤 append( ) 또는 appendTo( ) 함수를 사용한다.
<div id="actor">배우</div>
<div id="tae">김태희</div>
<div id="su">김수현</div>
<div id="bin">현빈</div>
var actor = $('#actor');
var tae = $('#tae');
var su = $('#su');
actor.append(tae);
su.appendTo(actor);
(8) 태그를 만들어 새로운 데이터를 추가할 수 있다.
(방법 1)
actor.append('<div id="bo">박보검</div>');(방법 2)
var tag = $('<div/>');
tag.text('공유');
tag.attr('id','gong');
actor.append(tag);
(9) 동일한 클래스를 갖는 데이터로부터 특정 데이터를 가져오기 위해 each( ) 를 사용할 수 있다.
<div class="data">이름</div>
<div class="data">직업</div>
<div class="data">나이</div>※ data라는 클래스가 여러 곳에 포함되어 있으므로, each 함수를 사용하여 명확하게 구분지을 수 있다.
$('.data').each(function(){
$(this).click(function(){ // this는 .data를 가리킴
alert($(this).text()); // this는 클릭한 곳을 가리킴
});
});
< 2_jqueryBasic.html 전체 소스 코드 >
더보기
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title> 첫 연습 </title>
<style type="text/css">
.active { border : 3px solid red; }
</style>
<!-- JQuery를 CDN 방식으로 적용 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type='text/javascript'>
$(function(){
// 1.
// ul에 JQuery를 사용하여 css 적용
$('.man').css( 'background', 'lightpink');
$('ul>li.woman').css({
'background':'lightblue',
'color':'red'
});
// 2.
// 마우스 클릭했을 때(포커스가 왔을 때의 이벤트)
$('.inputText').focus(function(){
/* $('.inputText').addClass('active'); */
$(this).addClass('active');
});
// 마우스가 떠났을 때(포커스가 사라졌을 때 이벤트)
$('.inputText').blur(function(){
$(this).removeClass('active');
});
// 3.
$('#divText').text('<img src="images/grim.jpg">'); // "여기에 글씨를" -> text() 안의 문구로 대체됨
$('#divHtml').html('<img src="images/grim.jpg">'); // "여기에 그림을" -> html이 적용된 이미지로 대체됨
$('#divEmpty').remove(); // "여기를 비움" -> remove() 함수가 수행됨
// 강아지 그림을 클릭하면 고양이 그림으로 변경
// attr() : 속성값을 얻어오거나 변경할 때 사용
$('#changeGrim').click(function(){
$('#changeGrim').attr('src', "images/cat.jpg");
});
// 4.
// 속성 value 값을 얻거나 지정 : val()
$('#tf').val('홍길동');
// textarea에 '작성중...' 글자를 출력
$('#ta').val('작성중...');
// select 태그 - 마산 , list - 제주도, 독도
$('#sel').val('masan');
$('#sel_m').val(['seom1', 'seom3']);
// 남자,여자 라디오버튼을 화면에 만든 뒤, jquery로 남자만 체크 (checked)
$('input[name="gender"]:eq(0)').attr('checked', true);
// 확인 버튼이 눌렸을 때, 사용자의 입력값이나 선택값들을 얻어서<div id='result'></div>에 출력
// innerHTML(JS) -> text() / html()
$('#check').click(function() {
var sel = $('#sel option:selected').text();
var sel_m = $('#sel_m option:selected').text();
var tf = $('#tf').val();
var ta = $('#ta').val();
var gender = $('input[name="gender"]:checked').val();
// $('#result').text([ tf, ta, sel, sel_m, gender ]);
// 과제 - 확인 버튼을 클릭했을 때 동적 테이블에 사용자 입력값이 들어가도록
var tbl = $('#tbl');
var tr = $('<tr/>');
var td1 = $('<td/>');
var td2 = $('<td/>');
var td3 = $('<td/>');
var td4 = $('<td/>');
td1.text(tf);
td2.text(sel);
td3.text(gender);
td4.text(ta);
tr.append(td1);
tr.append(td2);
tr.append(td3);
tr.append(td4);
tbl.append(tr);
});
// 5.
var actor = $('#actor');
var tae = $('#tae');
var su = $('#su');
var bin = $('#bin');
// tae를 actor의 자식으로 만드는 방법 (1)
// actor.append(tae);
// su를 actor의 자식으로 만드는 방법 (2)
// su.appendTo(actor);
// 태그를 만들어 테이블에 추가하는 방법 (1)
actor.append('<div id="bo">박보검</div>');
// 태그를 만들어 테이블에 추가하는 방법 (2)
var tag = $('<div/>');
tag.text('공유');
tag.attr('id','gong');
actor.append(tag);
// 6. 클릭했을 때 해당되는 글씨 얻어오기
$('.data').each(function(){ // data라는 클래스에 여러개가 들어 있어서 each로 명확하게 나눠지게 하는 것
$(this).click(function(){ // this는 .data를 가리킴
alert($(this).text()); // this는 클릭한 곳을 가리킴
});
});
});
</script>
</head>
<body>
<!-- 1 -->
<ul>
<li class="man">김수현</li>
<li class="woman">김희애</li>
<li class="woman">송혜교</li>
<li class="man">하정우</li>
<li class="woman">김태희</li>
</ul>
<!-- 2 -->
<input type="text" class="inputText"/>
<input type="text" class="inputText"/>
<input type="text" class="inputText"/>
<!-- 3 -->
<div id="divText">여기에 글씨를</div>
<div id="divHtml">여기에 그림을</div>
<div id="divEmpty">여기를 비움</div>
<p>
<img src="images/puppy.jpg" id='changeGrim'>
</p>
<!-- 4 -->
<p>
이름:<input id="tf" type="text" size="20" /><br/>
메세지:<textarea id="ta" rows="3" cols="20"></textarea><br/>
주소:<select id="sel">
<option value="seoul">서울</option> <!-- option에 value 값 없어도 됨 -->
<option value="busan">부산</option>
<option value="masan">마산</option>
<option value="incheon">인천</option>
</select>
<select id="sel_m" multiple="multiple">
<option value="seom1">제주도</option>
<option value="seom2">울릉도</option>
<option value="seom3">독도</option>
<option value="seom4">거제도</option>
</select>
<input type='button' id='check' value='확인'/>
<input type='button' id='init' value='초기화'/> <!-- [과제] 클릭시 값 지정하려면 -->
성별:<input type='radio' name='gender' value='남자'/>남자
<input type='radio' name='gender' value='여자'/>여자<br/>
<div id='result'></div>
</p>
<!-- 5 -->
<div id="actor">배우</div>
<div id="tae">김태희</div>
<div id="su">김수현</div>
<div id="bin">현빈</div>
<!--
[ 과제 ] 동적 테이블 만들기
이름 주소 나이 메세지
홍길동 서울 남자 하고픈말
-->
<table id='tbl' border='1'>
<tr><th>이름</th><th>주소</th><th>성별</th><th>메세지</th></tr>
</table>
<!-- 6 -->
<div class="data">이름</div>
<div class="data">직업</div>
<div class="data">나이</div>
</body>
</html>
8. JQuery 실습 - (3) JQuery Filter 찾기
<h1>제이쿼리 시작</h1>
<h2>내가 좋아하는 음식 </h2>
<ul id="food">
<li>떡볶이</li>
<li>어묵</li>
<li>
<ul>
<li>어묵국</li>
<li>어묵탕</li>
<li>어묵튀김</li>
</ul>
</li>
<li>닭튀김</li>
<li>돼지튀김</li>
<li>소튀김</li>
<li>구두튀김</li>
</ul>
<h2>내가 좋아하는 술</h2>
<ul>
<li>와인</li>
<li>맥주</li>
<li>막걸리</li>
</ul>
(1) 첫 번째 요소의 형제 요소에 적용
$('li:first').siblings().addClass('borderRed');
(2) 짝수 요소에 적용
$('li:even').addClass('bg');
(3) 네 번째 요소에 적용
$('li:eq(4)').addClass('bg');
(4) 세 번째보다 앞의 요소들에 적용 (첫 번째와 두 번째)
$('li:lt(2)').addClass('bg');
(5) 첫 번째를 제외한 요소에 적용
$('ul:first > li:not(:nth-of-type(1))').addClass('bg');
$('li:not(:nth-of-type(1))').addClass('border');
(6) '튀김'을 포함한 요소에 적용
$('li:contains("튀김")').addClass('bg');
(7) '떡볶이'와 '와인'을 포함한 요소에 적용
$('li:nth-of-type(1)').addClass('borderBlue');
$('li:first-child').addClass('borderBlue');
(8) '어묵'의 부모 관련 차이 비교
$('li:contains("어묵"):parent').addClass('bg')
$('li:contains("어묵")').parent().addClass('border')
(9) '튀김'을 포함한 요소에 배경색 지정
$('li:contains("튀김")').slice(1).addClass('bgPink');
$('li:contains("튀김"):gt(0)').addClass('bg');
$('li li:contains("튀김"), li:nth-child(n):contains("튀김")~li:contains("튀김")').css('background','aliceblue');
$('li:contains("튀김")').not($('ul').parent()).css('background','yellow');
(10) '어묵' 아래의 자식 요소들에 테두리 지정
$('li:contains("어묵") li').addClass('borderBlack');
(11) '어묵' 아래의 자식 요소를 제외하고 마우스를 올리면 배경색이 변하고, 마우스를 내리면 배경색 제거하기
var o = $('#food>li:not(:nth-of-type(3)),ul:nth-of-type(2)>li')
o.hover(function(){
$(this).css('background','green');
},function(){
$(this).css('background','white');
});
$('li:not(:contains("어묵"):gt(0))').hover(function() {
$(this).css('background', 'green');
}, function() {
$(this).css('background', 'white');
});
< 3_jqueryFilter.html 전체 소스 코드 >
더보기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jquery filter</title>
<!--4. class 속성제어 -->
<style type="text/css">
.bg { background : yellow; }
.bgPink { background : pink; }
.border { border : 3px dotted pink; }
.borderRed { border : 3px dotted red; }
.borderBlue { border : 3px dotted blue; }
.borderBlack { border : 3px dotted black; }
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
// $('li:first').siblings().addClass('borderRed');
// $('li').first().addclass('border'); .......?
// (1) 짝수 요소 적용
// $('li:even').addClass('bg');
// (2) 네 번째 요소 적용
// $('li:eq(4)').addClass('bg');
// (3) 세 번째보다 앞의 요소들 적용 (첫 번째와 두 번째)
// $('li:lt(2)').addClass('bg');
// (4) 첫번째를 제외한 요소 적용
// $('ul:first > li:not(:nth-of-type(1))').addClass('bg');
// $('li:not(:nth-of-type(1))').addClass('border');
// (5) '튀김'을 포함한 요소 적용
// $('li:contains("튀김")').addClass('bg');
// (6) '떡볶이'와 '와인'에 적용
// $('li:nth-of-type(1)').addClass('borderBlue');
// $('li:first-child').addClass('borderBlue');
// (7) '어묵'의 부모 관련 차이 비교
// $('li:contains("어묵"):parent').addClass('bg')
// $('li:contains("어묵")').parent().addClass('border')
// 연습문제
// 1. '튀김'을 포함한 요소에 배경색 지정
// $('li:contains("튀김")').slice(1).addClass('bgPink');
// $('li:contains("튀김"):gt(0)').addClass('bg');
// $('li:contains("튀김")').not($('ul').parent()).css('background','yellow');
// $('li li:contains("튀김"), li:nth-child(n):contains("튀김")~li:contains("튀김")').css('background','aliceblue');
// 2. 어묵 아래의 자식 요소들 테두리 지정
// $('li:contains("어묵") li').addClass('borderBlack');
// 3. 어묵 아래의 자식 요소를 제외하고 마우스를 올리면 배경색 변경하고, 마우스를 내리면 배경색 제거
/* var o = $('#food>li:not(:nth-of-type(3)),ul:nth-of-type(2)>li')
o.hover(function(){
$(this).css('background','green');
},function(){
$(this).css('background','white');
}); */
/* $('li:not(:contains("어묵"):gt(0))').hover(function() {
$(this).css('background', 'green');
}, function() {
$(this).css('background', 'white');
}); */
// $('ul:nth-of-type(1)>li:not(:children()), ul:nth-of-type(2)>li').hover(function(){
/* $('ul:nth-of-type(1)>li:not(:nth-of-type(3))').hover(function(){
$(this).addClass('bg');
}, function(){
$(this).removeClass('bg');
}); */
});
</script>
</head>
<body>
<h1>제이쿼리 시작</h1>
<h2>내가 좋아하는 음식 </h2>
<ul id="food">
<li>떡볶이</li>
<li>어묵</li>
<li>
<ul>
<li>어묵국</li>
<li>어묵탕</li>
<li>어묵튀김</li>
</ul>
</li>
<li>닭튀김</li>
<li>돼지튀김</li>
<li>소튀김</li>
<li>구두튀김</li>
</ul>
<!-- 2. 추가하고 다시 확인 -->
<h2>내가 좋아하는 술</h2>
<ul>
<li>와인</li>
<li>맥주</li>
<li>막걸리</li>
<li>소주</li>
</ul>
<div id="result"></div>
</body>
</html>
9. JQuery 실습 - (4) JQuery 이벤트
(0) 구조
<ul>
<li>부에노스 아이레스</li>
<li>바르셀로나</li>
<li>리마</li>
<li>라파스</li>
</ul>
(1) 마우스를 올리면 손가락 모양으로 커서가 바뀌게 하기
$('li').css('cursor','pointer');
(2) li 요소를 클릭했을 때, 클릭한 글씨를 가져다가 result 사이에 넣기 (축약형)
$('li').click(function(){
$('#result').text( $(this).text() );
});
반응형