본문 바로가기

jQuery228

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.
jQuery API 정복 - 앞에 추가하기, insertBefore() .insertBefore() 원문 링크 http://api.jquery.com/insertBefore/ .insertBefore( target )Returns : jQuery 개요 : 타겟 앞에 조건에 일치되는 요소를 삽입합니다. .insertBefore( target ) target 선택자(selector), 요소(element), HTML 문자열, jQuery 객체. .before() 와 .insertBefore() 함수는 동일한 기능을 합니다. 중요한 차이점은 내용과 대상의 위치 차이에 있습니다. .before()는 이 함수 앞에 표현된 선택자이고 그 앞에 내용이 삽입됩니다. 반면 .insertBefore()은 함수 앞에 내용이 함수의 인자로 주어진 타겟 요소 앞에 삽입됩니다. (계속 반복되는 얘기.. 2011. 11. 22.
jQuery API 정복 - 뒤에 추가하기, insertAfter() .insertAfter() 원문 링크 http://api.jquery.com/insertAfter/ .insertAfter( target )Returns : jQuery 개요 : 조건에 일치되는 요소 뒤에 target에 해당되는 요소를 삽입합니다. .innerWidth( target ) target 선택자(selector), 요소(element), HTML 문자열, jQuery 객체. .after() 와 .insertAfter() 함수는 동일한 기능을 합니다. 중요한 차이점은 내용과 대상의 위치 차이에 있습니다. A.after(B)라면 A 뒤에 B를 추가하는 것이고 A.insertAfter(B)는 B 뒤에 A를 추가하는 겁니다. 아래 HTML을 보시죠. Greetings Hello Goodbye 아래 처.. 2011. 11. 22.
jQuery API 정복 - padding을 포함한 넓이 제어, innerWidth() .innerWidth() 원문 링크 http://api.jquery.com/innerWidth/ .innerWidth()Returns : Integer 개요 : 조건에 부합되는 요소들 중 첫번째 요소의 넓이값을 반환해 줍니다. border 값은 제외되고 padding값은 포함됩니다. .innerWidth() 이 함수는 요소의 top, bottom padding 값을 포함한 넓이를 반환합니다. 이 함수는 window 와 document 객체의 넓이를 알아낼 수는 없습니다. 그것들의 넓이를 알고 싶을 때는 .width() 함수를 사용하시면 됩니다. 예 제 소스닫기 문단(p 태그)의 내부넓이(innerWidth)를 구합니다. Hello 미리보기 그럼 즐프하세요. ※ 본 예제는 http://www.jquery... 2011. 11. 22.
jQuery API 정복 - padding 포함 높이 제어, innerHeight() .innerHeight() 원문 링크 http://api.jquery.com/innerHeight/ .innerHeight()Returns : Integer 개요 : 조건에 부합되는 요소들 중 첫번째 요소의 높이값을 반환해 줍니다. border 값은 제외되고 padding값은 포함됩니다. .innerHeight() 이 함수는 요소의 top, bottom padding 값을 포함한 높이를 반환합니다. 이 함수는 window 와 document 객체의 높이를 알아낼 수는 없습니다. 그것들의 높이를 알고 싶을 때는 .height() 함수를 사용하시면 됩니다. 예 제 소스닫기 문단(p 태그)의 내부높이(innerHeight)를 구합니다. Hello 미리보기 그럼 즐프하세요. ※ 본 예제는 http://www.j.. 2011. 11. 22.
jQuery API 정복 - 요소 높이 제어, height() .height() 원문 링크 http://api.jquery.com/height/ 함수들 height( ) .height() height( value ) .height( value ) .height( function(index, height) ) .height()Returns : Integer 개요 : 일치된 요소 집합 중 첫번째 요소에 대해 현재의 계산된 높이를 얻을 수 있습니다. .height() .css('height') 와 .height() 간의 차이점은 픽셀 텍스트의 유무에 있습니다. 예를 들어, 400 와 400px의 차이입니다. .height() 함수는 수학적인 계산을 필요로 할때 사용하시면 됩니다. 또한 이 함수는 window와 document의 높이를 알고 싶을 때 사용할 수도 있습니다... 2011. 11. 22.
jQuery API 정복 - 텍스트 비우기, empty() .empty() 원문 링크 http://api.jquery.com/empty/ .empty()Returns : jQuery 개요 : DOM에서 조건에 일치하는 요소들의 자식 노드들을 제거합니다. .empty() 이 함수는 자식 요소(자손까지 포함한) 뿐만 아니라 일치하는 요소 내의 텍스트를 제거합니다. DOM 스펙에 의해 요소 내의 텍스트 문자열은 그 요소의 자식 요소로 간주되기 때문입니다. Hello Goodbye 타겟을 정해서 제거하려면 $('.hello').empty(); 스크립트의 결과는 Hello 요소의 텍스트를 제거하게 됩니다. Goodbye 만약 내부에 중첩되는 요소가 있다면, 그것들도 역시 제거됩니다. 메모리 누수(memory leak)를 피하기 위해 jQuery는 요소를 제거하기 전 자식.. 2011. 11. 22.
jQuery API 정복 - 요소 제거, detach() .detach() 원문 링크 http://api.jquery.com/detach/ .detach( [selector] )Returns : jQuery 개요 : DOM 에서 조건에 일치되는 요소들을 제거합니다. .detach( [selector] ) selector 제거될 요소를 선택하는 선택자 .detach() 함수는 .remove()입니다. 대신 .detach() 함수에 의해 제거된 요소들은 모두 jQuery 데이터 형태로 유지됩니다. 즉, 이 함수는 DOM에서 제거했다가 추후에 다시 삽입하는 형태로 사용하기 아주 유용합니다. 예 제 소스닫기 DOM 에서 모든 p 태그들을 떼어(detach)냅니다. Hello how are you? Attach/detach paragraphs 미리보기 한마디로 붙였다 .. 2011. 11. 22.
jQuery API 정복 - 속성을 제어, css() .css() 원문 링크 http://api.jquery.com/css/ 함수들 css( propertyName ) .css( propertyName ) css( propertyName , value ) .css( propertyName, value ) .css( propertyName, function(index, value) ) .css( map ) .css( propertyName )Returns : String 개요 : 일치하는 요소들 중에 첫번째 요소의 속성값을 반환합니다. .css( propertyName ) propertyName CSS 속성값 .css() 함수는 첫번째 element의 속성값을 알아내는 아주 좋은 함수입니다. 특히 여러 속성들을 다르게 취급하는 브라우저들을 대상으로 할때 아주.. 2011. 11. 22.

티스토리툴바