language/jquery

jquery selector / jquery 선택자 / 자주 사용하는 jquery selector 선택자 / selecter

CofS 2016. 1. 5. 13:58


제이쿼리 선택자에 대한 자세한 설명은 생략하고


바로바로 카피 & 페이스트 할 수 있도록 작성되었다.


자주 쓰이는 혹은 좋은 방법들은 계속 업로드 됩니다.







커서 변경

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

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



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

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

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



SelectBox 의 Option 값 확인

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



SelectBox 의 첫번째 옵션 값

$("#_CD > option:first").val();



SelectBox 에서 선택된 Value 찾기

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



SelectBox 에서 선택된 Text 찾기

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



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

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



SelectBox 특정 value값 제외하고 나머지 옵션 삭제

$("[name='네임값'] option").not("[value='특정value']").remove();



SelectBox의 특정 값 이후/이전에 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;
 }
});



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

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



선택되지 않은 SelectBox 값 삭제

$("[name=네임값] option").not(":selected").remove();



innerHTML값 Setting하기

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



ID로 지정된 Form Submit 하기

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

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

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



each Loop에서의 break/continue 방법

$("#csf_menu_no").find("option").each(function() {
 if(this.value == "3") {
  return false; //break 의미
  return true; //continue 의미
 }
});



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

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

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

- 전체 체크 : $("input[name=mycheck]:checkbox").prop("checked", true);

- 전체 checkbox 순회하기

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



checkbox의 체크 여부 확인

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



id 가 viewyn_로 시작하는 모든태그, 끝나는 것은 ^= 대신에 $=
$("[id^='viewyn_']").each(function(i) {
 $(this).val();
});



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

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



Table의 특정번째 Row이후 모든 Row 삭제하기

$('#tableId tr:gt(0)').each(function (i){ // 0번째 이후 Row 삭제
    $(this).remove();
 });


 

Table에 Row 를 html Text로 만들어서 추가하기

$('#TableId).append(html Text);



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

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



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;
 }
});

 





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;
 }
});



input radio 선택된 value 값 가져오기

$("input:radio[name=radioName]:checked").val()



선택된 input radio text 값 가져오기

<html>
 <input name="radioName" id="id1" type="radio" value="1" checked="checked"><label for="id1">개인회원</label><br/>
</html>

$("input:radio[name=radioName]:checked").next().text()




부모창의 태그 선택자

$("#id", opener.document).val();

 

 

 

자식 태그 선택자

$("div").children(); 또는

$("div").children("a");

li의 루프를 돌면서 그 자식인 A 태그를 찾을 때 사용했음

$("ul li").each(function(){

   var aTag = $(this).children("a");

});