앞선 포스팅에서 순수 Vanila JS를 활용하여 직접 화면을 구성해봤습니다.
이번에는 해당 코드를 jQuery로 변경해서 구성해보고자 합니다.
jQuery 란?
클라이언트 측 HTML 스크립팅을 간소화하기 위해 고안된 크로스 플랫폼 자바스크립트 라이브러리입니다.
즉 기존의 순수 JS를 활용하여 Dom의 접근을 비교적 쉽게 사용할수 있도록 도와주는 라이브러이다.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>해당 import를 통해서 라이브러리를 가져온다 (from Google CDN)
앞의 vanila JS 코드들을 변경해보겠습니다.
greeting.js
$(document).ready(function () {
const loginForm = $("#login-form");
const loginInput = $("#login-form").find("input");
const greeting = $("#greeting");
const HIDDEN_CLASSNAME = "hidden";
const USERNAME_KEY = "username";
function onLoginSubmit(event) {
// 기본 동작 막기
event.preventDefault();
const usernameThatTheUserWrote = loginInput.val();
loginForm.addClass(HIDDEN_CLASSNAME);
localStorage.setItem(USERNAME_KEY, usernameThatTheUserWrote);
paintGreetings();
}
function paintGreetings() {
const username = localStorage.getItem(USERNAME_KEY);
greeting.text(`Hello ${username}`);
greeting.removeClass(HIDDEN_CLASSNAME);
}
const savedUsername = localStorage.getItem(USERNAME_KEY);
// console.log(savedUsername);
//즉 로컬스토리지에 로그인 기록이 없을때만 리스너를 등록하는것
if (savedUsername == null) {
// show the form
loginForm.removeClass(HIDDEN_CLASSNAME);
loginForm.on("submit", onLoginSubmit);
} else {
// show the greetings
paintGreetings();
}
});
- $(document).ready(function () {})
전체가 하나의 메소드에 담겨있다. HTML이 다 로드 된 후에 JS를 설정한다.
- querySelector
const loginForm = document.querySelector("#login-form");
const loginInput = loginForm.querySelector("input"); const loginForm = $("#login-form");
const loginInput = $("#login-form").find("input");- value
const usernameThatTheUserWrote = loginInput.value;const usernameThatTheUserWrote = loginInput.val();- class
loginForm.classList.add(HIDDEN_CLASSNAME);
greeting.classList.remove(HIDDEN_CLASSNAME);loginForm.addClass(HIDDEN_CLASSNAME);
greeting.removeClass(HIDDEN_CLASSNAME);- Event
loginForm.addEventListener("submit", onLoginSubmit);loginForm.on("submit", onLoginSubmit);clock.js
const clock = $("h2#clock");
function getClock() {
const date = new Date();
const hours = String(date.getHours()).padStart(2, "0");
const minutes = String(date.getMinutes()).padStart(2, "0");
const seconds = String(date.getSeconds()).padStart(2, "0");
clock.text(`${hours}:${minutes}:${seconds}`);
}
// 처음 시작 딜레이를 막기위함
getClock();
setInterval(getClock, 1000);
console.dir(clock.text());
- querySelector
부모를 찾을때는 그냥 똑같이 접근한다
이후 부모의 자식을 찾을때 find라는 메서드를 활용하는 것이다.
- text
clock.innerText = `${hours}:${minutes}:${seconds}`;
console.log(clock.innerText);clock.text(`${hours}:${minutes}:${seconds}`);
console.log(clock.text());text() 만 사용하면 우선 적으로 객체를 들고온다고 생각하자 !
따라서 값을 바꾸고 싶을때나 text 안에 일정 값을 넣는다 !
qoutes.js
const quotes = [
{
quote: "The way to get started is to quit talking and begin doing.",
author: "Walt Disney",
},
// 이하 생략...
];
const quote = $("#quote span:first-child");
const author = $("#quote span:last-child");
// 내가 원하는 숫자를 곱하면 0~ 숫자까지 랜덤으로 나온다.
const todaysQuote = quotes[Math.floor(Math.random() * quotes.length)];
quote.text(todaysQuote.quote);
author.text(todaysQuote.author);
console.log(quote.text());
- css 선택자
// 직접 CSS 선택자 사용하여 자식 요소들을 모두 선택
const elements = $(".parent .child");
// find() 메소드를 사용하여 자식 요소들을 찾음
const parent = $(".parent");
const childElements = parent.find(".child");즉 선언 했던걸 사용하다가 그 안에를 들어갈때 find를 사용합니다.
const images = ["1.jpeg", "2.jpeg", "3.jpeg"];
const chosenImage = images[Math.floor(Math.random() * images.length)];
const bgImage = $("<img>");
bgImage.attr("src", `img/${chosenImage}`);
$("body").append(bgImage);
<img src="img/2.jpeg">아래의 3개의 코드를 통해서 위 코드가 만들어진다.
쉽게 생각하자 →
$("<img>")이는 태그 자체를 추가한다.
jsx <img>
attr() 메소드를 사용하여 src 속성을 설정
<img src=”img/2.jpeg><body> <img src=”img/2.jpeg> </body>
해당 순서로 HTML 요소가 만들어진다.
const toDoForm = $("#todo-form");
const toDoInput = $("#todo-form input");
const toDoList = $("#todo-list");
const TODOS_KEY = "todos";
let toDos = [];
function saveToDos() {
localStorage.setItem(TODOS_KEY, JSON.stringify(toDos));
}
function deleteTodo(event) {
const li = $(event.target).parent(); // jQuery로 li 요소 선택
li.remove();
toDos = toDos.filter((toDo) => parseInt(toDo.id) !== parseInt(li.attr("id"))); // li의 id를 jQuery로 얻음
saveToDos();
}
function paintToDo(newTodo) {
const li = $("<li>"); // jQuery로 li 요소 생성
li.attr("id", newTodo.id); // li 요소에 id 속성 추가
const span = $("<span>");
span.text(newTodo.text); // span 요소의 텍스트 설정
const button = $("<button>");
button.text("x");
button.click(deleteTodo); // click 이벤트 리스너 추가
li.append(span, button); // li 요소에 span과 button 추가
toDoList.append(li); // toDoList에 li 요소 추가
}
function handleToDoSubmit(event) {
event.preventDefault();
const newTodo = toDoInput.val(); // jQuery로 input 요소의 값 가져오기
toDoInput.val("");
const newTodoObj = {
text: newTodo,
id: Date.now(),
};
toDos.push(newTodoObj);
paintToDo(newTodoObj);
saveToDos();
}
toDoForm.submit(handleToDoSubmit); // submit 이벤트 리스너 추가
const savedToDos = localStorage.getItem(TODOS_KEY);
if (savedToDos !== null) {
const parseToDos = JSON.parse(savedToDos);
toDos = parseToDos;
parseToDos.forEach(paintToDo);
}
앞선 방법과 동일하게
1. val()
2. click()
직접 jQuery로 변경해보니 위 vanila js 보다 훨신 더 편리했다.
HTML 접근 뿐만 아니라. CSS 요소도 하나의 명령어로 변경하고 개발자 입장에서 개발 속도와 가독성이 증가하는 장점이 있습니다.
이후 
JS를 활용한 프로젝트가 필요하다면 한번 jQuery를 사용해보고자 합니다.
라곰