22.06.13
자바 스크립트 JQuery배우기.
JavaScript vs JQuery
- JavaScript(바닐라 자바스크립트)
: 자바스크립트는 웹 페이지를 동적으로 표현해 주는 언어이다.
ex) 경고창, 확인창, drop 다운 기능, 탭 기능 등 - JQuery
: 자바스크립트를 더 간편하게 사용하게 해주는 자바스크립트 라이브러리.
JQuery를 사용하면 순수 자바스크립트로 코딩하는 것보다 높은 생산성을 기대할 수 있다.
태그를 선택자로 한 번에 선택
선택자로 선택한 태그를 제어
JQuery 사용방법
- JQuery홈페이지에서 다운로드 주소를 우클릭 다른이름소스저장
- 다운로드 후 프로젝트 안에 파일을 넣어준다.
JQuery01 요소취득
$( )안에 css 선택자 넣어주면 된다.
<!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>
//헤드태그 안에 JQuery추가
<script src="lib/jquery-3.6.0.min.js"></script>
</head>
<body>
<input type="text" id="apple" value="사과">
<input type="text" class="melon" value="멜론">
<input type="hidden" value="망고">
<script>
//ID로 가져오기
const $a1 = document.getElementById('apple');
const $a2 = $('#apple'); //JQuery
console.log($a1);
console.log($a2);
//class로 가져오기(값)
const b1 = document.querySelector('.melon').value;
const b2 = $('.melon').val();//JQuery
console.log(b1);
console.log(b2);
//속성값으로 가져오기(값)
const c1 = document.querySelector('input[type=hidden]').value;
const c2 = $('input[type=hidden]').val();//JQuery
console.log(c1);
console.log(c2);
</script>
</body>JQuery02 속성변경
//attr() 매개값 1개 값 가져오기,매개값 2개 변경
<head>
<script src="lib/jquery-3.6.0.min.js"></script>
</head>
<body>
<input type="text" id="test1" readonly>
<div id="test2">테스트2</div>
<div id="test3">테스트3</div>
<img src="#" alt="test" class="test4">
<button id="btn" class="btn btn-default">클래스 조작</button>
<script>
//속성 가져오기
const a1 = document.getElementById('test1').getAttribute('id');
const a2 = $('#test1').attr('id'); //attr('속성이름')은 요소의 속성을 확인.
console.log(a1);
console.log(a2);
//속성 값 변경
// document.getElementById('test1').setAttribute('id', 'melon');
$('#test1').attr('id', 'melon');
//attr() 매개값 1개 값 가져오기,매개값 2개 변경
//속성 여러개 추가 및 변경 가능. 배열 형태로 작성 { }
$('.test4').attr({
src: 'profile.png',
width: 100,
height: 100,
alt: 'hello world'
});
//html 삽입 함수
document.getElementById('test2').innerHTML = '<a href="#">lll</a>';
$('#test2').html('<a href="#">lll</a>');
//css 속성 추가 및 변경
document.getElementById('test3').style.background = 'green';
$('#test3').css('background', 'blue');
//class 추가
document.getElementById('btn').classList.add('myBtn');
$('.btn').addClass('myBtn2');
//class 삭제
document.getElementById('btn').classList.remove('myBtn');
$('.btn').removeClass('myBtn2');
//toggle(존재한다면 삭제, 존재하지 않는다면 추가)
$('.btn').toggleClass('btn');
</script>
</body>JQuery03 제이쿼리를 시작할 때 문법
<body>
<button type="button" id="btn">등록</button>
<script>
//페이지가 모두 로딩된 후에 실행하는 함수
//페이지 내에서 딱 1번만 사용이 가능하다.
/* window.onload = function() {
const $btn = document.getElementById('btn');
$btn.onclick = function() {
alert('버튼 클릭됨');
}
}*/
//JS의 윈도우 load 이벤트 구문을 대체하는 방법1. 잘안씀
/*$(window).on('load', function() {
const $btn = document.getElementById('btn');
$btn.onclick = function() {
alert('버튼 클릭됨');
}
}); */
//아래 두 코드를 자주 사용함.
//JS의 윈도우 load이벤트를 대체하는 방법2.
//페이지에서 제이쿼리 문법을 시작할 때 주로 많이 사용한다.
//여러 번 사용도 가능하다.
$(document).ready(function() {
$('#btn').click(function() {
alert('제이쿼리의 load');
});
});
//제이쿼리를 시작할 때 사용하는 또다른 문법(제일 간단함.)
$(function() {
//제이쿼리 문법을 작성..
})
</script>
</body>JQuery04 이벤트 등록
<body>
<button id="btn">이벤트 등록</button>
<input type="text" id="tag">
<script>
//스크립트 이벤트 등록
window.onload = function() {
const $btn = document.getElementById('btn');
$btn.onclick = function() {
alert('이벤트 등록!');
}
const $tag = document.getElementById('tag');
$tag.onchange = function() {
alert('변경 이벤트 등록!')
}
}
//제이쿼리 이벤트 등록
//선택자 뒤에 on이 빠진 트리거 작성하고 실행할 함수를 매개변수로 전달.
$(document).ready(function() {
$('#btn').click(function() {
alert('이벤트 등록!');
});
$('#tag').keyup(function() {
alert('키 입력 이벤트 등록');
});
});
</script>
</body>JQuery05 이벤트 전파
<body>
<ul id="test">
<li id="tag">태그1</li>
<li id="tag">태그2</li>
<li id="tag">태그3</li>
</ul>
<script>
//li태그에 모두 동일한 이벤트를 등록하기.
//부모태그에 이벤트를 등록하고 onclick시
//전달되는 이벤트 객체를 이용해서 확인하는 방식.
const $test = document.getElementById('test');
$test.addEventListener('click', function(e) {
if(!e.target.matches('#test > li')){
return;
}
// if(!e.target.tagName === 'li'){
// return;
// }
console.log(e.target.textContent);
});
//on(이벤트종류, 위임할 요소, 이벤트기능)
$('#test').on('click', 'li', function() {
//$(this)는 이벤트가 발생한 주체(태그,요소)를 의미.
console.log($(this).html());
});
</script>
<div id="box">
</div>
<script>
$(function() {
//on함수는 실행 순서에 영향을 받지 않고
//이벤트가 발생하는 순간 on함수에 지정한 이벤트를 발동시킨다.
//이는 실행 순서와 상관없는 비동기 통신을 진행할 때 유리하다.
$('#box').on('click', 'a', function(e) {
e.preventDefault();//태그 기능막기
alert('실행되나요??');
});
let str = '';
str += '<a href="#">태그1</a><br>';
str += '<a href="#">태그2</a><br>';
str += '<a href="#">태그3</a><br>';
$('#box').html(str);
});
</script>
</body><!DOCTYPE html>
<html lang="ko">
<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>
<script src="lib/jquery-3.6.0.min.js"></script>
<style>
.center{
text-align: center;
}
.content{
border: 1px solid #777;
}
.content,
.content .left,
.content .right{
width: 50%;
margin: 0 auto;
box-sizing: border-box;
padding: 5px;
}
.content .left,
.content .right{
float: left;
}
.left .inner,
.right .inner{
border: 1px solid #777;
height: 300px;
}
img{
width: 100%;
height: 100%;
}
.clearfix::after{
content: '';
display: block;
clear: both;
}
.memo {
width: 100%;
height: 250px;
box-sizing: border-box;
resize: none;
}
.dark{
background: black;
color: white;
}
.light{
background: white;
color: black;
}
</style>
</head>
<body>
<header>
<div class="center">
<h2>토글 형태 활용하기</h2>
<button id="btn1">어둡게 보기</button>
<button id="btn2" class="name">이름 보기</button>
<button id="btn3">메모장 모드</button>
</div>
</header>
<section>
<div class="content clearfix">
<div class="left">
<div class="inner"><img src="./img (2)/1.jpg" alt="pic"></div>
</div>
<div class="right">
<div class="inner">
<p>자바스크립트는 객체 기반의 스크립트 프로그래밍 언어이다. 이 언어는 웹 브라우저 내에서 주로 사용하며, 다른 응용 프로그램의 내장 객체에도 접근할 수 있는 기능을 가지고 있다. 또한 Node.js와 같은 런타임 환경과 같이 서버 사이드 네트워크 프로그래밍에도 사용되고 있다.</p>
<a href="http://www.naver.com">네이버로 이동</a>
</div>
</div>
</div>
</section>
<script>
$(document).ready(function() {
$('#btn1').click(function() {
$('#btn1').toggleClass('dark');
// if($('#bnt1').hasClass('dark')) 아래와 같은코드
if($('#btn1').attr('class') === 'dark') {
//다크모드
$('body').css('backgroung', 'black');
// $('p, h2, a').css('color', 'white');
//태그마다 다른 적용을 할때는 반복문을 이용.
$('p, h2, a').each(function(index, item) {
//each는 일반적인 반복 함수이다.
//앞의 선택자로 지목한 요소를 배열 형태로 받아와서
//index와 item(요소자체)로 나누어서 함수 내부에서 사용할 수 있게 한다.
$(item).css('color', 'white');
});
$(this).html('밝게 보기'); //이벤트가 발생한 주체
} else {
//라이트모드
$('body').css('background', 'white');
$('p, h2, a').css('color', 'white');
$(this).html('어둡게 보기');
}
});
$('#btn2').click(function() {
if($('#btn2').hasClass('name')) {
$('.inner > p').html('홍길동<br>20세<br>능력단위<br>Java, Oracle, Jsp, CSS, JavaScript');
$('.inner > a').css('display', 'none');
$(this).html('내용보기');
$(this).attr('class', 'cont');
} else {
$('.inner > p').html('<p>자바스크립트는 객체 기반의 스크립트 프로그래밍 언어이다. 이 언어는 웹 브라우저 내에서 주로 사용하며, 다른 응용 프로그램의 내장 객체에도 접근할 수 있는 기능을 가지고 있다. 또한 Node.js와 같은 런타임 환경과 같이 서버 사이드 네트워크 프로그래밍에도 사용되고 있다.</p>');
$('.inner > a').css('display', 'block');
$(this).html('이름보기');
$(this).attr('class', 'name');
}
});
});
</script>
</body>
</html>