1. jQuery(제이쿼리)
: 오픈소스 기반의 자바스크립트 라이브러리이다.
제이쿼리를 이용하면 문서 객체 모델(DOM)과 이벤트(Event)에 관한 처리를 좀 더 쉽게 구현할 수 있다.
또한 Ajax 응용 프로그램도 제이쿼리를 통해 빠르게 개발이 가능하다.
2. 부트스트랩은 웹사이트를 쉽게 만들 수 있게 도와주는 HTML, CSS, JS 프레임워크이다.
3. 제이쿼리 버전
1.X : 익스플로러 6, 7, 8 버전에서의 동작까지 모두 지원하는 버전
2.X : 버전 1에서 지원하는 익스플로러 6, 7, 8 버전에 대한 지원을 중단한 버전
3.X : 제이쿼리의 표준, 기존 버전과의 호환성을 유지한 더욱 간결하고 빠르게 동작되도록 설계되어 있다,
익스플로러 9이상에서만 동작
4. jQuery 공식 사이트
5. jQuery 사용 방법
1) Download the compressed, production jQuery 3.5.1
다운받아 그대로 개발에 사용하는 파일
2) Download the uncompressed, development jQuery 3.5.1
다운받아 오픈소스 기반으로 수정하여 사용가능한 파일
3) CDN(Content Delivery Network)
<script src="https://code.jquery.com/jquery-3.5.1.min.js"
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
** jQuery 예시
① 다운로드 방식
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>라이브러리 연결</title>
<script src="./jquery-3.5.1.min.js"></script>
</head>
<body>
<h2>라이브러리 연결</h2>
<script>
'use strict';
$(function() {
console.log('jQery 시작!');
});
</script>
</body>
</html>
② CDN 방식
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>라이브러리 연결</title>
<!-- 다운로드 방식 -->
<!-- <script src="./jquery-3.5.1.min.js"></script> -->
<!-- CDN 방식 -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js"
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
</head>
<body>
<h2>라이브러리 연결</h2>
<script>
'use strict';
$(function() {
console.log('jQery 시작!');
});
</script>
</body>
</html>
6. 제이쿼리 문법
: $();로 시작하며 선택자와 동작함수로 이루어져 있다.
** 선택자 : 함수가 적용되기를 원하는 요소 및 속성,
동작함수 : 선택된 요소에 원하는 동작을 설정
** on() : addEventListener와 비슷한 함수, 이벤트와 이벤트 타겟을 연결
** css() 메소드 : css의 속성에 값을 설정, 속성에 대한 이름은 카멜표기법을 사용
└ 스네이크 표기법 : font_size, border_color / 카멜표기법(낙타표기법) : fontSize, borderColor
** 2_선택자.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>선택자</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
</head>
<body>
<h2>선택자</h2>
<p>
오픈소스 기반의 자바스크립트 라이브러리 입니다. <span>제이쿼리</span>를 이용하면 문서 객체 모델(DOM)과
이벤트(Event)에 관한 처리를 좀 더 쉽게 구현할 수 있습니다. 또한 Ajax 응용 프로그램도
<span>제이쿼리</span>를 통해 빠르게 개발이 가능합니다.
<h3 id="jq"><span>아이디</span>를 사용하여 특정 <span>HTML</span> 요소를 선택할 수 있습니다.</h3>
</p>
<script>
$(function() {
$('p').on('click', function() {
$('span').css('fontSize', '40px');
});
$('#jq').on('click', function() {
$('span').css('border', '3px solid deeppink');
});
});
/*
font-size : fint_size 스네이크 표기법 -> fontSize 카멜 표기법
*/
</script>
</body>
</html>** 속성 선택자
$("요소이름[속성='속성값']").동작함수();
$("h2[id='name']").css('fontSize', '40px');
** 3_속성선택자.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>속성 선택자</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
</head>
<body>
<h2>속성 선택자</h2>
<p><img src="./snow1.png" alt="snow1"></p>
<p><button>속성 변경</button></p>
<script>
$(function() {
$('button').on('click', function() {
$("img[alt='snow1']").attr("src", "./snow2.png");
});
});
</script>
</body>
</html>** 필터 선택자
:eq(n) 선택한 요소 중에서 인덱스가 n인 요소를 선택
:gt(n) 선택한 요소 중에서 인덱스가 n보다 큰 요소를 모두 선택
:lt(n) 선택한 요소 중에서 인덱스가 n보다 작은 요소를 모두 선택
:even 선택한 요소 중에서 인덱스가 짝수인 요소를 모두 선택
:odd 선택한 요소 중에서 인덱스가 홀수인 요소를 모두 선택
:first 선택한 요소 중에서 첫 번째 요소를 선택
:last 선택한 요소 중에서 마지막 요소를 선택
:animated 선택한 요소 중에서 애니메이션 효과가 실행 중인 요소를 모두 선택
:header 선택한 요소 중에서 h1부터 h6까지의 요소를 모두 선택
:lang(언어) 선택한 요소 중에서 지정한 언어의 요소를 모두 선택
:not(선택자) 선택한 요소 중에서 지정한 선택자와 일치하지 않는 요소를 모두 선택
:root 선택한 요소 중에서 최상위 루트 요소를 선택
:target 선택한 요소 중에서 웹 페이지 URI의 fragment 식별자와 일치하는 요소를 모두 선택
:contains(텍스트) 선택한 요소 중에서 지정한 텍스트를 포함하는 요소를 모두 선택
:has(선택자) 선택한 요소 중에서 지정한 선택자와 일치하는 자손 요소를 갖는 요소를 모두 선택
:empty 선택한 요소 중에서 자식 요소를 가지고 있지 않은 요소를 모두 선택
:parent 선택한 요소 중에서 자식 요소를 가지고 있는 요소를 모두 선택
** 4_필터선택자(1).html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>필터 선택자 - 1</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
</head>
<body>
<h2>필터 선택자 - 1</h2>
<header id="header">
<div class="logo">로고</div>
<div class="reg">회원가입</div>
<nav id="gnb">
<ul>
<li>메뉴1
<ul>
<li>서브메뉴 1-1</li>
</ul>
</li>
</ul>
</nav>
<div id="visual">
<p>메인 비주얼</p>
</div>
<div id="content">
<div class="left">왼쪽 영역</div>
<div class="right">오른쪽 영역</div>
<div class="center">가운데 영역</div>
</div>
<div id="banner">배너</div>
<footer id="footer">푸터</footer>
</header>
<script>
$(function() {
$('p').css('border', '3px solid red');
$('#gnb').css('border', '3px solid gold');
$('.logo').css('border', '3px solid blue');
$('#gnb > ul > li').css('border', '3px solid green');
$('#gnb > ul').css('border', '3px solid navy');
$('#visual + #content').css('border', '3px solid deeppink');
$('#visual ~ #footer').css('border', '3px solid purple');
$('div.reg').css('border', '3px solid orange');
$('.left,.right,#banner').css('border', '3px solid gray');
});
</script>
</body>
</html>
** 5_필터선택자(2).html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>필터 선택자 - 2</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<style>
table {
border-collapse: collapse;
width: 100%;
}
td {border: 3px solid orange;}
li {
color: white;
margin: 5px;
}
</style>
</head>
<body>
<h2>필터 선택자 - 2</h2>
<h1>제목 1</h1>
<h3>제목 2</h3>
<table>
<caption>필터 선택자</caption>
<colgroup>
<col>
<col>
<col>
</colgroup>
<tbody>
<tr>
<td>1번</td>
<td>2번</td>
<td>3번</td>
</tr>
<tr>
<td>4번</td>
<td>5번</td>
<td>6번</td>
</tr>
<tr>
<td>7번</td>
<td>8번</td>
<td>9번</td>
</tr>
<tr>
<td>10번</td>
<td>11번</td>
<td>12번</td>
</tr>
</tbody>
</table>
<ul>
<li class="bg">내용1</li>
<li class="bg">내용2</li>
<li class="bg">내용3</li>
<li>내용4</li>
</ul>
<script>
$(function() {
$('tr:even').css('background', 'red');
$('tr:odd').css('background', 'green');
$('td:first').css('background', 'yellow');
$('td:last').css('background', 'blue');
$(':header').css('background', 'orange');
$('li:eq(0)').css('background', 'navy');
$('li:gt(0)').css('background', 'purple');
$('li:lt(3)').css('border', '3px solid red');
$(':root').css('background', 'skyblue');
(function upDown() {
$('h3').slideToggle(2000, upDown)
})();
$(':animated').css('border', '3px solid deeppink');
});
</script>
</body>
</html>** getter 메소드, setter 메소드
: 선택자에 의해 선택된 요소의 값을 읽거나 설정하기 위해 제이쿼리 메소드를 통해 해당 요소에 접근해야 한다.
getter 메소드는 선택된 요소에 접근하여 그 값을 읽어오기 위한 메소드, 아무런 인수를 전달하지 않고 호출
setter 메소드는 선택된 요소에 접근하여 그 값을 설정하기 위한 메소드, 대입하고자 하는 값을 인수로 전달하여 호출
① html() : 해당 요소의 HTML 컨텐츠를 반환하거나 설정(js의 innerHTML과 같음)
② text() : 해당 요소의 텍스트 컨텐츠를 반환하거나 설정(js의 innerText와 같음)
③ width() : 선택한 요소 중에서 첫번째 요소의 너비를 픽셀 단위의 정수로 반환하거나 설정
④ height() : 선택한 요소 중에서 첫번째 요소의 높이를 픽셀 단위의 정수로 반환하거나 설정
⑤ attr() : 해당 요소의 명시된 속성의 속성값을 반환하거나 설정
⑥ val() : <form>요소의 값을 반환하거나 설정
** 6_Getter,Setter(1).html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>getter, setter - 1</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
</head>
<body>
<h2>getter, setter - 1</h2>
<p>버튼을 누르면 p 태그에 새로운 택스트를 설정합니다.</p>
<p><button>설정</button></p>
<p id="text"></p>
<script>
$(function() {
$('button').on('click', function() {
const newText = $('h2').html(); // getter
$('#text').html(newText); // setter
})
})
</script>
</body>
</html>
** 7_Getter,Setter(2).html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>getter, setter - 2</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
</head>
<body>
<h2>getter, setter - 2</h2>
<p>버튼을 누르면 div 요소의 크기를 읽어오거나 설정할 수 있습니다.</p>
<p><button id="getter">크기 읽어오기</button> <button id="setter">크기 줄이기</button></p>
<div id="box" style="width: 400px; height: 200px; background-color: gold;"></div>
<p id="text"></p>
<script>
$(function() {
$('#getter').on('click', function() {
const size = `너비는 ${$('#box').width()}px 이고, 높이는 ${$('#box').height()}px 입니다. <br>`
$('#text').html(size);
});
$('#setter').on('click', function() {
const w = $('box').width();
const h = $('#box').height();
$('#box').width(w/2).height(h/2); // 메서드 체이닝
const size = `줄임! 너비는 ${$('#box').width()}px 이고, 높이는 ${$('#box').height()}px 입니다. <br>`
$('#text').html(size);
})
})
</script>
</body>
</html>** 메소드 체이닝(method chaining)
getter 메소드는 선택된 요소의 값을 읽어서 그 값을 반환한다.
만약 선택한 요소가 여러개 존재하면 getter 메소드는 가장 '첫번째 요소'의 값만 반환한다.
하지만 setter 메소드는 선택된 모든 요소에 인수로 전달된 값을 설정한다.
그리고 선택된 모든 요소에 접근할 수 있는 또 다른 제이쿼리 객체를 반환한다.
반환된 제이쿼리 객체를 이용하면 세미콜론을 사용하지 않아도
바로 다른 제이쿼리 메소드를 점으로 연결해서 호출할 수 있다.
이런 방식의 여러 메소드가 연속적으로 호출되는 방식을 메소드 체이닝이라고 한다.
① add() : 특정 요소를 추가로 선택할 때 사용한다.
② children() : 매개변수로 전달된 요소를 하위 요소에서 찾아준다,
매개변수를 전달하지 않으면 하위 요소의 모든 요소를 선택한다.
③ addBack() : 현재 선택한 요소와 함께 이전에 선택한 요소도 선택하게 한다.
④ find() : 선택한 요소의 자손 요소 중에서 전달받은 선택자에 해당하는 자손 요소를 모두 선택한다,
별표를 인수로 전달하여 선택한 자손 요소를 모두 선택할 수도 있습니다.
⑤ end() : 현재의 연속적인 명령(메소드 체이닝)을 종료하고 선택 집합의 이전 요소를 찾아 반환한다.
⑥ is() : 인수로 전달된 요소가 존재하는지 여부(true, false)를 리턴한다.
** 8_메서드체이닝.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>메소드 체이닝</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
</head>
<body>
<h2>메소드 체이닝</h2>
<div id="m1">
<div>내용 1-1</div>
<p>내용 1-2</p>
</div>
<div id="m2">
<p>내용</p>
</div>
<div id="m3">
<span>내용 3-1</span><em>내용 3-2</em>
</div>
<div id="m4">
<p>내용 4</p>
</div>
<script>
$(function() {
$('#m1 > div').add('#m1 > p').css('border', '1px solid red');
$('#m2').children('p').addBack('border', '3px solid deeppink');
$('#m3').find('span').css('border', '3px solid deepskyblue').end().find('em').css('border', '1px solid yellow')
if($('#m4').children().is('p')) {
console.log('p 요소가 존재합니다.');
} else {
console.log('p 요소가 존재하지 않습니다.');
}
});
</script>
</body>
</html>
7. attribute와 property의 차이
<input type="checkbox" name="hobby" value="드라이브" checked>
<input type="checkbox" name="hobby" value="드라이브" checked="checked">
attr() : 해당 요소의 명시된 속성의 속성값을 반환하거나 설정
prop() : 제이쿼리 1.6부터 정의된 메소드,
선택한 요소 집합의 첫번째 요소의 지정된 프로퍼티 값을 반환하거나,
선택한 요소의 지정된 프로퍼티를 전달받은 값으로 설정
** 9_attr와prop의차이.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>attr와 prop의 차이</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
</head>
<body>
<h2>attr와 prop의 차이</h2>
<input type="checkbox" id="html"><label for="html">HTML</label>
<input type="checkbox" id="css"><label for="css">CSS</label>
<script>
$(function() {
console.log($('input:checkbox').eq(0).attr('checked'));
console.log($('input:checkbox').eq(0).prop('checked'));
$('input:checkbox').eq(0).attr('checked', 'checked');
$('input:checkbox').eq(1).prop('checked', true);
console.log($('input:checkbox').eq(0).attr('checked'));
console.log($('input:checkbox').eq(0).prop('checked'));
console.log($('input:checkbox').eq(1).attr('checked'));
console.log($('input:checkbox').eq(1).prop('checked'));
});
</script>
</body>
</html>
'웹_프론트_백엔드 > 프론트엔드' 카테고리의 다른 글
| 2021.01.17 (0) | 2021.01.17 |
|---|---|
| 2021.01.16 (0) | 2021.01.16 |
| 2020.09.27 (0) | 2020.09.29 |
| 2020.09.26 (0) | 2020.09.28 |
| 과제-주민등록번호 검증 페이지 작성 (0) | 2020.09.25 |