자료실

홈 / 고객센터 / 자료실

자주쓰는 제이쿼리 함수

기본정보
  • 글쓴이
  • 고객지원팀
  • 조회수
  • 157회
상세내용




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()

기존 내용을 없애고 필요한 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()

해당 요소의 CSS를 설정 및 값 추출


$("#header").css({height:80, overflow:"hidden"}) //height, overflow 설정

var $alpha=$(".subMenu").css("opacity"); //opacity 값 추출



attr()

해당 요소의 속성을 설정 및 값 추출


$mainImg.attr("class","img02");  //클래스명 설정

$("#visual_img").attr("src", "images/main/visual_02.jpg") //이미지 경로 변경

var $className=$("#visual_img").attr("class"); //클래스명 값 추출


setInterval(함수명,주기)

일정시간 마다 함수가 실행되도록 처리


clearInterval(함수명)

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 사용합니다.



~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~



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;

    }



자료실

유용한 자료들을 모아두었습니다.

자료실 목록
번호 제목 글쓴이
63 고객지원팀
62 고객지원팀
61 고객지원팀
60 고객지원팀
59 고객지원팀
58 고객지원팀
57 고객지원팀
56 고객지원팀
55 고객지원팀
54 고객지원팀
53 고객지원팀
52 고객지원팀
51 고객지원팀
50 고객지원팀
열람중 고객지원팀
48 고객지원팀
47 고객지원팀
46 고객지원팀
45 고객지원팀
44 고객지원팀