Programming 썸네일형 리스트형 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) 콜백함수가 있는경우 감추기 요기가 사라.. 더보기 HTML 4.0 Special Entities Character Entity Decimal Hex Rendering in Your Browser Entity Decimal Hex quotation mark = APL quote " " " " " " ampersand & & & & & & less-than sign < < < Latin capital ligature OE Œ Œ Œ Œ Œ Œ Latin small ligature oe œ œ œ œ œ œ Latin capital letter S with caron Š Š Š Š Š Š Latin small letter s with caron š š š š š š Latin capital letter Y with diaeresis Ÿ Ÿ Ÿ Ÿ Ÿ Ÿ modifier letter circumflex a.. 더보기 자주쓰는 공통스크립트 자주쓰는 공통스크립트 숫자만 가능(한글 제외) Return : boolean function onlyNumberKey() { var keyCode = event.keyCode ? event.keyCode : event.which ? event.which : event.charCode; return ((keyCode!=13) && (keyCode>47 && keyCode47 && keyCode64 && keyCode96 && keyCode 대문자 변환 function changeUpperCase(obj) { obj.value = obj.value.toUpperCase(); } 공백확인 function isEmpty(str) { str = trim(str); return str == '' ? true : f.. 더보기 div 숨기기 / 보이기 DIV 숨기기 / 보이지 [head에 스크립트 적용] [소스 내부에 들어갈 내용] 보이고 숨기고자 하는 내용 // 버튼을 이용하여 숨기거나 보여주는 것을 조정한다. display1()을 불르면 div1 을 숨깁니다. display()을 불르면 div1 을 감춥니다. [위의 소스 적용 예] 보이고 숨기고자 하는 내용 더보기 하루동안 팝업창 띄우지 않기 팝업 띄울 페이지의사이 새창의 의 사이 그리고 체크박스는 아래처럼 이름을 스크립트에 선언한대로(popup) 하고, form 태그로 열고 닫아야 한다. 다음 접속시 이 창을 열지 않음 닫기 하단부의 setCookie() Function에서 숫자1을 원하는대로 수정하면 숫자만큼의 일수동안 창이 열리지 않는다. 출처: http://www.eguweb.co.kr/ 더보기 이전 1 2 3 4 5 6 7 다음
