반응형
jQuery
- js 기반으로 간편하게 사용할 수 있게 단순화 시킨 오픈소스 기반의 js 라이브러리
라이브러리와 프레임워크 비교
라이브러리
- 자주 사용하는 기능들을 모아두었다가 필요할 때 가져다 쓸 수 있도록 한 자원들의 묶음
- ex) Python - pandas, NumPy, js - Chart.js, Moment.js ...
프레임워크
- 특정 개념들의 추상화를 제공하는 여러 클래스나 컴포넌트로 구성
- 추상적인 개념들이 문제를 해결하기 위해 같이 작업하는 방법을 정의
- 컴포넌트들은 재사용이 가능
- ex) Spring, Vue.js, React, Flask ....
- uncompressed, minified : 일반 패키지
- uncompressed : 압축되어 있지 않은 공백과 들여쓰기가 되어 있는 형태
- minified : 압축된 형태로 한 줄로 와다다 쓰여 있는 형태 ( 용량이 더 작음 )
- slim, slim minified : slim 패키지 ( 일반 패키지에서 몇몇 기능들이 제거된 형태 )
jQuery 선택자
- $('선택자').동작함수 로 jQuery를 사용할 수 있다
- 위의 코드는 클래스 dt를 선택하고 click 이벤트를 사용해서
미리 선언된 date 변수안에 클릭한 값의 데이터를 넣고
date 클래스의 value를 date변수 값을 넣겠다는 뜻
jQuery 자주 사용되는 Method
- val() - value
const value = $('input').val();
alert(value);
- css() - css속성 설정이 가능한 메서드
$('span').css({
fontSize: '40px', // 모든 span에 대해 폰트 크기변경
color: 'blue', // 모든 span에 대해 폰트 색상 변경
});
- attr() - 선택된 태그의 속성을 변경할 수 있게 하는 메서드
function changeAttrJquery() {
$('a').attr('href', 'https://www.naver.com');
}
- text() - 선택한 요소 안의 내용을 가져오거나, 다른 내용으로 바꾸는 메서드 ( val()와 비슷하지만 다르다 )
- https://secretroute.tistory.com/9
- 이분 내용을 참고하면 좋을 것 같다
jQuery : val(), text(), html()의 차이
참고 : http://api.jquery.com ★ val() : Form Element 의 값을 받아오는데 쓰인다. (주로 input 이나 textarea 정도?) - 주의해야할 점은 Form Element 이외의 값은 받아오질 못한다는 점. ★ val(value) : value의 경우 stri
secretroute.tistory.com
function changeTextJquery() {
$('.p-text').text('jqueryyy');
}
- html() - js의 innerHTML과 같은 역할
function changeHtmlJS() {
// 퀴즈: p-html 클래스 갖는 요소 선택하고, <h3>javascript</h3>로 변경
const pHtml = document.querySelector('.p-html');
pHtml.innerHTML = '<h3>javascript</h3>';
}
function changeHtmlJquery() {
$('.p-html').html('<h3>jquery</h3>');
}
- append() - 선택한 요소의 자식요소 중 마지막에 추가하는 메서드
function appendJquery() {
// const li = document.createElement('li');
// li.innerText = '마지막으로 추가된 js';
// $('.colors').append(li);
$('.colors').append('<li>마지막으로 추가된 js</li>');
}
- prepend() - 선택된 요소의 자식 요소 중 맨 처음에 추가하는 메서드
function prependJquery() {
// const li = document.createElement('li');
// li.innerText = '처음으로 추가된 js';
// $('.colors').prepend(li);
$('.colors').prepend('<li>처음으로 추가된 js</li>');
}
- before() - 선택된 요소의 이전 형제로 추가하는 메서드
function beforeJquery() {
$('.green').before('<li>바로 이전 형제 요소</li>');
}
- after() - 선택된 요소의 다음 형제로 추가하는 메서드
function afterJquery() {
$('.green').after('<li>바로 다음 형제 요소</li>');
}
- remove() - 선택된 요소 삭제하는 메서드
function removeJquery() {
$('#li2').remove();
}
- empty() - 선택한 요소의 자식을 지우는 메서드
function emptyJquery() {
$('ul.nums').empty();
}
javascript vs jQuery Event
현재 colorJs의 type이 유사객체이기 때문에 유사객체엔 이벤트를 넣을 수 없으므로 각 요소 하나하나에 넣어줘야한다
그렇기 때문에 forEach로 바꿔서 요소 하나하나에 이벤트를 넣어준다
보다시피 자바스크립트의 코드보다 jQuery의 코드가 훨씬 간결하고 편리하다
jQuery Event를 이용한 스케쥴표 만들기
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<!-- jquery CDN -->
<script
src="https://code.jquery.com/jquery-3.7.0.min.js"
integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g="
crossorigin="anonymous"
></script>
<script defer src="/06-jquery/js/jquery_ex3.js"></script>
<style>
p {
color: black;
font-size: 5px;
}
</style>
</head>
<body>
<div>
<label for="date"
>날짜 :
<input type="text" class="date" />
</label>
<br />
<label for="content">
내용 :
<input type="text" class="content" />
</label>
<br />
<button id="btn">작성</button>
</div>
<div>
<table
id="table1"
border="1"
align="center"
cellspacing="0"
cellpadding="10"
borderColor="white"
>
<caption>
<h3 style="color: green">2023년 7월</h3>
</caption>
<tr>
<td style="color: red">일</td>
<td>월</td>
<td>화</td>
<td>수</td>
<td>목</td>
<td>금</td>
<td>토</td>
</tr>
<tr>
<td colspan="6"></td>
<td style="color: blue">1</td>
</tr>
<tr>
<td style="color: red">2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td style="color: blue">8</td>
</tr>
<tr>
<td style="color: red">9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td style="color: blue">15</td>
</tr>
<tr>
<td style="color: red">16</td>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
<td>21</td>
<td style="color: blue">22</td>
</tr>
<tr>
<td style="color: red">23</td>
<td>24</td>
<td>25</td>
<td>26</td>
<td>27</td>
<td>28</td>
<td style="color: blue">29</td>
</tr>
<tr>
<td style="color: red">30</td>
<td colspan="5">31</td>
</tr>
</table>
</div>
</body>
</html>javascript
// 미리 만들어진 td블럭에 id를 부여하기 위한 td 변수 생성
const td = document.querySelectorAll('td');
// 날짜 값을 받아오기 위한 date 변수 선언
let date;
// 존재하는 td 블럭에 dt class 부여
td.forEach((td) => {
td.setAttribute('class', 'dt');
});
// 클래스 dt를 클릭하면 dt에 들어있는 날짜를 받아오는 이벤트
$('.dt').on('click', function () {
date = $(this);
$('.date').val(date.text());
});
// 버튼을 클릭하면 해당 날짜에 입력한 내용을 삽입 후 input값 초기화 하는 이벤트
$('#btn').on('click', function () {
let content = $('.content').val();
date.append(`<p>${content}</p>`);
$('.date').val('');
$('.content').val('');
});
반응형
'SeSAC' 카테고리의 다른 글
| [새싹X코딩온] 풀스택 4주차 회고록 - 2 | Node.js, javascript 심화 (0) | 2023.08.13 |
|---|---|
| [새싹X코딩온] 풀스택 4주차 회고록 - 1 | 클라이언트와 서버 (0) | 2023.08.12 |
| [새싹X코딩온] 풀스택 3주차 회고록 - 1 | Bootstrap Grid System (0) | 2023.08.01 |
| [새싹X코딩온] 풀스택 2주차 회고록 - 2 | javascript 과제 (0) | 2023.07.30 |
| [새싹X코딩온] 풀스택 2주차 회고록 - 1 | CSS, javascript (0) | 2023.07.25 |
