[2026.04.08] TIL - 8일차 jQuery (jQuery 기초와 선택자, DOM 탐색)

 

 

1. jQuery를 사용하는 방법

jQuery는 크게 두 가지 방식으로 사용할 수 있다.

1) 파일을 직접 받아서 외부 스크립트로 연결하는 방법

 

https://jquery.com/

jQuery

사이트에 들어가 다운로드를 눌러 파일을 직접 다운받는다.

다운로드를 누르면 검은 화면에 코드가 있는데 전체를 복사한다음 js파일에 붙여넣어 사용할 수 있다. 

사용방법은 <script> 태그에

<script src="../_jq/jquery-4.0.0.min.js">

파일경로를 붙여넣으면 사용할 수 있다.

 

2) CDN 링크를 사용하는 방법

<script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>

와 같이 외부 링크를 바로 연결하는 방식이다.

 

---

2. $와 jQuery

jQuery에서는 $와 jQuery 가 같은 의미로 사용된다.

즉, 

$("선택자").함수()

이 형태가 jQuery의 기본 사용 방식이다.

 

선택자를 이용해 원하는 요소를 찾고, 그 뒤에 메소드를 붙여 스타일을 바꾸거나 이벤트를 걸 수 있다.

jQuery를 사용하면 기존 JavaScript보다 코드가 짧아진다는 점이 장점이다.

 

 

---

3. 페이지 로드 후 실행하는 방식

기존 JavaScript에서는 보통 window.onload를 사용해서 페이지가 모두 로드된 뒤 코드를 실행했다.

 

jQuery에서는 보통

 

$(function(){ } )

형식을 사용한다.

 

이 방식도 결국 HTML 요소가 다 준비된 뒤 실행된다는 의미이고, jQuery에서는 더 간단하게 많이 쓰는 표현이다.

 

---

 

4. jQuery 선택자

오늘 가장 많이 본 개념은 선택자였다.

jQuery는 CSS 선택자처럼 요소를 찾을 수 있어서 문법이 익숙하고 직관적이다.

1) 기본 선택자

• 태그 선택자 - $("span")

• id선택자 - $("#t1")

• class 선택자 - $(".t2")

이 방식으로 원하는 요소를 쉽게 찾을 수 있다.

 

2) 관계 선택자

• 하위 선택자 - $("li span")
• 자식 선택자 - $("li > span")

부모-자식 관계에 따라 더 정확하게 요소를 찾을 수 있다.

 

3) 순서 선택자

• :nth-child(n)
• :first-child
• :last-child

 

형제 요소들 중에서 몇 번째인지 기준으로 요소를 선택할 때 사용한다.

 

4) 속성 선택자

속성값을 기준으로 요소를 선택하는 방법도 있다.

 

$("img[title = 'img02']")

처럼 작성하면 특정 속성값을 가진 요소만 선택할 수 있다.

 

---

5. jQuery로 스타일과 속성 바꾸기

jQuery에서는 선택한 요소를 바로 찾아서 스타일을 바꾸거나 속성을 수정할 수 있다.

기존 JavaScript에서는 style.backgroundColor = ..., setAttribute(...)처럼 하나씩 길게 써야 했는데,

jQuery에서는 css(), attr(), text(), val(), prop() 같은 메소드로 훨씬 간단하게 처리할 수 있다.
오늘 예제에서도 이미지 크기 변경, 텍스트 변경, 입력값 읽기, 체크 상태 변경 같은 기능을 전부 이 방식으로 다뤘다.

1) .css()

스타일을 바꿀 때 사용하는 메소드이다.
예제에서는 li의 배경색을 바꾸거나, 이미지 크기와 투명도를 조절할 때 사용했다.

2) .attr()

HTML 속성값을 바꿀 때 사용한다.
예제에서는 이미지의 src를 변경해서 화면에 보이는 이미지를 바꾸는 데 사용했다.

3) .text() 

.text()는 요소 안의 글자를 넣을 때 사용한다.

 

4) .val()

.val()은 input 값처럼 사용자가 입력한 값을 읽을 때 사용한다.
예제에서는 선택자 설명 문구를 출력하거나, text input과 radio 값을 읽는 데 사용했다.

5) .prop()

현재 상태를 다룰 때 많이 사용한다.
특히 checkbox의 체크 상태처럼 현재 값이 중요한 경우에 쓰인다.
예제에서는 전체 선택 체크박스를 처리할 때 checked 상태를 바꾸는 데 사용했다.

 

---

 

6. jQuery 이벤트 처리

jQuery에서는 이벤트를 등록할 때 .on()을 많이 사용한다.

예를 들면

• click
• submit

이런 이벤트를 간단하게 연결할 수 있다.

폼 제출 전에 값이 비어 있으면 제출을 막거나,
버튼 클릭 시 체크된 항목을 읽어오는 방식 등을 확인했다.

또한 e.preventDefault()를 사용하면
submit의 기본 동작처럼 원래 실행되던 동작을 막을 수 있다는 점도 같이 나왔다.

---

7. 입력 요소 다루기

오늘은 input, radio, checkbox처럼 사용자 입력 요소를 jQuery로 다루는 방식도 같이 정리했다.

1) text input 값 읽기

$("input:text").val()
처럼 작성하면 텍스트 입력값을 가져올 수 있다.

2) radio 선택값 읽기

radio도 선택된 값의 value를 읽어와서 사용할 수 있다.

3) checkbox 선택 상태 확인

$("input[name=chk]:checked") 처럼 :checked 선택자를 사용하면 현재 체크된 항목만 가져올 수 있다.

4) .each()와 .length

• .each()는 여러 요소를 하나씩 반복할 때
• .length는 선택된 요소의 개수를 확인할 때 사용한다

---

8. jQuery 탐색 메소드

오늘 후반부는 선택자에서 더 나아가
선택한 요소들 중에서 원하는 요소를 다시 찾아가는 메소드들이 중심이었다.

1) .eq()

선택한 요소들 중 특정 인덱스의 요소를 선택한다.

2) .slice()

선택한 요소들 중 일정 범위를 잘라서 선택한다.

3) .first(), .last()

첫 번째 요소, 마지막 요소를 선택할 때 사용한다.

4) .find()

선택한 요소의 자손 요소 중에서 다시 찾는다.

5) .children()

선택한 요소의 직계 자식 요소만 찾는다.
find()와 달리 바로 아래 자식만 본다는 차이가 있다.

6) .parent(), .parents()

부모 요소나 조상 요소를 찾을 때 사용한다.

7) .next()

다음 형제 요소를 찾을 때 사용한다.

---

9. add()와 is()

마지막 예제에서는 add()와 is()도 같이 나왔다.

1) .add()

현재 선택한 요소에 다른 선택자 결과를 추가해서 같이 처리할 수 있게 해준다.

2) .is()

현재 선택한 요소가 특정 조건이나 선택자와 일치하는지 확인할 때 사용한다.

 

또한 화살표 함수에서는 이벤트가 발생한 요소를 this로 바로 접근하기 어렵기 때문에, 매개변수로 전달받은 이벤트 객체 e를 사용하고 e.target으로 실제 클릭된 요소를 확인했다. 반면 일반 함수에서는 this만으로도 현재 요소에 접근할 수 있다.

---

10. 정리 및 느낀점

오늘은 jQuery를 사용하는 방법부터 시작해서
선택자 문법, 스타일과 속성 변경, 이벤트 처리, 입력 요소 선택, DOM 탐색 메소드까지 한 번에 정리한 날이었다.

 

전체적으로 보면 기존 JavaScript에서 길게 작성하던 선택과 조작을 jQuery에서는 더 짧고 간단하게 표현할 수 있다는 점이 가장 크게 느껴졌다.

기존에 사용하던 방식과는 다른 새로운 문법을 배운 날이라 아직 익숙하지 않고 헷갈리는 부분도 많다.
그래도 반복해서 사용하다 보면 기존 JavaScript보다 훨씬 간단하게 해결할 수 있는 부분들이 많다는 게 보여서 더 익숙해져야겠다는 생각이 들었다.

 

특히 $("#selTd").hide();처럼 코드 한 줄만으로 요소를 바로 숨길 수 있다는 점이 새로웠다.
기존에는 HTML에서 숨기려면 style="display:none;"을 직접 쓰거나, JavaScript에서는 element.style.display = "none"처럼 길게 작성했는데, jQuery에서는 hide()처럼 바로 기능으로 쓸 수 있어서 훨씬 간단하게 느껴졌다.

이런 부분들을 보면서 jQuery는 단순히 문법이 다른 게 아니라, 기존 JavaScript에서 하던 작업을 더 짧고 편하게 처리할 수 있도록 도와주는 도구라는 생각이 들었다.