메뉴 건너뛰기

?

단축키

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
번호 제목 날짜 조회 수
119 [jQuery Plugin] FCKeditor 2.6.5 사용법 2016.09.11 7179
118 zeroclipboard - 클립보드 복사하기(자바스크립트 클립보드 복사하기) 2016.10.06 7181
117 Table을 DIV로 표현하기 (예제) file 2016.11.17 7467
116 selectbox multiple 선택한 값들 submit 해서 받기 2021.03.26 1349
115 SELECTBOX MULTIPLE 검색하기 2021.03.26 566
114 select box 값 변경, 목록 변경 2016.09.21 9065
113 scrolling to top 2016.12.22 6470
112 radio 제어하기 2021.03.25 170
111 Query 기초 (동적 테이블 (데이터 추가 / 삭제), integrateTable(정렬(sort)) file 2019.01.16 2191
110 prepend / append - element 추가 (부모/자식 관계) 2021.03.31 224
109 POST 방식으로 인수를 전달하고 그 결과를 받아오기 2016.09.21 9202
108 popModal jQuery Plugin Examples / 무료 jQuery 팝업 플러그인 file 2019.01.16 1233
107 parent of the iframe element selector 2021.03.31 203
106 Magnific popup conflict with "jquery.nicescroll" file 2018.11.07 1314
105 load() 메소드 2016.09.21 6412
104 JS 타이머 샘플 2019.06.04 738
103 JS 첵박스 샘플 2019.06.04 694
102 JS 날짜 자료 비교 2019.06.04 787
101 jquery를 활용한 입력폼 초기화하기 2017.03.27 8702
100 jQuery를 이용한 스크롤 따라니는 배너를 쉽게 맨들기(scroll follow) file 2019.01.10 1093
Board Pagination Prev 1 2 3 4 5 6 7 8 9 Next
/ 9

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

© k2s0o1d4e0s2i1g5n. All Rights Reserved