d

기초적이지만 자주 쓰이는 Jquery 팁 20가지

1. 커서 변경

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

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

2. Select Box에서 선택된 Value 찾기

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

3. Table의 타이틀 Row를 제외한 모든 Row 삭제하기

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

4. Table의 마지막 Row 다음에 Row 추가하기

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

5. innerHTML값 Setting하기

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

6. 해당 ID로 지정된 HTML 보이기/숨기기

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

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

7. ID로 지정된 Form Submit 하기

$("#csf_tab_menu_form").attr("target", "_top");

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

$("#csf_tab_menu_form").submit();

8. Select Box의 Option 값 확인

$("#search_sale_unit").find("option").each(function() {

alert(this.value);

});

9. Select Box의 특정 값을 가지는 Option 삭제하기

$("#csf_menu_no").find("option").each(function() {

if(this.value == "4") {

//alert(this.selected);

$(this).remove();

}

});

10. Select Box의 특정 값 이후/이전에 Option 추가하기

$("#csf_menu_no").find("option").each(function() {

if(this.value == "3") {

$(this).after("<option value=\"4\">텍스트</option>");

//$(this).before("<option value=\"4\">텍스트</option>");

return false;

}

});

11. each Loop에서의 break/continue 방법

$("#csf_menu_no").find("option").each(function() {

if(this.value == "3") {

return false; //break 의미

return true; //continue 의미

}

});

12. Select Box의 모든 Option 삭제 후 Default Option 추가하기

$("#search_sale_pernr_s").find("option").remove().end().append("<option value=\"\">::사원 선택::</option>");

13. checkbox의 전체 갯수와 선택된 갯수 구하기

- 전체 갯수 : $("input:checkbox[name=is_check]").length

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

- 전체 checkbox 순회하기

$("input:checkbox[name=is_check]").each(function() {

this.checked = true;

});

14. checkbox의 체크 여부 확인

if($("input:checkbox[name=complete_yn]").is(":checked")) == true) {

; //작업

}

15. Table의 특정(ID를 가지는) TR 다음에 TR Row를 추가하기

$("#table_appr_pernr > tbody").children("tr").each(function() {
if(("row_appr_pernr_" + row_no) == $(this).attr('id')) {
$(this).after("<tr><td>사비성</td></tr>");
return false;
}
});

16. Table의 특정(ID를 가지는) TR Row를 삭제하기

$("#table_appr_pernr > tbody").children("tr").each(function() {
if(("row_appr_pernr_" + row_no) == $(this).attr('id')) {
$(this).remove();

return false;
}
});

17. 숫자인지 체크

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

18. 숫자인지 체크 (-/+ 부호까지 체크)

function is_number(v) {
var reg = /^[-+]?\d+$/;
return reg.test(v);
}

19. 소수점 자리수에 맞는 숫자인지 체크 (소수점 2자리까지 체크)

function is_float_2(v) {
var reg = /^[-+]?\d+.?\d?\d?$/;
return reg.test(v);
}

20. 숫자에 콤마 추가하기 (금액단위)

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

return n;
}

댓글 7개

좋네요 ㅋㅋ 굿~~~
좋은자료 감사
감사합니다.
댓글을 작성하시려면 로그인이 필요합니다.

팁게시판

6,077건

디자인과 관련된 유용한 정보를 공유하세요. 질문은 상단의 QA에서 해주시기 바랍니다.

+
제목 글쓴이 날짜 조회
13-03-01 조회 5,542
13-03-01 조회 3,629
13-02-26 조회 1,482
13-02-26 조회 1,078
13-02-26 조회 2,017
13-02-24 조회 5,483
13-02-24 조회 1,658
13-02-24 조회 988
13-02-24 조회 2,996
13-02-24 조회 2,706
13-02-24 조회 1,740
13-02-24 조회 3,153
13-02-24 조회 6,771
13-02-14 조회 2,390
13-02-13 조회 6,255
13-01-29 조회 5,193
13-01-24 조회 2,389
13-01-24 조회 2,106
13-01-17 조회 1,624
13-01-16 조회 1,673
13-01-08 조회 1,762
12-12-27 조회 1,429
12-12-20 조회 8,556
12-12-20 조회 1,285
12-12-06 조회 1,563