본문 바로가기

jquery api187

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.
jQuery API 정복 - 요소 바꾸기, replaceAll() .replaceAll() 원문 링크 http://api.jquery.com/replaceAll/ .replaceAll( target )Returns : jQuery 개요 : 조건에 맞는 요소들을 타겟(target)요소들로 대체합니다. .replaceAll( target ) target 대체 요소를 나타내는 선택자 .replaceAll() 함수는 .replaceWith()를 모티브로 해서 만들었지만, 소스와 타겟의 위치는 바뀌어 있습니다. DOM 구조를 보시죠. Hello And Goodbye 엘리먼트=요소를 만들어서 다른 요소를 대체해 보시죠. $('New heading').replaceAll('.inner'); 결과는 아래처럼: New heading New heading New heading 또는, 기.. 2011. 11. 22.
jQuery API 정복 - property 제거, removeProp() .removeProp() 원문 링크 http://api.jquery.com/removeProp/ .removeProp( propertyName )Returns : jQuery 개요 : 일치하는 요소의 집합에서 속성을 제거 .removeProp( propertyName ) propertyName 속성명 .removeProp() 함수는 .prop()함수에서 추가한 속성을 제거합니다. 속성을 제거하려고 하면 DOM 요소 또는 window객체의 일부 속성에서 오류를 발생하기도 합니다. jQuery 에서는 먼처 을 할당하여 브라우저의 오류를 무시할 수 있도록 했습니다. 일반적으로, 이것은 내장(기본) 속성이 아닌 사용자가 지정한 속성을 제거하는데 필요합니다. Note: 이 함수는 checked, disabled,.. 2011. 11. 22.
jQuery API 정복 - 클래스 제거, removeClass() .removeClass() 원문 링크 http://api.jquery.com/removeClass/ .removeClass( [className] )Returns : jQuery 개요 : 조건에 일치하는 요소 집합의 각 요소들의 클래스를 DOM에서 제거합니다. .removeClass( [className] ) className 제거할 하나 이상의 공백으로 구성된 클래스들 .removeClass( function(index, class) ) function(index, class) 제거할 하나 이상의 공백으로 구성된 클래스명을 반환하는 함수. 집합에서의 위치를 나타내는 인덱스와 기존 클래스를 인자로 함 클래스 이름이 매개 변수로 포함된 경우, 해당 클래스가 일치하는 요소의 집합에서 제거됩니다. 공백으로 구.. 2011. 11. 22.
jQuery API 정복 - 속성 제거, removeAttr() .removeAttr() 원문 링크 http://api.jquery.com/removeAttr/ .removeAttr( attributeName )Returns : jQuery 개요 : 조건에 맞는 요소 집합에서 각 요소의 속성을 제거합니다. .removeAttr( attributeName ) attributeName 제거하기 위한 속성 .removeAttr() 함수는 JavaScript removeAttribute() 함수를 사용합니다. 하지만 .removeAttr() jQuery 객체를 바로 사용할 수 있고 다른 브라우져간 속성명이 상이함을 해소하는 부분과 같은 것에서 좀 더 유리한 점이 있습니다. Note: onclick 이벤트 핸들러에 .removeAttr() 함수를 사용하여 제거하려 한다면 In.. 2011. 11. 22.
jQuery API 정복 - 요소 제거, remove() .remove() 원문 링크 http://api.jquery.com/remove/ .remove( [selector] )Returns : jQuery 개요 : 조건에 맞는 요소를 DOM에서 제거합니다. .remove( [selector] ) selector 제거할 요소 집합을 찾아내기 위한 선택자 .empty() 와 .remove() 함수는 DOM에서 요소를 걷어내는 점에서 비슷합니다. .remove()를 사용하면 요소 자체 뿐만 아니라 그 안에 있는 모든 요소들이 제거됩니다. 추가적으로 요소들과 연관된 모든 이벤트와 jQuery 데이터들도 모두 제거됩니다. 데이터와 이벤트를 요소에서 제거하지 않으려면 .detach() 를 사용해야 합니다. 아래 HTML을 보시죠.(또 나왔네 헐) Hello Goodby.. 2011. 11. 22.
jQuery API 정복 - 선택된 모든 요소의 앞에 추가하기2, prependTo() .prependTo() 원문 링크 http://api.jquery.com/prependTo/ .prependTo( target )Returns : jQuery 개요 : 타겟의 시작 부분에 일치하는 요소 집합의 모든 요소를 삽입합니다. .prependTo( target ) target 선택자, 요소, HTML 문자열, 또는 jQuery 객체. .prepend() 와 .prependTo() 함수의 기능은 동일합니다. 가장 큰 차이점은 문법의 차이입니다. .prepend()는, 함수 앞에 선택자 표현을 하고 선택된 요소에 함수의 인자인 내용이 삽입됩니다. 반면 .prependTo()는, 함수의 인자로 선택자가 전달되어 요소를 선택한 후 함수 앞의 내용이 삽입됩니다. 매번 나오는 아래 HTML을 보시죠.(에혀~.. 2011. 11. 22.
jQuery API 정복 - 선택된 모든 요소의 앞에 추가하기, prepend() .prepend() 원문 링크 http://api.jquery.com/prepend/ .prepend( content [, content] )Returns : jQuery 개요 : 일치하는 요소 집합의 각 요소의 시작 부분에 매개 변수에 의해 지정된 내용을 삽입합니다. .prepend( content [, content] ) content 일치하는 요소의 집합 각 요소의 시작 부분에 삽입할 DOM 요소, 요소의 배열, HTML 문자열, 또는 jQuery 객체. content 일치하는 요소의 집합 각 요소의 시작 부분에 삽입할 하나 이상의 추가적인 DOM 요소, 요소의 배열, HTML 문자열 또는 jQuery 객체. .prepend( function(index, html) ) function(index, .. 2011. 11. 22.
jQuery API 정복 - 상대 좌표 구하기, position() .position() 원문 링크 http://api.jquery.com/position/ .position()Returns : Object 개요 : 조건에 일치하는 요소 집합 중 첫번째 요소의 문서 상의 부모 요소를 기준으로 한 상대적인 좌표값을 반환합니다. .position() .offset() 함수는 어떤 요소의 문서 상의 상대적인 현재 위치를 알 수 있습니다. 오프셋 부모에 대한 상대적인 위치를 알아내는 .position()과는 다소 대비됩니다. 전역(global) 조작(특히, 드래그앤드롭을 구현하기 위해)으로 새로운 요소를 기존의 요소에 위치하기 위해서는 .offset() 함수가 더 유용합니다. .offset() 함수는 객체의 속성 중 top 과 left 값을 반환해 줍니다. Note: jQuer.. 2011. 11. 22.
jQuery API 정복 - border 포함 넓이 구하기, outerWidth() .outerWidth() 원문 링크 http://api.jquery.com/outerWidth/ .outerWidth( [includeMargin] )Returns : Integer 개요 : 조건에 부합되는 요소들 중 첫번째 요소의 넓이값을 반환해 줍니다. padding, border 값을 포함됩니다. .outerWidth( [includeMargin] ) includeMargin margin값을 포함할지를 결정하는 Boolean 값. 왼쪽과 오른쪽 padding, border, 선택 요소인 margin 값을 포함한 요소의 넓이를 반환합니다. 만약 includeMargin 값이 생략되어 있거나 false 값이라면, padding과 border 값은 계산에 포함되지 않습니다. 만약 true라면, margi.. 2011. 11. 22.
jQuery API 정복 - border포함 높이 구하기, outerHeight() .outerHeight() 원문 링크 http://api.jquery.com/outerHeight/ .outerHeight( [includeMargin] )Returns : Integer 개요 : 조건에 부합되는 요소들 중 첫번째 요소의 높이값을 반환해 줍니다. padding, border, margin(조건에 따른) 값도 포함됩니다. "px"없는 정수 또는 요소집합이 없을 때 null 을 반환합니다. .outerHeight( [includeMargin] ) includeMargin margin값을 포함할지를 결정하는 Boolean 값. .outerHeight() 함수는 언제나 padding과 border값을 포함하여 계산해 줍니다. 만약 includeMargin 인자가 true로 세팅되어 있다면 mar.. 2011. 11. 22.
jQuery API 정복 - 좌표 찾기, offset() .offset() 원문 링크 http://api.jquery.com/offset/ 함수들 offset( ) .offset( ) offset( coordinates ) .offset( coordinates ) .offset( function(index, coords) ) .offset()Returns : Object 개요 : 조건에 일치하는 요소 집합 중 첫번째 요소의 문서 상의 상대적인 좌표값을 반환합니다. .offset() .offset() 함수는 어떤 요소의 문서 상의 상대적인 현재 위치를 알 수 있습니다. 부모 요소를 기준으로 한 상대적인 위치를 알아내는 .position()과는 다소 대비됩니다. 전역(global) 조작(특히, 드래그앤드롭을 구현하기 위해)으로 새로운 요소를 기존의 요소에 위치하기.. 2011. 11. 22.

티스토리툴바