본문 바로가기

web2.0

[jQuery강좌] 12. jQuery Traverse - Tree Traversal by 승연아빠님 웹 프런티어와 함께 하는 jQuery 기초강좌 12th - jQuery Traverse(탐색) 세 번째 이야기 - Tree Traversal 탐색(Traverse) 메서드의 마지막 시간으로 이번에는 Tree 와 관련된 메서드에 대해 알아 보도록 하겠습니다. Tree Traversal Tree하면 생각나는 그 강좌가 있지 않으시나요 ? Hierarchy Selector진행 시 HTML DOM에 대한 내용 기억하시나요 ? 이번 시간도 DOM을 이용하는 부분이니, 혹시라도 기억이 나지 않으시면 미리 한번 확인을 해 보시고 이번 강좌를 보시면 도움이 많이 되지 않을까 합니다. 이전에 작성했던 강좌와 동일하게 우선 jQuery에서 지원하고 있는 메서드의 목록을 알아 보도록 하겠습니다. 아래에 나열된 목록과 설명은.. 더보기
[jQuery강좌] 11. jQuery Traverse - Miscellaneous Traversing by 승연아빠님 웹 프런티어와 함께 하는 jQuery 기초강좌 11th - jQuery Traverse(탐색) 두 번째 이야기 - Miscellaneous 탐색 메서드 두 번째 시간으로 이번에는 Miscellaneous 메서드에 대해 알아 보도록 하겠습니다. 우선 Miscellaneous 메서드의 종류를 정리하면 다음과 같습니다. 메서드 메서드 설명 .add() 일치하는 요소의 집합에 요소를 추가합니다. .andSelf() 현재 설정 스택에 요소의 이전 설정을 추가합니다. .contents() 텍스트 및 주석 노드를 포함 일치하는 요소 집합의 자식 집합을 반환합니다. .end() 이전 상태로 일치하는 집합을 반환합니다. 표 1. [jQuery Miscellaneous 메서드 종류] Miscellaneous의 뜻을 사전에.. 더보기
[jQuery강좌] 10. jQuery Traverse - Filtering by 승연아빠님 웹 프런티어와 함께하는 jQuery 기초강좌 10th - jQuery Traverse(탐색) 첫 번째 이야기 필터링 jQuery의 탐색(Traverse) 메서드를 이용하여 셀렉터에 날개를 달자 “Traverse”는 위에 보시는 바와 같이 가로지르다, 횡단이란 뜻을 가지고 있으며, jQuery에서 지원하는 Traverse 메서드 또한 HTML을 가로지르거나, 횡단하는 것 처럼 탐색하는 역할을 합니다. 해당 메서드를 간략히 설명하면 셀렉터를 통해 선택한 개체에서 다시 한번 개체를 찾고, 필터링하고, 추가하는 작업을 쉽게 구현 할 수 있도록 도와주는 메서드라고 생각 하시면 됩니다. 물론 기존의 셀렉터를 통해서도 충분히 원한는 개체를 탐색하거나, 선택 하는데 큰 지장이 없습니다만, Traverse 메서드를 이용.. 더보기
[jQuery강좌] 9. jQuery Filter - 자식필터(Child Filter) by 승연아빠님 웹 프런티어와 함께하는 jQuery 기초강좌 9th - jQuery Filter의 자식(Child) 필터의 사용 지난 시간에 설명드린 필터의 사용법에 이어 자식(?Child) 필터에 대해 알아 보기로 하겠습니다. 자식(Child)에 대한 내용을 모르고 계신다면 이전에 설명드린 HTML DOM에 대한 강좌를 한번 확인 하시기 바랍니다. 자식필터 아래 목록을 통해 나열된 내용을 보면 이번강의 초반에 나왔던 필터와 비슷하게 보이실 겁니다. 사용하는 구문도 많은 부분이 비슷하지만 결과는 정말 다릅니다. 우선 자식필터(Child Fiter)에 대해 간단히 정리하고 앞서 말한 결과의 차이에 대해 알아 보기로 하겠습니다. 필터 종류 및 형식 필터 설명 :first-child 자식 요소 중 첫번째에 해당하는 요소를 모.. 더보기
[jQuery강좌] 8. jQuery Filter - 폼 필터(Form Filter) by 승연아빠님 웹 프런티어와 함께하는 jQuery 기초강좌 8th - jQuery Filter의 폼(Form) 필터의 사용 지난 시간에 설명드린 기본 필터의 사용법에 이어 폼(Form) 필터에 대해 알아 보기로 하겠습니다. 폼 필터 폼 필터는 형식(text, checkbox, password, radio, file)을 기반으로 하는 폼 요소를 선택할 때 사용하는 필터로 사용법은 필터와 동일하여, 자세한 설명보다는 아래의 표로 대신 합니다. 폼 필터 종류 선택 폼 :button :checkbox :checked :disabled :enabled :file :focus (1.6 이상에서 지원) :image :input 모든 input 요소 :password :radio :reset :selected :submit :tex.. 더보기
[jQuery강좌] 7. jQuery Filter - 기본필터(Basic Filter) by 승연아빠님 프런티어와 함께하는 jQuery 기초강좌 7th - jQuery Filter의 기본필터의 사용 이번 시간에는 jQuery 에서 제공하는 필터에 대해서 알아 보겠습니다. 부제를 붙이자면 "셀렉터와 필터의 만남"이 될꺼 같습니다. 셀렉터에 날개를 달자 ? Filter를 이용한 개체 접근 이번 강좌에서는 jQuery에서 지원하고 있는 여러가지 필터중에 기본이 되는 부분과 jQuery의 DOM 필터 메서드,(filter())를 사용하여 사용자가 원하는 요소를 선택하는 방법에 대해 알아 보도록 하겠습니다. 형식(표현식) 설명 :animated 에니메이션이 동작중인 모든 요소와 일치하는 요소를 반환합니다. :eq(index) Index에 해당하는 요소를 반환합니다.(단일요소) :even 짝수의 요소를 반환합니다. .. 더보기
[jQuery강좌] 6. jQuery Selector - DOM 계층(Hierarchy)을 이용한 요소 접근 (2) by 승연아빠님 웹 프런티어와 함께하는 jQuery 기초강좌 6th - DOM 계층(Hierarchy)을 이용한 요소 접근(2) 이전 시간에 알아본 HTML DOM을 jQuery에서 지원하는 DOM 접근 방법에 대해 알아 보도록 하겠습니다. jQuery 계층 접근 셀렉터의 종류 jQuery에서는 다음과 같이 4개의 계층 접근용 셀렉터를 지원하고 있으며, 각각의 사용법에 대해서는 간단한 예제와 함께 알아 보도록 하겠습니다. 형식(셀렉터) 셀렉터 표현식 Child Selector $(“parent > child”) Descendant Selector $(“ancestor descendant”) Next Adjacent Selector $(“prev + next”) Next Siblings Selector $(“prev ~ .. 더보기
[jQuery강좌] 5. jQuery Selector - DOM 계층(Hierarchy)을 이용한 요소 접근 (1) by 승연아빠님 웹 프런티어와 함께하는 jQuery 기초강좌 5th - DOM 계층(Hierarchy)을 이용한 요소 접근 - 첫 번째 이야기 DOM의 이해 이번시간에는 jQuery에서 제공하는 HTML DOM의 계층을 이용한 요소의 접근에 대해 알아 보도록 하겠습니다.... 만... 우선 본론으로 들어가기 전에 HTML DOM에 대한 이야기를 먼저 하려고 합니다. HTML DOM에 대해 정확하게 아시는 것도 중요 하지만, 기초를 다지기 위한 강좌이니 다음 강좌에서 꼭 알아야 하는 내용을 간단하게 정리해 보았습니다. DOM이란 ? HTML 트리 구조를 통해 클라이언트 영역에서 재조합 기능을 제공하여 사용자와 상호 작용을 하는 구조적인 모델로 HTML 트리 구조 내에서 개별 객체에 접근이 제공되는 방법을 말합니다. HTM.. 더보기