잘 정리해놓은 깃헙 사이트 인용합니다.
jQuery 선택자
선택자명설명
| $('tag') | Tag라는 이름의 모든 태그 요소를 선택 |
| $(‘.class’) | class라는 클래스명의 모든 클래스 요소를 선택 |
| $(‘#id’) | id라는 아이디명의 아이디 요소를 선택 |
| $(‘div li’) | div에 있는 li 모두 선택 |
| $(‘div > p’) | div의 p태그라는 직계 자식을 선택 |
| $(this) | 현재 선택 중인 요소를 가리킴 |
jQuery 메소드
메소드명설명
| eq(n) | n번째에 위치하는 요소를 선택. |
| length() | 요소의 개수를 알 수 있음. |
| parent() / parents() | 요소의 직계 부모 선택 / 요소의 모든 부모들 선택 |
| children(“a”) | 요소의 a태그의 직계자손 선택 |
| prev() / next() | 이전 요소 선택 / 다음 요소 선택 |
| val() | 텍스트에 입력한 값을 추출 |
| text() | 해당 요소의 텍스트를 변경 |
| move() / clone() | 해당 요소 이동 / 해당 요소 복사 |
| remove() | 해당 요소 삭제 |
| bind(이벤트,함수) / unbind(이벤트) | 해당 이벤트 실행시 함수 실행 / 이벤트 제거 |
| * unbind() - 해당문서 객체와 관련된 모든 이벤트 제거 | |
| * unbind(eventName) - 특정 이벤트와 관련된 모든 이벤트 제거 | |
| * unbind(eventName, function) - 특정 이벤트의 함수 제거 | |
| addClass() / removeClass() | 클래스 추가 / 클래스 삭제 |
jQuery 이벤트
이벤트명설명
| mousedown() | 노드영역에서 마우스르 눌렀다가 떼었을 때 발생 |
| mouseenter() | 노드에 마우스가 진입했을 때 발생 -> 부모 영역안의 자식영역에 커서가 가도 마우스 진입으로 판단 |
| mouseleave() | 노드영역에서 마우스가 나갔을 때 발생 |
| mousemove() | 노드영역에서 마우스가 움직일 때 발생 |
| mouseover() | 노드 영역에 마우스를 올려 놓았을 때 발생 -> 부모 영역안의 자식영역에 커서가 가면 마우스 아웃으로 판단 |
| mouseup() | 마우스 포인터를 노드에 올려놓고 마우스 버튼을 눌렀을 때 발생 |
jQuery 키보드 이벤트
키보드 이벤트명설명
| keydown() | 키보드가 눌러질 때 발생 |
| keyup() | 키보드가 떼어질 때 발생 |
| keypress() | 글자가 입력될 때 발생 |
- 기존 내용을 없애고 필요한 html구문을 생성함
$subMenu1.html("<li>text</li>");
-
$(A).insertBefore(B) : A를 B앞에 추가
-
$(C).insertAfter(B) : C를 B뒤에 추가
-
$(D).prependTo(B) : D를 B 앞부분에 추가
-
$(E).appendTo(B) : E를 B의 뒷부분에 추가
-
$(1).after(F) : 1뒤의 F 선택
-
$(3).before(G) : 3앞의 G 선택
- 해당 요소의 CSS를 설정 및 값 추출
// ex) $("#header").css({height:80, overflow:"hidden"}) //height, overflow 설정 // ex) var $alpha=$(".subMenu").css("opacity"); //opacity 값 추출
- 해당 요소의 속성을 설정 및 값 추출
// ex) $mainImg.attr("class","img02"); //클래스명 설정 // ex) $("#visual_img").attr("src", "images/main/visual_02.jpg") //이미지 경로 변경 // ex) var $className=$("#visual_img").attr("class"); //클래스명 값 추출
- 일정시간 마다 함수가 실행되도록 처리
- setInterval로 설정한 작업을 취소
Animation
Animate({속성:값},시간,효과,함수)
- 속성의 값만큼 시간주기로 해당효과를 낸 후 함수를 실행함
- 효과 : jQuery의 easing효과(32가지의 easing 효과 사용 가능)
//ex) function onLeft() { #imgWrap.animate({marginLeft:-400},500,"easeOutCubic"); }
//ex) $("#imgWrap:not(:animated)").animate({left:300, opacity:0}, 1000, "easeOutCubic", function() { #imgWrap.css({left:0, opacity:1}); });
활용가능한 jQuery 예제
Slide Image
- slideUP(), slideDown() 사용 (left, right는 적용 안됨)
- appendTo(), prependTo(), animate() 사용
Show, hide Image
- show(), hide() 사용
- tab menu, modalWindow 활용가능
Scroll Image
- scrollTop() 사용
:not(:animated)
- 해당 애니메이션이 진행중일 때 다른 애니메이션 실행을 못하도록 함.
- 해당 애니메이션이 다 끝나고 다음 애니메이션이 실행 됨.
stop()
- 진행중인 애니메이션을 모두 멈춤.
- 여러 애니메이션이 동시 진행시 실행하던 애니메이션의 동작 완료 전 다른 애니메이션 실행시 사용.
Triggrt 함수
원문 링크: http://api.jquery.com/trigger/
.trigger( eventType [, extraParameters] )
개요 : 특정 이벤트 유형에 대해 선택된 요소에 연결된 모든 핸들러와 동작(behavior)을 실행합니다.
.trigger( eventType [, extraParameters] )
eventType: JavaScript 이벤트 타입을 표현하는 문자열, click 또는 submit 같은.
extraParameters: 이벤트 핸들러에 전달할 추가 파라미터.
.trigger( event ) event jQuery.Event 객체.
예제_01
.trigger() 함수는 이벤트가 발생할 때 실행될 함수나 .bind() 함수로 연결된 어떤 이벤트 핸들러를 강제로 실행시켜 줍니다.
$('#foo').bind('click', function() { alert($(this).text()); }); $('#foo').trigger('click');
#foot 선택자를 클릭 하지 않아도 trigger함수에 연결된 click 이벤트가 trigger함수의 특징의 의하여 alert($(this).text()); 를 강제로 실행합니다.
each(반복문) 함수
.each()는 선택한 요소가 여러개일 때 각각에 대하여 반복하여 함수를 실행시킵니다.
문법 : .each( function )
특정 조건을 만족할 때 반복 작업에서 빠져려면 : return false 사용합니다.
아래 출처: 출처: http://www.richstory.co.kr/18 [RichStory]
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;
}
$("#ID").val();
$("#ID").val("값");
$("#ID").focus();
var seq = $("#ID").attr("SEQ"); // 속성 값 가져오기
$("#ID").click(function(){
}
$(".list-item").click(function(){ // tr class name : list-item (게시판 글 클릭)
}
var frmObj = document.frmThis;
$("#frmThis").attr("action", "<c:url value='/xxxx.do'/>");
$("#frmThis").submit();
<form id="frmThis" method="post">
<input type="hidden" id="hidPage" name="page" value="">
</form>
****** combo ******
$("#cmb_CODE").val("2");
$("select[name=cmb_CODE]").attr("disabled","disabled");
****** radio ******
$("input:radio[name='rdo_TYPE']:checked").val()
'Dev. Web > 자주 쓰는 스크립트 모음' 카테고리의 다른 글
| shuffle - 배열 값 섞기 (0) | 2019.06.16 |
|---|---|
| sample - 배열 랜덤값 (0) | 2019.06.16 |
| reducedFilter - 배열 필터링 (0) | 2019.06.16 |
| pull - 선택 값 골라내기 (0) | 2019.06.16 |
| mapObject - 배열 -> map (0) | 2019.06.16 |