본문 바로가기

jquery api187

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.
jQuery API 정복 - 요소 복사하기, clone() .clone() 원문 링크 http://api.jquery.com/clone/ .clone()Returns : jQuery 개요 : 함수는 일치하는 요소 집합의 깊은 복사(deep copy)를 합니다. .clone( [withDataAndEvents] ) withDataAndEvents 이벤트처리기에서 요소와 함께 복사를 할건지를 결정하는 부울값. .clone( [withDataAndEvents,] [deepWithDataAndEvents] ) withDataAndEvents 이벤트 핸들러와 데이터 요소와 함께 복사해야하는지 여부를 나타내는 부울값. 기본값은 false. deepWithDataAndEvents 이벤트 처리기와 복제된 요소의 모든 자식 요소 데이터를 복사해야하는지 여부를 결정하는 부울값. .. 2011. 11. 22.
jQuery API 정복 - 앞에 추가하기, before() .before() 원문 링크 http://api.jquery.com/before/ .before( content, [content] )Returns : String 개요 : 선택된 요소 앞(before)에 인자로 주어진 요소를 삽입합니다. .before( content, [content] ) content 삽입될 요소(HTML string, DOM element, jQuery object) content 추가로 삽입될 하나 이상의 요소들 (DOM elements, arrays of elements, HTML strings, jQuery objects) .before( function ) function 추가될 요소를 반환하는 함수. 함수는 HTML string, DOM element(s), jQuery .. 2011. 11. 22.
jQuery API 정복 - 새로운 요소 추가, appendTo() .appendTo() 원문 링크 http://api.jquery.com/appendTo/ .appendTo( target )Returns : jQuery 개요 : 새로운 요소를 타겟(target)에 해당하는 요소 마지막에 추가합니다. .attr( attributeName ) target 선택자(selector), 요소(element), HTML 문자열, jQuery 객체; 이 인자로 선택된 요소(들)에 새로운 요소가 추가됩니다. 이전 append()함수에서도 말씀드렸습니다. .append() 와 .appendTo() 함수는 동일한 기능을 합니다. 단, 추가될 컨텐츠와 타겟의 위치가 두 함수의 가장 큰 차이점입니다. append함수는 A.append(B)라면 A에 B를 추가하는 것이고 A.appendTo(.. 2011. 7. 26.
jQuery API 정복 - 마지막 자식 요소 추가, append() .append() 원문 링크 http://api.jquery.com/append/ .append( content, [content] )Returns : jQuery 개요 : 어떤 요소에 마지막 자식 요소를 새로 추가합니다. .append( content, [content] ) content 추가될 HTML 문자열, DOM 요소, 또는 jQuery 객체. content 추가될 하나 이상 복수개의 DOM 요소들, 요소 배열, HTML 문자열들, 또는 jQuery 객체들. .append( function(index, html) ) function(index, html) 선택된 요소 집합의 각 요소 별로 추가될 HTML 문자열을 반환해주는 함수. 집합을 구성하는 요소들의 인덱스를 인자로 받을 수 있습니다. .a.. 2011. 7. 20.
jQuery API 정복 - 뒤에 추가하기, after() .after() 원문 링크 http://api.jquery.com/after/ .after( content, [content] )Returns : jQuery 개요 : 어떤 요소 뒤에 새로운 요소를 추가합니다. .after( content, [content] ) content 추가될 HTML 문자열, DOM 요소, 또는 jQuery 객체 content 추가될 하나 이상 복수개의 DOM 요소들, 요소 배열, HTML 문자열들, 또는 jQuery 객체들 after( function(index) ) function(index) 추가될 HTML 문자열을 반환하는 함수 HTML 을 보시죠. Greetings Hello Goodbye 아래와 같은 스크립트를 적용해 볼까요. $('.inner').after('Test.. 2011. 7. 14.
jQuery API 정복 - 범위로 자르기, slice() .slice() 원문 링크 http://api.jquery.com/slice/ .slice( start, [end] )Returns : jQuery 개요 : 요소 집합을 인자로 주어진 범위로 축소시킵니다. 인덱스 번호 기준으로 잘라내는 겁니다. .slice( start, [end] ) start 0 값을 초기값으로 하는 집합을 잘라낼 인덱스의 시작 번호. 만약 음수값이 오면 집합의 인덱스 끝을 의미함. end 0 값을 초기값으로 하는 인덱스의 집합을 잘라낼 인덱스 종료 번호. 음수값이 오면 집합 인덱스 끝에서 부터 앞쪽으로 진행함. 생략되면 집합의 마지막 인덱스 까지를 의미함. .slice() 함수는 요소 집합의 특정 부분을 잘라내어 축소시킨 집합을 만들어 줍니다. start 인덱스는 잘라낼 시작위치를 .. 2011. 7. 7.
jQuery API 정복 - 형제 요소들 찾기, siblings .siblings() 원문 링크 http://api.jquery.com/siblings/ .siblings( [selector] )Returns : jQuery 개요 : 형제 요소들을 찾아 줍니다. 선택자를 인자로 줄 수 있습니다. .siblings( [selector] ) selector 선택자 .siblings() 함수는 DOM 트리 상의 형제 요소들을 찾아 새로운 jQuery 객체를 만들어 줍니다. 이 함수에는 $() 함수에 사용할 수 있는 모든 선택자 표현이 올 수 있습니다. 만일 그 선택자가 주어졌고 그 선택자에 의해 선택될 수 있는 바로 다음 요소들이 있다면 jQuery 객체가 반환되고 그렇지 않다면 제외됩니다. 예를 보시죠. list item 1 list item 2 list item 3 l.. 2011. 7. 6.
jQuery API 정복 - 이전에 있는 것들, prevAll() .prevAll() 원문 링크 http://api.jquery.com/prevAll/ .prevAll( [selector] )Returns : jQuery 개요 : 이전에 위치한 요소들을 모두 찾아 줍니다. 선택자를 인자로 가질 수 있습니다. .prevAll( [ selector ] ) selector 요소를 선택하기 위해 필요한 선택자 문자열 .prevAll() 함수는 DOM 트리를 기준으로 하여 조건에 맞는 모든 앞쪽 요소들을 새로운 jQuery 객체로 만들어 반환해 줍니다. 이 함수에는 $() 함수에 사용할 수 있는 모든 선택자 표현이 올 수 있습니다. 만일 선택자가 주어졌고 선택될 수 있는 바로 이전 요소들이 있다면 jQuery 객체에 포함되어 반환되고 그렇지 않다면 제외됩니다. 그럼 여기서 .p.. 2011. 7. 5.
jQuery API 정복 - 이전 요소 찾기, prev() .prev() 원문 링크 http://api.jquery.com/prev/ prev( [selector] )Returns : jQuery 개요 : 선택 집합의 각 요소별로 바로 이전에 오는 요소를 반환해 줍니다. 만일 선택자(selector)가 인자로 주어졌다면 그 선택자와 일치하는 요소만 반환이 됩니다. .prev( [ selector ] ) selector 요소를 선택하기 위해 필요한 선택자 문자열 .prev() 함수는 DOM 트리를 기준으로 하여 바로 이전 요소를 새로운 jQuery 객체로 만들어 반환해 줍니다. 이 함수에는 $() 함수에 사용할 수 있는 모든 선택자 표현이 올 수 있습니다. 만일 그 선택자가 주어졌고 그 선택자에 의해 선택될 수 있는 요소들이 있다면 결과에 포함되어 jQuery 객.. 2011. 7. 5.
jQuery API 정복 - 특정 조건을 만날 때까지 이전 요소들을 쭈욱, prevUntil() .prevUntil() 원문 링크 http://api.jquery.com/prevUntil/ .prevUntil( [selector,][filter] )Returns : jQuery 개요 : 이전에 위치한 요소를 찾아 반환하다 요소가 필터 조건에 부합될 경우 실행이 멈춥니다. .prevUntil( [selector,] [filter] ) selector 선택자 filter 영향을 받을 요소의 문자열 표현 .prevUntil( [element,] [filter] ) element 만났을 때 실행을 종료할 DOM 노드 또는 jQuery 객체 filter 영향을 받을 요소의 문자열 표현 본문에 보면 장황하게 설명되어 있습니다만 저는 짧게 하겠습니다. 이 함수는 어떤 조건을 만날때까지 특정한 행동을 할 수 있게.. 2011. 6. 30.
jQuery API 정복 - 특정 부모를 찾을 때까지, parentsUntil() .parentsUntil() 원문 링크 http://api.jquery.com/parentsUntil/ .parentsUntil( [selector,] [filter] )Returns : jQuery 개요 : 어떤 조건이 참이 될 때까지 부모 요소를 쭉 찾습니다. 선택자, DOM 노드, jQuery 객체가 일치할 경우 결과에 포함되지 않습니다.(마치 와우의 특성 설명을 보는 듯 하군하 ;;; 어설픈 직역 ㅜㅜ) .parentsUntil( [selector,] [filter] ) selector 선택자 표현 문자열 filter 일치하는 것을 찾기 위한 선택자 표현 문자열 .parentsUntil( [element,] [filter] ) element 부모요소를 찾기위한 DOM node 또는 jQuery 객.. 2011. 6. 29.
jQuery API 정복 - position으로 부모 찾기, offsetParent() .offsetParent() 원문 링크 http://api.jquery.com/offsetParent/ .offsetParent()Returns : jQuery 개요 : 위치(position) 요소를 기반으로 한 부모 요소를 찾습니다. .offsetParent() .offsetParent() 함수는 DOM 트리에 존재하는 부모요소들 중 위치(positioned)요소를 기준으로 가장 가까운 요소를 찾아서 jQuery 객체로 만들어(wrapped) 줍니다. 여기서 말한 위치(positioned)는 CSS의 속성인 relative, absolute, fixed를 의미합니다. 이런 정보들은 페이지상에서 객체들의 위치를 계산하기 위해 아주 유용합니다. 음. 좀 어렵네요. CSS의 포지션 속성을 좀 알아야 하고 거.. 2011. 6. 29.

티스토리툴바