jQuery228 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. jQuery API 정복 - 선택된 요소들 이어 붙이기, andSelf() .andSelf() 함수는 기존에 선택된 요소에 신규로 선택된 요소들을 스택(stack) 구조로 추가할 수 있습니다. 원문 링크 http://api.jquery.com/andSelf/ .andSelf()Returns: jQuery .andSelf() .end()함수 소개 때에 다시 다루겠지만, jQuery 객체는 매칭되는 요소들의 집합의 구조가 스택(stack)구조로 되어 있습니다. DOM을 검색하는 함수를 사용하면 신규 매칭 요소 집합은 스택 구조로 구성이 됩니다. 만일 이전에 구성되어 있는 요소집합에 이어붙이기를 하시길 원하면 .andSelf함수를 사용하시면 됩니다. jQuery 얘기 중에 스택이 나올 줄은 몰랐네요. ^^;; 먼저 스택에 대해 간단하게 소개드리겠습니다. 스택이란 자료구조의 한 부분입.. 2011. 3. 24. jQuery API 정복 - 선택요소 확장하기, add() .add() 함수는 선택할 요소를 확장시키는 기능을 합니다. 절대로 요소를 추가해서 넣는 함수가 아닙니다. (저 그런 줄 알고 포스트 작성하다가 중간쯤에 아닌 걸 알았습니다. ㅜㅜ 그래서 지금 처음부터 다시 작성중이어요 어엉..) 원문 링크 http://api.jquery.com/add/ .add( selector )Returns: jQuery .add( selector ) selector 선택자를 표현하는 문자열로 해당 선택자를 추가 적용 할 수 있음 .add( elements ) elements 선택할 요소를 확장시킬 이상의 신규 요소 .add( html ) html html 표현에 해당하는 요소를 추가하여 선택 영역 확장 .add( selector, context ) selector 선택자를 표현하.. 2011. 3. 21. jQuery API 정복 - 폼의 value 가져오기, val() .val() 양식(form)에 들어있는 value 들을 제어할 수 있는 함수입니다. 원문 링크 http://api.jquery.com/val/ 함수들 val() .val() val( value ) .val( value ) .val( function(index, value) ) .attr( attributeName )Returns : String, Array 개요 : 선택된 요소 집합에서 첫번째 요소의 value를 반환한다. .val() .val() 함수는 양식(form) 요소들의 값을 위해 많이 사용되는 함수입니다. 만일 라는 태그에 val() 함수를 사용하면 선택된 옵션(option)들의 value를 배열(array)로 반환해 줍니다. 선택박스(select)나 체크(checkbox)에 사용한다면 :se.. 2011. 3. 17. jQuery API 정복 - 클래스 토글하기, toggleClass .toggleClass() 함수는 특정한 클래스의 추가/제거를 한번에 처리할 수 있습니다. 원문 링크 http://api.jquery.com/toggleClass/ .toggleClass( className )Returns: jQuery 개요 : 선택자에 의해 선택된 요소 집합에 클래스를 설정/제거 할수 있습니다. 클래스를 변경할 조건을 설정할 수도 있습니다. .toggleClass( className ) className 선택 요소 집합의 클래스를 토글할 하나 이상의(공백으로 구분되는) 클래스명 .toggleClass( className, switch ) className 선택 요소 집합의 클래스를 토글할 하나 이상의(공백으로 구분되는) 클래스명 switch 클래스가 추가되거나 삭제될 조건문 .togg.. 2011. 3. 15. jQuery API 정복 - 클래스 제거, removeClass() .removeClass() 함수는 특정한 클래스를 요소에서 제거할 수 있습니다. 원문 링크 http://api.jquery.com/removeClass/ .removeClass( [ className ] )Returns: jQuery 개요 : 특정 조건에 맞는 요소 집합에서 한개, 여러개, 모든 클래스를 제거할 수 있습니다. .removeClass( [ className ] ) className 특정 조건에 맞는 요소에서 제거될 클래스 명 .removeClass( function(index, class) ) function(index, class) 함수에서 반환된 하나 또는 띄어쓰기로 구분된 그 이상의 클래스를 추가할 수 있습니다. Receives the index position of the eleme.. 2011. 3. 14. jQuery API 정복 - 속성 제거, removeAttr() .removeAttr() 함수로 요소의 속성을 제거할 수 있습니다. 원문 링크 http://api.jquery.com/removeAttr/ .removeAttr( attributeName )Returns: jQuery .removeAttr( attributeName ) attributeName 제거할 속성명 .removeAttr() 함수는 자바스크립트의 기본 함수인 .removeAttribute() 함수를 이용한 것입니다. 하지만 jQuery 객체를 바로 사용할 수 있고 크로스 브라우징이 되는 장점이 있습니다. 예 제 소스닫기 버튼을 클릭하면 disable 속성이 제거되어 text 박스가 활성화 됩니다. Enable 미리보기 버튼을 클릭하면 텍스트 박스가 살아납니다. .attr() 은 추가 .remove.. 2011. 3. 11. jquery API 정복 - innerHTML 과 같은 표현, html() .html() 원문 링크 http://api.jquery.com/html/ 함수들 html() .html() html( htmlString ) .html( htmlString ) .html( funtion(index, oldhtml) ) .html()Returns : String 개요 : 일치하는 요소 내부의 html을 문자열로 반환한다. .html() html() 함수는 XML 문서에는 사용할 수 없습니다. HTML 문서에서 어떤 요소의 내부 내용을 알아내고자 할때 html() 함수를 사용할 수 있습니다. 만일 선택자에 의해 선택된 요소가 복수개일 경우 제일 처음 요소의 값만 취합니다. 아래 예제를 보도록 하죠. $('div.demo-container').html(); 이 구문은 div 태그들중 dem.. 2011. 3. 10. jQuery API 정복 - 클래스가 있나 찾기, hasClass() .hasClass() 함수는 특정한 클래스가 있는지 찾습니다. 원문 링크 http://api.jquery.com/hasClass/ .hasClass( className )Returns: Boolean .addClass( className ) className 찾고자 하는 클래스명 요소들(elements)들은 하나 이상의 클래스명을 가질 수 있습니다. HTML 은 띄어쓰기(space)로 클래스명을 구분합니다. .hasClass() 함수는 클래스명이 일치하는 것이 있을 경우 true를 반환합니다. 여러개가 같이 사용된 클래스에 속해 있을 경우에도 같은 결과를 나타냅니다. 위의 HTML을 아래 예제와 같이 하면 true가 반환됩니다. $('#mydiv').hasClass('foo') foo 와 bar 가 같이.. 2011. 3. 3. jQuery API 정복 - attr(), 속성을 제어하기 .attr() 인자에 따라 2가지로 사용할 수 있습니다. 하나의 인자만 있다면 속성값을 가져오는 것이고 2개의 인자를 쓰면 속성값을 요소에 부여하는 것입니다. 아래 2가지 사용방법에 대해 설명되어 있습니다. 원문 링크 http://api.jquery.com/attr/ 함수들 attr( attributeName ) .attr( attributeName ) attr( attributeName, value ) .attr( attributeName, value ) .attr( map ) .attr( attributeName, function(index, attr) ) .attr( attributeName )Returns : String 개요 : 선택된 요소 집합에서 첫번째 요소의 attributeName에 해당.. 2011. 2. 25. 이전 1 ··· 5 6 7 8 9 10 11 12 다음