본문 바로가기

Programming/JQuery

jQuery Event - Keyboard Events jQuery Event - Keyboard Events .keydown() 키 입력 시 발생되는 이벤트, 모든 키에 대해 적용이 된다. .keypress() keydown이벤트와 동일하게 키 입력 시 발생이 되지만 enter, tab등 특수키에는 발생하지 않는다. .keyup() 키 입력 후 발생되는 이벤트 [ .keydown(handler(eventObject) ] 키 입력 시 발생되는 이벤트, 모든 키에 대해 적용이 된다 .keydown( handler(eventObject) ) handler(eventObject) 이벤트가 발생되면 실행될 기능 .keydown( [eventData], handler(eventObject) ) eventData 이벤트 핸들러에 전달될 데이터 집합 handler(eve.. 더보기
jQuery Event - Mouse Events jQuery Event - Mouse Events .click() 마우스 클릭 시 발생하는 이벤트 .dblclick() 마우스 더블클릭 시 발생하는 이벤트 .mouseup() 마우스 클릭 후 발생되는 이벤트 .mousedown() 마우스 클릭 시 발생하는 이벤트 .toggle() 두 개 이상의 이벤트를 순차적으로 실행되게 한다. 링크나 버튼에 선언 할 경우 .prevent Default를 수행하기 때문에 원래의 동작은 실행되지 않는다. .mouseover() 선택한 요소의 영역에 마우스 포인터가 올라갈 때 발생하는 이벤트 .mouseout() 선택한 요소의 영역에서 마우스가 벗어 났을 때 발생되는 이벤트 .mousemove() 선택한 요소의 영역에서 마우스 포인터가 움직일 때 발생하는 이벤트 .mouse.. 더보기
jQuery Event jQuery Event 사용자가 발생시키는 이벤트를 쉽고, 간단하게 핸들링 할 수 있도록 메소드를 지원 예전 웹 프로그램 개발 시에는 HTML과 자바스크립트를 혼용(흔히 말하는 스파게티)하여 사용을 하였으나, 웹 표준이 자리를 잡고 코드 분리를 통한 유지보수 반복적인 패턴의 코드중복을 피하기 위해 스크립트를 통해 HTML 요소와 이벤트를 맵핑하는 방식으로 개발을 하고 있다. 이전방식 function tdClick(obj) { alert(obj); } #1#2#3#4#5 #6#7#8#9#10 이전엔 위의 예제와 같이 필요한 함수를 만들고, 해당 이벤트가 필요한 요소에 일일이 적용하였다. jQuery사용 $(document).ready(function () { $("td").click(function () .. 더보기
jQuery Traverse - Tree Traversal [ Tree Traversal 메소드의 종류 ] 메소드 메소드 설명 .children 선택된 개체의 자식 중 Selector와 동일한 요소를 가져온다. .closest ([selector]) 선택된 개체에서 DOM Tree를 통해 가장 가까운 조상 요소를 가져온다. .find ([selector]) 선택된 개체에서 selector와 일치하는 요소를 가져온다. .next ([selector]) 선택된 개체에서 selector와 일치하는 형제 요소를 가져온다. 일치하는 항목이 없을 경우 다음 항목으로 이동해 요소를 찾는다. .parent ([selector]) 선택된 개체에서 selector와 일치하는 부모의 요소를 가져온다. .prev ([selector]) 선택된 개체에서 selector와 일치하는 바로.. 더보기
jQuery Traverse - Miscellaneous Traversing [ Miscellaneous 메서드의 종류 ] 메소드 메소드 설명 .add() 일치하는 요소의 집합에 요소를 추가 .andSelf() 현재 설정 스택에 요소의 이전 설정을 추가 .contents() 텍스트 및 주석 노드를 포함 일치하는 요소의 집합의 자식 집합을 반환 .end() 이전 상태로 일치하는 집합을 반환 [ .add() ] 더하는 역활의 메소드 jQuery Selector div,pre { background : #FFF; padding:10px; margin:10px; } table { border:1px solid #AAA; } td { border:1px solid #AAA; width:25px; height:25px; } $(document).ready(function() { $("ul".. 더보기
jQuery Traverse - Filtering jQuery에서 지원하는 Traverse 메서드는 HTML을 가로지르거나, 횡단하는 것 처럼 탐색하는 역할을 한다. Traverse 메소드는 간단하게 셀렉터를 통해 선택한 개체에서 다시 한번 개체를 찾고, 필터링하고, 추가하는 작업을 쉽게 구현 할 수 있도록 도와주는 메서드라고 생각 하면 된다. 물론 기존의 셀렉터를 통해서도 충분히 원하는 개체를 탐색하거나, 선택 하는데 큰 지장이 없다만, Traverse 메소드를 이용하면 셀렉터를 통해 가져온 개체를 즉 1차 결과물에 추가적인 작업을 통해 2차, 3차 등의 결과를 쉽게 얻을 수 있다는 큰 장점이 있다. 이러한 Traverse 메소드는 크게 Filtering, Miscellaneous Traverse, Tree Traverse 3가지로 구분을 하고 있다... 더보기
jQuery Callback Functions [jQuery Callback Functions] javascript 구문은 줄단위로 되는데, 애니메이션의 경우에는 애니메이션이 끝나지 않아도 다음 행의 코드가 수행될 수 있기 때문에 에러가 날 수도 있다. 이런 경우를 방지하기 위하여 콜백함수를 사용한다. 콜백함수는 현재의 애니메이션(혹은 효과)이 끝난 후에야 실행된다. [jQuery Callback Example] 기본적인 문법은 : $(selector).hide(speed,callback) 콜백 변수에는 감추기 효과가 끝난 후에 수행될 함수가 실행된다. hide효과를 예를 들기 위하여 사용하였을 뿐, $(document).ready(callback) 와 같이 사용해도 된다. 아래의 예로 확인하여 본다. ex1) 콜백함수가 있는경우 감추기 요기가 사라.. 더보기
jQuery Ajax memory leak success 아래에 추가 xhr: /*@cc_on false && @*/window.XMLHttpRequest ? function() { return new window.XMLHttpRequest(); } : function() { try { return new window.ActiveXObject("Microsoft.XMLHTTP"); } catch(e) {} } 참고 사이트 http://blog.linkibol.com/tag/memory-leak/ jquery 1.4.2 버젼 입니다. -- phpschool.com HTML/SCRIPT Q&A 게시판 - 다크엔잴님 댓글 더보기
jQuery Ajax 에러 처리 jQuery Ajax 에러 처리 $.ajaxSetup({ error:function(x,e){ if(x.status==0){ alert('네트워크를 체크해주세요.'); }else if(x.status==404){ alert('페이지를 찾을수없습니다.'); }else if(x.status==500){ alert('서버에러 발생하였습니다.'); }else if(e=='parsererror'){ alert('Error.\nParsing JSON Request failed.'); }else if(e=='timeout'){ alert('시간을 초과하였습니다.'); }else { alert('알수없는 에러가 발생하였습니다.\n'+x.responseText); } } }); $().ready(function(){ $.. 더보기
jQuery Ajax 한글자료 넘김 처리 - jsp, java jQuery는 euc-kr 환경에서는 한글을 넘기고 받을 때 깨진다. 그렇기 때문에 코드처리를 별도로 해줘야 한다. jQuery 중에 $.ajax, $.get, $.post, $.load 등을 사용할때, 한글이 포함되어 있는 정보는 아래와 같은 처리를 해야 한다. 보내는 페이지, notex 문자열에 전송하려는 한글 정보가 있다고 가정한다. $('#notex').bind('keyup', function(e) { pref = "thisProgram" var key1 = $('#dummy').val(); var key2 = ""; var notex = $('#notex').val(); $.post( '/outbound/wsndseq026.jsp' ,{ pref:pref, key1:key1, key2:key2,.. 더보기

티스토리툴바