본문 바로가기

jQuery228

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.
jQuery API 정복 - 부모들 찾기, parents() .parents() 원문 링크 http://api.jquery.com/parents/ .parents( [selector] )Returns : jQuery 개요 : 선택자에 의해 걸러진 요소집합의 각 요소들의 부모요소들을 찾습니다. .parents( [selector] ) selector 선택자 문자열 표현 .parent() 함수는 DOM 트리를 구성하는 요소들의 부모들을 찾아서 새로운 jQuery 객체 집합을 구성해 줍니다. 객체 집합은 추가되는 순서에 따라 인덱스가 부여됩니다. 부모요소가 반환되는 기준은 현재 요소에서 가까운 요소부터 먼 요소 순으로 반환됩니다. .parents() 와 .parent() 는 비슷하비만 DOM 의 깊이가 단일이냐 그 이상이냐의 차이가 있습니다. 이 함수에는 옵션으로 선택.. 2011. 6. 28.
jQuery API 정복 - 부모 찾기, parent() .parent() 원문 링크 http://api.jquery.com/parent/ .parent( [selector] )Returns : jQuery 개요 : 선택자에 의해 걸러진 요소집합의 각 요소들의 부모요소를 찾습니다. .attr( attributeName ) selector 선택자 문자열 표현 .parent() 함수는 DOM 트리를 구성하는 요소들의 부모들을 찾아서 새로운 jQuery 객체 집합을 구성해 줍니다. .parents() 와 .parent() 는 비슷하비만 DOM 의 깊이가 단일이냐 그 이상이냐의 차이가 있습니다. s가 붙으면 복수형!! 다들 아시죠?? :-) 이 함수에는 옵션으로 선택자를 인자로 넣을 수 있습니다. 또한 $() 와 같은 함수도 인자로 사용할 수 있습니다. 만약 인자를 .. 2011. 6. 28.
jQuery API 정복 - ~가 아닌 것, not() .not() 원문 링크 http://api.jquery.com/not/ .not( selector )Returns : jQuery 개요 : 조건에 맞지 않는 것들만 찾아줍니다. 말이 어렵네요. 조건에 해당되지 않는 것이라고 하는게 더 맞는 표현이겠네요. .not( selector ) selector 선택자 표현 .not( elements ) elements 하나 이상의 DOM 요소 표현 .not( function(index) ) function(index) 조건을 검사할 함수 .not() 함수를 사용하면 조건에 부합되는 DOM 요소들로 이루어진 새로운 jQuery 객체를 만들어 줍니다. 선택자가 제공되면 각 요소들을 테스트 하고 일치하지 않는 요소들을 결과에 포함시켜 줍니다. 자. 쉽게 예를 들어봅니다... 2011. 6. 27.
jQuery API 정복 - 조건이 맞을 때까지 쭈욱, nextUntil() .nextUntil() 원문 링크 http://api.jquery.com/nextUntil/ .nextUntil( [selector,][filter] )Returns : jQuery 개요 : 다음번에 오는 요소가 필터 조건에 부합될 경우 실행이 멈춥니다. .nextUntil( [selector,] [filter] ) selector 선택자 filter 영향을 받을 요소의 문자열 표현 .nextUntil( [element,] [filter] ) element 만났을 때 실행을 종료할 DOM 노드 또는 jQuery 객체 filter 영향을 받을 요소의 문자열 표현 본문에 보면 장황하게 설명되어 있습니다만 저는 짧게 하겠습니다. 그리 중요한 함수로 보이지는 않아서요. 이 함수는 어떤 조건을 만날때까지 특정한 .. 2011. 6. 22.
jQuery API 정복 - 현재 요소의 다음 요소 모두, nextAll() .nextAll() 원문 링크 http://api.jquery.com/nextAll/ .nextAll( [selector] )Returns : jQuery 개요 : 선택 집합의 각 요소별로 바로 다음에 오는 모든 요소등을 반환해 줍니다. 선택자를 인자로 가질 수 있습니다. .nextAll( [ selector ] ) selector 요소를 선택하기 위해 필요한 선택자 문자열 .nextAll() 함수는 DOM 트리를 기준으로 하여 조건에 맞는 모든 후임 요소들을 새로운 jQuery 객체로 만들어 반환해 줍니다. 이 함수에는 $() 함수에 사용할 수 있는 모든 선택자 표현이 올 수 있습니다. 만일 그 선택자가 주어졌고 그 선택자에 의해 선택될 수 있는 바로 다음 요소들이 있다면 jQuery 객체가 반환되고 .. 2011. 6. 21.
jQuery API 정복 - 현재 요소의 바로 다음 요소, next() .next() 원문 링크 http://api.jquery.com/next/ .next( [selector] )Returns : jQuery 개요 : 선택 집합의 각 요소별로 바로 다음에 오는 요소를 반환해 줍니다. 만일 선택자(selector)가 인자로 주어졌다면 그 선택자와 일치하는 요소만 반환이 됩니다. .next( [ selector ] ) selector 요소를 선택하기 위해 필요한 선택자 문자열 .next() 함수는 DOM 트리를 기준으로 하여 바로 다음 요소를 새로운 jQuery 객체로 만들어 반환해 줍니다. 이 함수에는 $() 함수에 사용할 수 있는 모든 선택자 표현이 올 수 있습니다. 만일 그 선택자가 주어졌고 그 선택자에 의해 선택될 수 있는 바로 다음 요소들이 있다면 jQuery 객체가.. 2011. 6. 9.
jQuery API 정복 - 결과를 배열로 돌려받기, map() .map() 원문 링크 http://api.jquery.com/map/ .map( callback(index, domElement) )Returns : jQuery 개요 : 현재 선택 집합의 각 요소들에 함수를 사용하면 반환되는 값을 포함하는 새로운 jQuery 객체를 얻어낼 수 있습니다. .map( callback(index, domElement) ) callback(index, domElement) 현재 세트의 각 요소들을 호출하는 함수 객체(ㅡㅡ; 뭘까요?) 위쪽에 설명된 내용들은 사실 잘 와닿지 않습니다. 제 발번역 탓도 있지만 직관적으로 설명이 되어 있지 않습니다. 이 함수를 테스트해 보았습니다. 결과적으로는 함수 내에 있는 연산을 통해 반환되는 결과값들이 배열과 같은 모양으로 구성된다는 것입니.. 2011. 6. 8.
jQuery API 정복 - 마지막 요소 찾기, last() .last() 원문 링크 http://api.jquery.com/last/ .last()Returns : jQuery 개요 : 선택된 요소 집합에서 마지막 요소를 선택하게 해주는 함수입니다. .last() 아래 마크업을 예로 들겠습니다. list item 1 list item 2 list item 3 list item 4 list item 5 위와같이 리스트를 구성하는 html 이 있다고 하고 아래 스크립트를 적용해 보겠습니다. list item 5의 배경색이 빨간색이 됩니다. 참 쉽죠~ $('li').last().css('background-color', 'red'); 예 제 소스닫기 p 태그안의 마지막 span 태그를 찾아 강조효과를 줍니다. Look: This is some text in a par.. 2011. 5. 31.