오늘은 일정이 있어, 스터티에 참여하지 못했지만, 일정이 끝난 후 숙제도 하고 강의도 들었다.
JQuery는 누군가 만들어 놓은 JavaScript를 사용하는 것과 같다.
const text = document.querySelector("#text");
text.style.color = "red";
document.querySelector("#txt").appendChild(text);JS만 사용한다면 위 코드처럼 작성하지만,
$("#text").css("color","red").appendTo("#txt");JQurey를 사용하면 이렇게 한 줄로 작성할 수 있다.
다만, JQuery는 JQuery의 라이브러리를 거치면서 네이티브 자바스크립트로 변환된 뒤 실행되기 때문에 좀 느리다.
실행이 많은 코드를 작성할 때 JQuery를 다수 사용하는 것보다 JS를 섞어서 쓰는 게 좋을 것 같다.
간단한 코드를 짤 때는 JQuery만 사용하는 게 빠르겠지만.
JQuery의 선택자는 CSS선택자와 동일하다.
$("p") = element 셀렉터
$("#id") = id 셀렉터
$(".class") = class 셀렉터열기 버튼을 누르면 포스트가 보이면서 텍스트 색깔이 바뀌고, 닫기 버튼을 누르면 포스트가 안 보이면서 다른 색으로 바뀌게 해봤다.
<button onClick="openBtn()"> 열기 </button>
<button onClick="closeBtn()"> 닫기 </button>post를 열고 닫을 때 사용되는 버튼이다. onclick이벤트로 열 때 실행될 함수와 닫을 때 실행될 함수를 넣었다.
function openBtn() {
$(`#post`).show()
$(`.mytitle`).css("color", "aqua");
}
function closeBtn() {
$(`#post`).hide()
$(`.mytitle`).css("color", "white");
}열고 닫을 때 실행될 함수다.
내일배움단에서는 보이기 숨기기만 실습했지만, 개인적으로 하고 있는 챌린지에서 css를 바꾸는 과제를 한 후라서,
JQuery로 css를 바꿀 수 있는 지 찾아보고 색깔을 바꿔보았는데, 더 배운다면 보다 복잡하고 다양한 코드를 짤 수 있을 것 같다.
JQuery만 사용해서 코드를 짜고 싶지만, 뭐든 기본이 중요하니까! JS를 더 공부하자.
