[jQuery]
웹 프론트엔드 개발을 하다 보면 어쩔 수 없이 만나는 jQuery는 웹 페이지의 DOM(Document Object Model) 조작, 이벤트 처리, AJAX 통신 등을 쉽게 해주는 자바스크립트 라이브러리입니다.
지금 프론트엔드를 공부하면 React, Vue.js와 같이 상대적으로 신기술인 프레임워크로 접할 텐데 레거시 코드(Legacy Code)를 보게 되는 일은 언젠간 생길 겁니다... 그때를 대비하기 위해 jQuery를 살펴보겠습니다 🥸
[알아두면 좋은 용어]
📌 선택자(Selector)
선택자는 jQuery에서 가장 기본이 되는 개념입니다. 선택자를 통해 html 안에 있는 요소들에 접근할 수 있습니다.
예를 들어, A라는 id를 가진 버튼을 클릭했을 때 alert을 띄우는 것이죠. 대표적인 선택자는 다음과 같습니다.
- 태그 선택자 ➡️ $("h1")
- id 선택자 ➡️ $("#myId")
- class 선택자 ➡️ $(".myClass")
- 속성 선택자 ➡️ $("[type='text']")
📌 DOM(Document Object Model)
DOM은 html를 트리의 형태로 표현한 것입니다. jQuery는 DOM을 조작하여 특정 html 요소를 선택, 추가, 삭제, 수정을 할 수 있습니다.
📌 메서드(Method)
메서드는 jQuery 객체에 정의된 함수입니다. 선택된 특정 요소를 조작하거나 해당 정보를 얻을 수 있습니다.
대표적인 메서드로 attr(), text(), val() 등이 있습니다.
[jQuery 기본 문법]
<p>이것은 p 태그입니다.</p>
<div id="myDiv">이것은 div 태그입니다.</div>
<button id="myButton" class="myClass">이것은 button 태그입니다.</button>// 모든 <p> 태그 요소의 글자색을 빨간색으로 변경
$('p').css('color', 'red');
// <div> 태그 요소를 보이게 함
$('#myDiv').show();
// <div> 태그 요소를 숨김
$('#myDiv').hide();
// class가 "myClass"인 모든 요소에 highlight class 추가
$('.myClass').addClass('highlight');
[.html() vs .text() vs .val()]
<div id="myDiv">
<p>
이것은 p 태그입니다.
</p>
</div>
<input type="text" id="myInput" name="myInput" value="안녕">
📌 .html()
.html() 메서드는 선택한 요소의 html 내용을 가져오거나 설정할 수 있습니다.
html 태그를 포함함을 주의해야 합니다.
// 요소의 HTML 내용 가져오기
var content = $("#myDiv").html();
console.log(content); // "<p>이것은 p 태그입니다.</p>"
// 요소의 HTML 내용 설정하기
$("#myDiv").html("<p>이것은 새로운 p 태그입니다.</p>");
📌 .text()
.text() 메서드는 선택한 요소의 text 내용을 가져오거나 설정할 수 있습니다.
html 태그를 제외한 순수 text 내용만을 다룹니다.
// 요소의 텍스트 내용 가져오기
var content = $("#myDiv").text();
console.log(content); // "이것은 p 태그입니다."
// 요소의 텍스트 내용 설정하기
$("#myDiv").text("이것은 새로운 p 태그입니다.");
📌 .val()
.val() 메서드는 폼 요소(input, textarea, select 등)의 value를 가져오거나 설정할 수 있습니다.
폼 요소의 value 속성만을 다룹니다.
// 입력 필드의 값 가져오기
var inputValue = $("#myInput").val();
console.log(inputValue); // "안녕"
// 입력 필드의 값 설정하기
$("#myInput").val("안녕하세요");
