본문 바로가기

프로그래밍/jQuery237

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.
jQuery API 정복 - 맞는지 확인하기, is() .is() 원문 링크 http://api.jquery.com/is/ .is( selector )Returns : Boolean 개요 : 인자로 주어진 selector, element, jQuery 객체에 해당하는 것이 하나라도 있으면 'true'를 반환해 줍니다. .is( selector ) selector 일치하는 요소를 찾기 위해 문자열로 표현된 선택자 .is( function(index) ) function(index) 요소들의 집합을 테스트하기 위한 함수. 이 함수는 하나의 인자인 index를 가지고 이것은 jQuery 집합에서의 인덱스를 뜻함. 이 함수에서 사용되는 this 메소드는 현재 DOM 요소를 가리킴. .is( jQuery object ) jQuery object 요소 집합에서 일치하는.. 2011. 5. 30.
jQuery API 정복 - 가지고 있나 없나? has() .has() 원문 링크 http://api.jquery.com/has/ .has( selector )Returns : jQuery 개요 : 선택된 요소들이 자신의 자식 요소에서 주어진 선택자가 있는지 확인하여 범위를 축소합니다. .has( selector ) selector 요소를 찾을 수 있는 선택자 문자열 .has( contained ) contained 요소를 찾을 수 있는 DOM 요소 .has() 함수를 사용하면 요소 집합의 범위를 축소할 수 있습니다. 주어지는 선택자에 대해 선택될 요소가 있는지 자식 요소들을 탐색하여 새로운 jQuery 집합을 생성해 냅니다.(앞쪽부터 계속 반복적인 내용이 나오네요.) 아래 마크업을 먼저 보시기 바랍니다. list item 1 list item 2 list it.. 2011. 5. 25.
jQuery API 정복 - 첫번째 요소 찾기, first() .first() 원문 링크 http://api.jquery.com/first/ .first()Returns : jQuery 개요 : 선택된 요소 집합에서 첫번째 요소를 선택하게 해주는 함수입니다. .first() 아래 마크업을 예로 들겠습니다. list item 1 list item 2 list item 3 list item 4 list item 5 위와같이 리스트를 구성하는 html 이 있다고 하고 아래 스크립트를 적용해 보겠습니다. $('li').first().css('background-color', 'red'); list item 1의 배경색이 빨간색이 됩니다. 참 쉽죠~ 예 제 소스닫기 p 태그안의 첫번째 span 태그를 찾아 강조효과를 줍니다. Look: This is some text in .. 2011. 5. 24.
jQuery API 정복 - 하위 요소 전부 찾기, find() .find() 원문 링크 http://api.jquery.com/find/ .find( selector )Returns : jQuery 개요 : 선택된 요소 집합에서 선택자, jQuery 객체, 요소와 같은 인자에 맞는 요소들을 걸러내어 줍니다. .find( selector ) selector 일치하는 요소를 위한 선택자가 표현된 문자열 .find( jQuery object ) jQuery object 요소를 찾을 jQuery 객체 .find( element ) element 요소를 찾을 요소 표현 jQuery 객체를 이용해서 표현된 DOM 요소 집합에 .find() 함수를 사용하면 DOM tree 에서 하위(자식) 요소들을 찾아내어 새로운 jQuery 객체를 생성합니다. .find()와 .childre.. 2011. 5. 19.
jQuery API 정복 - 선택 요소 집합에서 추출하기, filter() .filter() 원문 링크 http://api.jquery.com/filter/ .attr( attributeName )Returns : String 개요 - 선택된 요소 집합에서 선택자를 추가하여 집합을 축소시키거나 함수의 테스트를 위해 인자를 전달합니다.(ㅡㅡ;; 당췌 뭔소린지 모르겠습니다. 아마 아래 예제를 쭈욱 보셔야 할 듯해요.) .filter( selector ) selector 현재 선택된 요소들의 집합 안에서 재추출(filter)를 위한 선택자를 표현하는 문자열 .filter( function(index) ) function(index) 집합에 속한 요소들을 테스트 할 함수. this 키워드는 현재 요소를 지칭함 .filter( element ) element 선택된 요소들 중에서 찾을 .. 2011. 5. 12.
jQuery API 정복 - 인덱스로 요소 찾기, eq() .eq() 원문 링크 http://api.jquery.com/eq/ .eq( index )Returns : jQuery 개요 : 인덱스 번호가 해당하는 요소를 찾습니다. .eq( index ) index 0이 초기값이며 요소의 위치를 표시하는 정수값 .eq( -index ) index 맨 마지막 요소부터 역순으로 표시하는 음수형 정수값 DOM 구조를 표현하는 jQuery 의 요소인 .eq()함수는 요소 집항에서 하나를 추출하여 새로운 jQuery 객체를 만들어 냅니다. 요소 집합에서 추출할 수 있는 인덱스가 제공되어야 합니다. 아래 리스트를 구성하는 마크업을 보시죠. list item 1 list item 2 list item 3 list item 4 list item 5 위 리스트에 함수를 사용해 본다.. 2011. 5. 2.
jQuery API 정복 - 이전 선택요소로 돌아가기, end() .end() 원문 링크 http://api.jquery.com/end/ .end()Returns : jQuery 개요 : 현재의 연속적인 계산 명령(chain 이라고 표현된)의 종료하고 선택 집합의 이전 요소를 찾아 반환해 줍니다. .end() jQuery의 DOM 탐색 함수의 대부분은 jQuery 객체 인스턴스에서 작동하고 새로운 객체를 만들어 또 다른 DOM 요소 집합을 찾습니다. 이러한 상황이 발생하면, 그것은 개체 내부에 유지되는 스택에 새로운 집합 요소가 밀고들어 가는 것처럼 됩니다. 탐색 메소드가 성공적으로 실행될 때마다 스택에 새로운 요소들이 추가됩니다. 그런데 만약 스택에 쌓여있던 기존 요소가 필요하게 된다면 어떻게 해야 할까요? 바로 end()를 사용하면 되는 것입니다. 와우, 어렵습니다.. 2011. 4. 29.
jQuery API 정복 - 선택된 요소만큼 루프, each() .each() 원문 링크 http://api.jquery.com/each/ .each( function(index, Element) )Returns : jQuery 개요 : jQuery 객체 만큼 반복하고, 선택된 요소들에 함수를 실행합니다. .each( function(index, Element) ) function(index, Element) 선택된 요소에 실행될 함수 .each() 함수는 DOM의 기본 Loop 개념을 간결하고 최소한의 오류 발생을 위해 만들어 졌습니다. DOM 요소들 즉, jQuery 객체들을 위해 반복 로직을 처리하기 위해 만들어졌습니다. 0 을 인덱스의 초기값으로 하여 콜백 함수가 실행됩니다. 더 눈여겨 봐야 할 것은, this키워드를 사용하면 현재 콜백되고 있는 DOM 요소에.. 2011. 4. 28.
jQuery API 정복 - 텍스트 노드를 포함한 자식요소 가져오기, contents() .contents()함수는 일치하는 요소 내부의 텍스트 노드를 포함한 자식요소들을 가져올 수 있는 함수입니다. 원문 링크 http://api.jquery.com/contents/ .contents()Returns : jQuery .contents() jQuery 객체는 DOM 요소 집합들을 표현할 수 있습니다. .contents() 함수는 DOM 트리에서 선택된 요소들의 자식 요소들을 찾아 내는 동시에 새로운 jQuery 객체를 생성할 수도 있습니다. .contents() 함수와 .children() 함수는 유사한 함수입니다. 단, 반환되는 결과에 텍스트 노드(text node)의 존재여부의 차이점이 있습니다. .contents 함수는 아이프레임의 내용도 가져올 수 있습니다. 단 조건이 있는데 아이프레임.. 2011. 4. 26.
jQuery API 정복 - 현재 요소에서 가장 가까운 선택 요소, closest() .closest() 원문 링크 http://api.jquery.com/closest/ 함수들 closest( selector ) .closest( selector ) closest( selector, [ context ] ) closest( selectors, [ context ] ) .closest( selectors, [ context ] ) .closest( selector )Returns : jQuery 개요 : 선택된 요소의 최초의 부모 요소를 얻을 수 있습니다. 현 시점의 요소에서 시작하여 DOM 트리의 마지막 부분까지 조회합니다. .closest( selector ) selector 선택할 요소를 표현하는 문자열 .closest( selector, [ context ] ) selector 선.. 2011. 4. 21.
jQuery API 정복 - 자식 요소들 찾기, children() .children( [ selector ] ) 함수는 필터된 선택자와 일치하는 요소들 각각의 자식 요소들을 가져올 수 있습니다. 원문 링크 http://api.jquery.com/children/ .children( [ selector ] )Returns: jQuery .children( [ selector ] ) selector 일치하는 요소들 중에서 추가적으로 선택할 수 있는 선택자 문자열 jQuery 객체는 DOM 요소들의 집합으로 표현됩니다. .children()함수는 DOM 트리에서 자식 요소들을 즉시 찾을 수 있도록 해주고 일치되는 요소들을 새로운 jQuery 객체로 만들어 줍니다. .find()와 .children()함수는 아주 유사하지만 DOM 트리에서 레벨 1의 위치- 첫번째 깊이-만 검.. 2011. 4. 7.