jQuery 주요 요소 접근 하기

jQuery 선택자

jQuery는 간단한 문법으로 HTML 요소를 선택하고 조작할 수 있는 강력한 도구를 제공합니다.

이를 활용하면 웹 개발자가 효율적으로 DOM을 다루고 사용자 경험을 개선할 수 있습니다.

jQuery 선택자는 다양한 방식으로 요소를 찾고 스타일을 적용하거나 동작을 추가할 수 있도록 지원합니다.

이번 글에서는 jQuery 선택자 및 접근 방법에 대해 알아보겠습니다.

---

jQuery 선택자의 기본 문법

jQuery 선택자의 기본 문법은 다음과 같습니다.

$(selector).action();

구성 요소

• $: jQuery를 호출하는 기본 표기입니다.
• selector: 선택하려는 HTML 요소를 지정합니다.
• action(): 선택된 요소에 수행할 동작(메서드)을 정의합니다.

 

요소(element) 선택자

HTML 태그 이름으로 요소를 선택합니다.

$("tagName")

예제

// 모든 <p> 태그의 텍스트 색상을 파란색으로 변경합니다.

$("p").css("color", "blue");

 

// 모든 <div> 태그를 숨긴다.

$("div").hide();

 

 

 

ID 선택자

특정 ID를 가진 요소를 선택합니다. ID는 고유하므로 한 번에 하나의 요소만 반환됩니다.

$("#idName")

예제

// ID가 'header' 인 요소의 텍스트를 변경합니다.

$("#header").text("Welcome!");

 

// ID가 'name' 인 요소의 값을 변경합니다.

$("#name").val("HONG KIL DONG");

 

// ID가 'faqContents' 로 시작하는 요소를 숨긴다.

$('[id^="faqContents"]').hide();

 

// ID가 'faqContents0' 인 요소를 노출한다.
$('#faqContents0').show();

 

 

 

클래스(class) 선택자

특정 클래스를 가진 모든 요소를 선택합니다.

$(".className")

예제

// 'highlight' 클래스를 가진 요소의 배경색을 노란색으로 설정합니다.

$(".highlight").css("background-color", "yellow");

 

// 'active' 클래스를 가진 요소을 보이도록 합니다.

$(".active").show();

 

 

속성(attribute) 선택자

특정 속성을 가진 요소를 선택합니다.

속성 값에 따라 정교한 선택이 가능합니다.

주요 구문

• 속성 존재 여부: [attribute]
• 특정 값 일치: [attribute='value']
• 값 포함 여부: [attribute*='value']
• 값 시작 여부: [attribute^='value']
• 값 끝 여부: [attribute$='value']

예제

// href 속성이 '#'인 모든 링크의 텍스트 색상을 빨간색으로 변경합니다.

$("a[href='#']").css("color", "red");

 

// id 속성이 'jelly' 시작하는 모든 링크의 텍스트 색상을 빨간색으로 변경합니다.

$("a[id^='jelly']").css("color", "red");

 

// text 속성인 요소 반복

$('input[type="text"]').each(function (idx, el) {
    // console.log("input list " + idx + ":" + $(this).attr('id') + '=' + $(this).val())
});

// hidden 속성인 요소 반복
$('input[type="hidden"]').each(function () {
    // console.log("o:" + $(this).attr('id') + ":" + $(this).val());
});

 

// hidden 속성이며 id가 corp 시작하는 요소 반복
$('input:hidden[id^="corp"]').each(function () {
    // console.log("o2:" + $(this).attr('id') + ":" + $(this).val());
});

// radio 속성이며 체크된 요소 반복
$('input[type="radio"]:checked').each(function () {
    // console.log($(this).attr('name') + ":" + $(this).val());
});

 

// select 요소 반복
$('select').each(function (idx, el) {
    // console.log("select list " + idx + ":" + $(this).attr('id') + '=' + $(this).val());
});

 

 

 

다중 선택자

여러 요소를 동시에 선택할 수 있습니다.

$("selector1, selector2, ...")

예제

// 모든 <h1>과 <p> 태그의 글꼴을 Arial로 변경합니다.

$("h1, p").css("font-family", "Arial");

 

 

계층 선택자

요소 간 부모-자식 관계를 기반으로 선택합니다.

주요 구문

• 직접 자식: parent > child
• 모든 자손: ancestor descendant

예제

// <ul> 태그의 직접 자식인 <li> 태그에서 불릿 스타일을 제거합니다.

$("ul > li").css("list-style", "none");

 

// 모든 <div> 내의 <span> 태그를 초록색으로 설정합니다.

$("div span").css("color", "green");

 

// seqNo 클래스의 자손 중 span 요소 반복 
$(".seqNo").find("span").each(function (idx, el) {
    // $(this), $(el) 동일하게 사용 가능하다.

    // console.log('[' + idx + ':' + $(el).text() + ']');
    // console.log('[' + idx + ':' + $(this).text() + ']');
});

 

 

필터 선택자

특정 조건에 따라 요소를 필터링합니다.

주요 구문

• 짝수/홀수: :even, :odd
• 첫 번째/마지막: :first, :last
• 특정 순서: :nth-child(n), :nth-of-type(n)

예제

// 짝수 번째 태그의 배경색을 회색으로 설정

$("tr:even").css("background-color", "#f2f2f2");

---

jQuery input 

$('#inputName').val(); // 입력된 값을 읽늗다.

$('#inputName').val('HONG KIL DONG'); // HONG KIL DONG 으로 입력값 설정한다.

$('#inputName').prop('disabled', true); // disabled 상태로 설정한다.

$('#inputName').prop('disabled'); // disabled 여부 리턴한다.

$('#inputName').prop('readonly', true); // readonly 상태로 설정한다.

$('#inputName').prop('readonly'); // readonly 여부를 리턴한다.

 

---

jQuery select

$('#selectName').val(); // 선택된 값

$('#selectName').val('02'); // 옵션 '02' 값으로 설정

$('#selectName option:selected').val(); // 선택된 값

$('#selectName option:selected').text(); // 선택된 텍스트

 

---

jQuery checkbox

$('input:checkbox[name="checkCorpKind"]').is(':checked'); // 체크 여부

$('input:checkbox[name="checkCorpKind"]').length; // 전체 개수

$('input:checkbox[name="checkCorpKind"]:checked').length; // 체크된 개수

let checks = $.map($('input:checkbox[name="checkCorpKind"]:checked'), (el) => $(el).val()); // Array [A,B,C]

let joinChecks = checks.join(','); // String "A,B,C"

$('input:checkbox[id="checkCorpKind01"]').prop('checked', false); // 체크 해제

$('input:checkbox[id="checkCorpKind01"]').prop('checked', true); // 체크

$('input:checkbox[id="checkCorpKind01"]').prop('checked'); // 체크 여부

$('#checkCorpKind01').prop('checked', true);

$('#checkCorpKind01').prop('checked');

 

---

jQuery radio

$('input:radio[name="radioCorpType"]').is(':checked'); // 체크 여부

$('input:radio[name="radioCorpType"]').length; // 전체 개수

$('input:radio[name="radioCorpType"]:checked').length; // 체크된 개수

let checked = $('input:radio[name="radioCorpType"]:checked').val(); // 체크된 값

$('input:radio[id="radioCorpType01"]').prop('checked', false); // 체크 해제

$('input:radio[id="radioCorpType01"]').prop('checked', true); // 체크

$('input:radio[id="radioCorpType01"]').prop('checked'); // 체크 여부

$('#radioCorpType01').prop('checked', true);

$('#radioCorpType02').prop('checked');

---

jQuery common

$('#inputName').is(':visible'); // input 요소 노출 여부

$('#cbxName').is(':checked'); // 체크박스 요소 체크 여부

$('#rdoName').is(':checked'); // 라디오 요소 체크 여부

$('#inputName').show(); // intput 요소 보이기

$('#inputName').hide(); // input 요소 숨기기

$('#inputName').toggle(); // input 요소 보이기 숨기기 반전