메뉴 건너뛰기

?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄

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


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


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





커서 변경

$('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");

}); 

 


List of Articles
번호 제목 날짜 조회 수
179 jquery timer, javascript countdown (타이머 예제) 2018.11.07 81315
178 jquery 플러그인 링크 모음 2016.12.22 49507
177 동적으로 콤보(select)의 항목(option) 생성하기 2016.09.21 14373
176 이미지 클릭시 확대하기 file 2016.09.21 12639
175 jqGrid / custom pager / custom paging / 그리드 / 페이징 file 2016.09.09 12479
174 Ajax를 통해 전송된 데이터를 Controller에서 List 객체로 받기 2021.03.25 12149
173 jQuery 입문: form 데이터 유효성 검사 2017.03.02 11799
172 속성선택자를 이용해서 링크에 스타일 입히기 2016.09.21 11493
171 Ajax를 이용한 데이터 조회시 로딩 로딩 이미지 보이기(jquery이용) file 2016.12.22 10746
170 jquery 이용한 필수입력체크(input form) 2017.03.02 10557
169 셀렉트박스에서 특정 옵션 선택시 레이어 나타내기 2016.12.22 10481
168 bxslider 멈춤현상 2016.12.22 10100
167 jQuery 날짜 비교 (날짜비교) 2016.11.17 10055
166 jquery radio checked (라디오 버튼 값으로 선택), 검색 조건 초기 셋팅 2016.11.17 10039
165 각종 다이어그램 플러그인 / 차트 / 관계 플러그인 2016.09.09 9478
164 POST 방식으로 인수를 전달하고 그 결과를 받아오기 2016.09.21 9202
163 select box 값 변경, 목록 변경 2016.09.21 9065
162 파일 업로드 방법, 이미지 파일 업로드 예제 소스 2017.03.06 9028
161 [jQuery] 이용 아이디 중복체크 실시간 2016.09.11 8874
160 jquery 글자 byte, 문자열 byte(바이트) 길이 체크하기 예제 2016.11.17 8828
Board Pagination Prev 1 2 3 4 5 6 7 8 9 Next
/ 9

하단 정보를 입력할 수 있습니다

© k2s0o1d4e0s2i1g5n. All Rights Reserved