jQuery 유용한 팁과 예제 모음

웹 개발에서 jQuery는 DOM 조작과 이벤트 처리를 간단하게 할 수 있게 해주는 강력한 라이브러리입니다. 이번 포스팅에서는 jQuery를 사용해 자주 필요한 다양한 기능들을 소개합니다. 요소 조작부터, 테이블 관리, 폼 전송, 그리고 데이터 유효성 검사까지! 이 포스팅을 통해 필수적인 jQuery 코드를 바로 복사해 사용할 수 있게 준비해 보았어요.

 

1. 기본적인 요소 제어

요소의 커서 변경하기

사용자 경험을 위해 특정 작업 중 커서 모양을 변경해줄 수 있습니다. 예를 들어, 로딩 중일 때 wait 커서를 보여줄 수 있습니다.

$('body').css('cursor', 'default');
$('body').css('cursor', 'wait');

HTML 요소 숨기기 및 보이기

특정 ID를 가진 요소를 보여주거나 숨기는 방법입니다. 예를 들어, 로딩 중에 특정 요소를 숨길 수 있습니다.

$("#placeholder").show();
$("#placeholder").hide();

innerHTML 값 설정하기

HTML의 내용물을 쉽게 바꿀 수 있습니다. 예를 들어, 가격 표시를 강하게 표시할 수 있습니다.

$("#id_total_price").html("<strong>값</strong>");

---

2. Select Box 조작하기

Select Box에서 선택된 Value 찾기

Select Box에서 현재 선택된 값을 가져오는 방법입니다. 필터링이나 다른 요소와의 연결을 위해 유용합니다.

$('#search_sale_pernr_s option:selected').val();

Select Box의 Option 값 확인

Select Box의 모든 옵션 값을 확인하는 코드입니다. 각 옵션 값을 순회하면서 alert 창으로 확인할 수 있습니다.

$("#search_sale_unit").find("option").each(function() {
    alert(this.value);
});

특정 값을 가진 Option 삭제하기

특정 값이 있는 옵션을 제거하여 Select Box를 동적으로 조절할 수 있습니다.

$("#csf_menu_no").find("option").each(function() {
    if(this.value == "4") {
        $(this).remove();
    }
});

특정 값 이전/이후 Option 추가하기

필요에 따라 특정 값의 이전 또는 이후에 새로운 옵션을 추가할 수 있습니다.

$("#csf_menu_no").find("option").each(function() {
    if(this.value == "3") {
        $(this).after("<option value=\"4\">텍스트</option>");
        return false;
    }
});

---

3. Form 및 테이블 조작

Form Submit하기

폼을 설정한 목표 URL로 전송하는 방법입니다. 새로운 페이지를 열거나 특정 위치로 폼을 보낼 때 유용합니다.

$("#csf_tab_menu_form").attr("target", "_top");
$("#csf_tab_menu_form").attr("action", "/sabisung/list.jsp");
$("#csf_tab_menu_form").submit();

테이블의 모든 Row 삭제

타이틀 Row를 제외하고 테이블의 모든 Row를 삭제할 때 유용한 코드입니다. 테이블을 초기화할 때 사용할 수 있습니다.

$("#data_list_table > tbody").children("tr:not(:first)").remove();

테이블 마지막 Row 다음에 Row 추가하기

테이블의 마지막 행 다음에 새로운 행을 추가합니다. 동적인 테이블 데이터 추가 시 유용합니다.

$("#data_list_table > tbody:last").append("<tr><td>값1</td></tr>");

---

4. Checkbox 조작하기

Checkbox 갯수와 선택된 갯수 구하기

전체 Checkbox와 선택된 Checkbox의 갯수를 확인하는 코드입니다. 체크된 항목을 집계할 때 유용합니다.

// 전체 갯수
$("input:checkbox[name=is_check]").length;
// 선택된 갯수
$("input:checkbox[name=is_check]:checked").length;

Checkbox 순회

전체 Checkbox를 순회하면서 체크를 할 수 있습니다. 다중 선택 기능을 제공하는 UI에 유용합니다.

$("input:checkbox[name=is_check]").each(function() {
    this.checked = true;
});

---

5. 데이터 처리 및 유효성 검사

숫자인지 체크하기

해당 값이 숫자인지 여부를 간단히 확인할 수 있는 함수입니다. 데이터 유효성 검사를 수행할 때 사용합니다.

function is_number(v) {
    var reg = /^(\s|\d)+$/;
    return reg.test(v);
}

숫자에 콤마 추가하기

금액 표시 등을 위해 숫자에 3자리마다 콤마를 넣는 함수입니다.

function set_comma(n) {
    var reg = /(^[+-]?\d+)(\d{3})/;
    n += '';
    while (reg.test(n)) {
        n = n.replace(reg, '$1' + ',' + '$2');
    }
    return n;
}