본문 바로가기

분류 전체보기767

jQuery API 정복 - event.timeStamp, 이벤트 사이의 시간 event.timeStamp 원문 링크 http://api.jquery.com/event.timeStamp/ event.targetReturns : Element 개요 : 이전 이벤트와 현재 이벤트가 발생한 시간의 차이를 밀리세컨드(milliseconds)를 기준으로 알려줍니다. .event.timeStamp 예 제 소스닫기 마지막 이벤트 발생 시간과의 차이를 보여줍니다. Click. 미리보기 밀리세컨드에 1,000을 곱하면 초단위가 되는거 다들 아시죠? (응? "이거 다 거짓말인거 다들 아시죠??" 가 문득 떠오르는.. ㅎㅎ ) 그럼 즐프하세요. ※ 본 예제는 http://www.jquery.com 에 있는 내용임을 밝힙니다. 2011. 12. 13.
jQuery API 정복 - event.target, 이벤트가 발생한 요소 event.target 원문 링크 http://api.jquery.com/event.target/ event.targetReturns : Element 개요 : 이벤트가 시작되는 DOM 요소입니다. .event.target 예 제 소스닫기 클릭하면 태그명을 보여줍니다. click 미리보기 예 제 소스닫기 간단한 이벤트 위임을 구현합니다. 클릭하면 하위요소가 나타나거나 감춰집니다. item 1 sub item 1-a sub item 1-b item 2 sub item 2-a sub item 2-b 미리보기 이거이거 토글메뉴에 딱인데요. 두번째 예제를 잘 살려서 토글 메뉴에 사용하심 될 것 같습니다. 와우 간단하네요. 그럼 즐프하세요. ※ 본 예제는 http://www.jquery.com 에 있는 내용임을 .. 2011. 12. 13.
jQuery API 정복 - event.pageY, 마우스 Y 좌표 event.pageY 원문 링크 http://api.jquery.com/event.pageY/ event.pageYReturns : Number 개요 : 문서의 왼쪽 가장자리를 기준으로 마우스 위치의 Y좌표 값. .event.pageY 예 제 소스닫기 마우스 위치의 Y 좌표값을 알아보죠.(아래 영역에 마우스를 위치시켜 보세요. 미리보기 마우스 X, Y 좌표가 나오네요. pageX와 pageY 로 잘 사용하세요. 그럼 즐프하세요. ※ 본 예제는 http://www.jquery.com 에 있는 내용임을 밝힙니다. 2011. 12. 13.
jQuery API 정복 - event.pageX, 마우스 X 좌표 event.pageX 원문 링크 http://api.jquery.com/event.pageX/ event.pageXReturns : Number 개요 : 문서의 왼쪽 가장자리를 기준으로 마우스 위치의 X좌표 값. .event.pageX 예 제 소스닫기 마우스 위치의 X 좌표값을 알아보죠.(아래 영역에 마우스를 위치시켜 보세요. 마우스를 올려보세요. 미리보기 마우스 X, Y 좌표가 나오네요. 마우스 좌표값 얻기에 사용하세요. 브라우져 마다 달라서 고생스러웠는데 잘 사용할 수 있겠네요. 그럼 즐프하세요. ※ 본 예제는 http://www.jquery.com 에 있는 내용임을 밝힙니다. 2011. 12. 13.
jQuery API 정복 - die(), 이벤트 해제하기 .die() 원문 링크 http://api.jquery.com/die/ 함수들 die( ) .die( ) die( eventType [ , handler ] ) .die( eventType [, handler] ) .die( eventTypes ) .die( )Returns : jQuery 개요 : .live() 함수로 바인딩 된 모든 이벤트들을 제거합니다. .die( ) .live() 함수로 바인딩 된 모든 이벤트를 .die()로 제거할 수 있습니다. 이 함수는 .bind() 함수로 바인딩 된 모든 이벤트를 제거하는 함수인 .unbind() 를 인자없이 호출하는 것과 유사합니다. jQuery 1.7에서는, .die() (그리고 보완적인 함수인, .live()) 에 대하여 다루지 않습니다. 대신, .on.. 2011. 12. 8.
jQuery API 정복 - delegate(), 이벤트 바인딩하기 .delegate() 원문 링크 http://api.jquery.com/delegate/ .delegate( selector, eventType, handler )Returns : jQuery 개요 : 루트 요소의 특정 집합을 기반으로, 지금 또는 나중에, 선택과 일치하는 모든 요소에 대해 하나 이상의 이벤트 처리기를 묶어줍니다. .delegate( selector, eventType, handler ) selector 이벤트를 발생할 요소를 걸러낼 선택자. eventType 공백으로 구분된 하나 이상의 JavaScript 이벤트를 포함하는 문자열, "click", "keydown" 또는 사용자 정의 함수명. handler 이벤트가 발생할 때 실행될 함수. .delegate( selector, event.. 2011. 12. 8.
jQuery API 정복 - 더블클릭 이벤트, dblclick() .dblclick() 원문 링크 http://api.jquery.com/dblclick/ 함수들 .dblclick( handler(eventObject) )Returns : jQuery 개요 : JavaScript 이벤트인 "click"를 이벤트 핸들러에 바인딩 하거나 요소에 이벤트를 발생시킵니다. .dblclick( handler(eventObject) ) handler(eventObject) 매번 이벤트를 발생시키는 함수가 실행됩니다. .dblclick( [eventData], handler(eventObject) ) eventData 이벤트 핸들러에 전달될 데이터 집합. handler(eventObject) 매번 이벤트를 발생시키는 함수가 실행됩니다. .dblclick( ) 이 함수는 .bind('.. 2011. 11. 25.
jQuery API 정복 - 클릭 이벤트, click() .click() 원문 링크 http://api.jquery.com/click/ 함수들 .click( handler(eventObject) )Returns : jQuery 개요 : JavaScript 이벤트인 "click"를 이벤트 핸들러에 바인딩 하거나 요소에 이벤트를 발생시킵니다. .click( handler(eventObject) ) handler(eventObject) 매번 이벤트를 발생시키는 함수가 실행됩니다. .click( [eventData], handler(eventObject) ) eventData 이벤트 핸들러에 전달될 데이터 집합. handler(eventObject) 매번 이벤트를 발생시키는 함수가 실행됩니다. .click( ) 이 함수는 .bind('click', handler)을 .. 2011. 11. 25.
jQuery API 정복 - 변경 이벤트, change() .change() 원문 링크 http://api.jquery.com/change/ 함수들 .change( handler(eventObject) )Returns : jQuery 개요 : JavaScript 이벤트인 "change"를 이벤트 핸들러에 바인딩 하거나 요소에 이벤트를 발생시킵니다. .change( handler(eventObject) ) handler(eventObject) 매번 이벤트를 발생시키는 함수가 실행됩니다. .change( [eventData], handler(eventObject) ) eventData 이벤트 핸들러에 전달될 데이터 집합. handler(eventObject) 매번 이벤트를 발생시키는 함수가 실행됩니다. .change( ) 이 함수는 .bind('change', ha.. 2011. 11. 24.
jQuery API 정복 - 포커스 잃을 때 이벤트, blur() .blur() 원문 링크 http://api.jquery.com/blur/ 함수들 .blur( handler(eventObject) )Returns : jQuery 개요 : JavaScript 이벤트인 "blur"를 이벤트 핸들러에 바인딩 하거나 요소에 이벤트를 발생시킵니다. .blur( handler(eventObject) ) handler(eventObject) 매번 이벤트를 발생시키는 함수가 실행됩니다. .blur( [eventData], handler(eventObject) ) eventData 이벤트 핸들러에 전달될 데이터 집합. handler(eventObject) 매번 이벤트를 발생시키는 함수가 실행됩니다. .blur( ) 이 함수는 .bind('blur', handler)을 줄여 놓은 것입.. 2011. 11. 24.
jQuery API 정복 - 이벤트 연결하기, bind() .bind() 원문 링크 http://api.jquery.com/bind/ .bind( eventType [, eventData] , handler(eventObject) )Returns : jQuery 개요 : 요소(element)에 이벤트 처리기(handler)를 연결합니다.(바인딩이라고 하죠) .bind( eventType [, eventData], handler(eventObject) ) eventType 하나 이상의 DOM 이벤트를 표현하는 문자열. "click", "submit," 또는 사용자가 만든 함수들(사용자정의함수). eventData 이벤트 핸들러에 전달하기 위한 데이터 집합(map of data). handler(eventObject) 이벤트와 함께 실행될 함수 .bind( even.. 2011. 11. 23.
jQuery API 정복 - 요소 별로 감싸기, wrapAll() .wrapAll() 원문 링크 http://api.jquery.com/wrapAll/ 함수들 .wrapAll( wrappingElement )Returns : jQuery 개요 : Wrap an HTML structure around all elements in the set of matched elements.조건에 일치하는 요소들의 HTML 구조를 감쌉니다. .wrapAll( wrappingElement ) wrappingElement 요소들을 감쌀 HTML 조각, 선택자 표현, jQuery 객체, DOM 요소 .wrapAll() 함수는 $()형식으로 쓰는 함수에서 나온 문자열 또는 객체로 감쌀 수 있습니다. 이 깊은 수준까지 중첩될 수 있습니다. HTML을 기준으로: Hello Goodbye .wr.. 2011. 11. 22.
jQuery API 정복 - 넓이 구하기, width() .width() 원문 링크 http://api.jquery.com/width/ 함수들 width( ) .width() width( value ) .width( value ) .width( function(index, width) ) .width()Returns : Integer 개요 : 일치된 요소 집합 중 첫번째 요소에 대해 현재의 계산된 넓이를 얻을 수 있습니다. .width() .css('width') 와 .width() 간의 차이점은 픽셀 텍스트의 유무에 있습니다. 예를 들어, 400 와 400px의 차이입니다. .width() 함수는 수학적인 계산을 필요로 할때 사용하시면 됩니다. 또한 이 함수는 window와 document의 넓이를 알고 싶을 때 사용할 수도 있습니다. $(window).wi.. 2011. 11. 22.
jQuery API 정복 - 요소 감싸기, wrap() .wrap() 원문 링크 http://api.jquery.com/wrap/ 함수들 .wrap( wrappingElement )Returns : jQuery 개요 : 조건에 일치하는 요소들의 HTML 구조를 감쌉니다. .wrap( wrappingElement ) wrappingElement 요소들을 감쌀 HTML 조각, 선택자 표현, jQuery 객체, DOM 요소 .wrap( function(index) ) function(index) HTML 컨텐츠 또는 jQuery 객체를 반환하는 콜백 함수. 인자는 요소집합의 인덱스. 함수내의 this는 요소집합의 현재 요소를 의미합니다. .wrap() 함수는 $()형식으로 쓰는 함수에서 나온 문자열 또는 객체로 감쌀 수 있습니다. 이 깊은 수준까지 중첩될 수 있습.. 2011. 11. 22.
jQuery API 정복 - 감싼 요소 제거하기, unwrap() .unwrap() 원문 링크 http://api.jquery.com/unwrap/ 함수들 .unwrap( )Returns : jQuery 개요 : DOM에서 일치하는 요소들의 부모요소를 제거합니다. .unwrap( ) .unwrap() 함수는 요소의 부모를 제거합니다. 반대편에 있는 함수는 .wrap() 입니다. 일치하는 요소 (있다면 그들의 형제요소들도)는 DOM 구조에서 부모요소를 대체합니다. 예 제 소스닫기 문단(p)에 div를 Wrap/unwrap 처리합니다. wrap/unwrap Hello cruel World 미리보기 그럼 즐프하세요. ※ 본 예제는 http://www.jquery.com 에 있는 내용임을 밝힙니다. 2011. 11. 22.
jQuery API 정복 - class 토글하기, toggleClass() .toggleClass() 원문 링크 http://api.jquery.com/toggleClass/ 함수들 .toggleClass(className )Returns : jQuery 개요 : 조건에 일치하는 요소들에 클래스를 추가하거나 삭제합니다. 인자를 스위치 하면서 클래스를 바꿀 수 있습니다. .toggleClass( className ) className 토글을 위한 공백으로 연결된 하나 이상의 클래스 이름 .toggleClass( className, switch ) className 토글을 위한 공백으로 연결된 하나 이상의 클래스 이름 switch 클래스의 추가 또는 제거를 결정하는 부울값 .toggleClass( [switch] ) switch 클래스의 추가 또는 제거를 결정하는 부울값 .togg.. 2011. 11. 22.
jQuery API 정복 - 텍스트만 알아내기, text() .text() 원문 링크 http://api.jquery.com/text/ 함수들 text() text() text( textString ) .text( textString ) .text( function(index, text) ) .text()Returns : String 개요 : 조건에 일치하는 요소들(자식 요소까지도 포함한)의 각 요소별 텍스트를 묶어서 반환해 줍니다. .text() .html() 함수는 되지 않지만, .text() 함수는 XML과 HTML에 모두 사용할 수 있습니다. .text() 함수는 조건에 부합하는 요소들의 내부 문자열을 묶어서 반환해 줍니다. (여러 브라우져들의 HTML 파서의 변화로 인해, text는 newlines 과 공백에 따라 조금씩 다르기도 합니다.) 아래 HTML.. 2011. 11. 22.
jQuery API 정복 - 수직 스크롤 이동, scrollTop() .scrollTop() 원문 링크 http://api.jquery.com/scrollTop/ 함수들 scrollTop() scrollTop() scrollTop( value ) .scrollTop( value ) .scrollTop()Returns : Integer 개요 : 조건에 일치하는 요소들 중 첫번째 요소의 스크롤바의 수직 위치(y좌표)를 얻을 수 있습니다. .scrollLeft() 수직(세로) 스크롤의 위치는 픽셀 수치입니다. 스크롤바가 아주 위쪽에 있거나 더이상 스크롤이 되지 않으며 그 수치는 0이 됩니다. 예 제 소스닫기 문단의 scrollLeft를 구해봅시다. Hello 미리보기 .scrollTop( value )Returns : jQuery 개요 : 조건에 일치하는 요소들의 수직 스크롤의.. 2011. 11. 22.
jQuery API 정복 - 수평 스크롤 이동, scrollLeft() .scrollLeft() 원문 링크 http://api.jquery.com/scrollLeft/ 함수들 scrollLeft() scrollLeft() scrollLeft( value ) .scrollLeft( value ) .scrollLeft()Returns : Integer 개요 : 조건에 일치하는 요소들 중 첫번째 요소의 스크롤바의 수평 위치(x좌표)를 얻을 수 있습니다. .scrollLeft() 수평(가로) 스크롤의 위치는 픽셀 수치입니다. 스크롤바가 아주 왼쪽에 있거나 더이상 스크롤이 되지 않으며 그 수치는 0이 됩니다. Note: .scrollLeft() when called directly or animated as a property using .animate() will not work .. 2011. 11. 22.
jQuery API 정복 - 요소 바꾸기, replaceWith() .replaceWith() 원문 링크 http://api.jquery.com/replaceWith/ .replaceWith( newContent )Returns : jQuery 개요 : 조건에 맞는 요소들을 newContent로 대체합니다. .replaceWith( newContent ) newContent 대체될 컨텐츠. HTML string, DOM element, jQuery object. .replaceWith( function ) function 대체될 컨텐츠를 반환하는 함수. .replaceWith() 함수는 새로운 컨텐츠로 바꾸고 대체된 요소는 DOM에서 제거합니다. DOM 구조를 예로 보시죠. Hello And Goodbye second inner 를 HTML로 바꿔보죠. $('div.se.. 2011. 11. 22.

티스토리툴바