자바스크립트(JavaScript) | JQuery 선택자(Selector) by id, class, attribute(속성)

---

자바스크립트(JavaScript) | jQuery 선택자(Selector) by id, class, attribute(속성)

id · class · attribute(속성)으로 HTML element 검색하는 방법 정리

---

(최종 업데이트: 2025년 11월 24일)

🔹 1. id로 검색

가장 많이 사용하는 jQuery 선택자는 id 선택자입니다. HTML에서 id는 문서 내에서 한 번만 등장해야 하므로, 보통 한 개의 요소만 선택할 때 사용합니다.

기본 형태 : $('#id값');
예를 들어 id="usr_nm"인 요소를 찾으려면 $('#usr_nm'); 처럼 작성합니다.

참고로, HTML에 중복된 id가 있을 경우 jQuery는 첫 번째 element만 선택합니다.

🔹 2. class로 검색

여러 개의 요소를 한꺼번에 선택할 때는 class 선택자를 사용합니다.

기본 형태 : $('.class명');
예를 들어 class="usr_nm"인 요소들을 모두 선택하려면 $('.usr_nm'); 처럼 작성합니다.

🔹 3. attribute(속성)로 검색

id나 class가 없거나, name · value 같은 속성으로 선택해야 할 때는 attribute 선택자를 사용합니다.

기본 형태 : $('[속성key="속성value"]');
예를 들어 name="usr_nm"인 요소를 찾으려면 $('[name="usr_nm"]'); 처럼 사용할 수 있습니다.

태그명과 함께 쓰거나, 여러 속성을 동시에 걸 수도 있습니다.
예) $('input[name="usr_nm"]');, $('input[name="usr_nm"][value="usr01"]');

💡 예제 HTML 코드

아래와 같이 하나의 input 태그에 id, class, name, value 속성이 모두 있다고 가정해 보겠습니다.

<input type="text" id="usr_nm" class="usr_nm" name="usr_nm" value="usr01"/>

🧪 jQuery 선택자 예제 코드

위 input 태그를 기준으로, id · class · attribute 선택자를 각각 사용하는 예제입니다.

// ------------------------------
// 1. id로 검색
// ------------------------------
var $usrNm = $('#usr_nm');
 
 
// ------------------------------
// 2. class로 검색
// ------------------------------
var $usrNm = $('.usr_nm');
 
 
// ------------------------------
// 3. attribute(속성)로 검색
// ------------------------------
// 속성으로 검색
var $usrNm = $('[name="usr_nm"]');
 
// tag명 + 속성으로 검색
var $usrNm = $('input[name="usr_nm"]');        
 
// 다중 속성으로 검색
var $usrNm = $('input[name="usr_nm"][value="usr01"]');

자바스크립트(JavaScript) | JQuery each문 break, contiune

헷갈리는 return true; return false;

자바스크립트(JavaScript) | 날짜 유효성 검사(윤달 포함) YYYYMMDD, YYYY-MM-DD

윤달을 포함한 날짜의 유효성 검사