본문 바로가기

프로그램&DB/jQuery&JS

[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.. 더보기
[jQuery강좌] 4. jQuery Selector - 속성(Attribute) by 승연아빠님 웹 프런티어와 함께하는 jQuery 기초강좌 4th 이야기 - 셀렉터 Attribute를 활용한 요소 선택 개체의 속성값을 통해 요소를 선택하자 - Attribute Selector 각각의 요소는 속성(attribute)을 가질 수 있습니다. 각 요소의 속성은 미리 정해진 이름이거나, 사용자의 필요에 의해서 만들어질 수 있으며 jQuery의 CSS 셀렉터와 필터의 조합으로 통해 관련된 요소에 접근 할 수 있습니다. 다음은 jQuery에서 지원하고 있는 속성관련 셀렉터 입니다. (더 많은 종류의 속성관련 셀렉터를 지원하고 있으니 자세한 내용은 jQuery.com에서 확인을 하시기 바랍니다.) 형식(셀렉터) 설명 $(Selector[attr]) attr 속성(attribute)값을 가지는 Selector 요.. 더보기
[jQuery강좌] 3. jQuery를 이용한 HTML DOM 접근 - 기본 셀렉터 (2) by 승연아빠님 웹 프런티어와 함께하는 jQuery 기초강좌 3rd - jQuery를 이용한 HTML DOM 접근(기본 셀렉터 두 번째 이야기) 원하는 개체를 쉽고 편하게 선택하자 - 셀렉터 셀렉터의 종류 셀렉터 표현 방법 All Selector $("*") ID Selector $("#id") Element Selector $("elementName") Class Selector $(".className") Multiple Selector $("selector1, selector2, selector3, selectorN") 지난 시간에 이어 기본이 되는 셀렉터의 나머지 부분인 클래스와 여러가지 셀렉터를 조합하여 요소에 접근하고, 개체를 탐색 선택하는 방법에 대한 이야기를 진행 하도록 하겠습니다. Class Select.. 더보기
[jQuery강좌] 2. jQuery를 이용한 HTML DOM 접근 - 기본 셀렉터 (1) by 승연아빠님 웹 프런티어와 함께하는 jQuery 기초강좌 2nd - jQuery를 이용한 HTML DOM 접근(기본 셀렉터 첫 번째 이야기) 원하는 개체를 쉽고 편하게 선택하자 - 셀렉터 이번 시간에는 jQuery의 가장 강력한 기능인 HTML DOM을 탐색하는 기능에 대해 알아 보도록 하겠습니다. jQuery의 DOM 탐색은 CSS SELECTER를 사용하고 있어, CSS에 사용한 표현식을 알고 있다면 보다 쉽게 셀렉터를 이해 할 수 있습니다. jQuery에서는 원하는 HTML의 DOM 요소를 찾기 위해 $(Selector), jQuery(Selector)와 같은 표현식을 사용합니다. $는 jQuery의 축약어로 같은 역할을 하며, 다음과 같은 형태로 사용하여 원하는 DOM 요소를 선택 할 수 있습니다. 셀렉터의 .. 더보기
[jQuery강좌] 1. 웹 개발자를 위한 jQuery 기본이해 by 승연아빠님 웹 프런티어와 함께하는 jQuery 기초강좌 1st - 웹 개발자를 위한 jQuery 기본이해 jQuery 먹는 건가요 ? 웹 사이트와 사용자간의 원활한 소통을 위해 사용되었던 자바스크립트는 최근 몇 년간 Web2.0과 Ajax 기술을 활용한 RIA(Rich Internet Application)의 등장으로 인하여 이전보다 복잡하고 늘어난 코드와 다양한 웹 브라우저의 등장으로 크로스브라우징 이라는 장벽이 웹 개발자에게 큰 스트레스를 안겨주고 있습니다. 이러한 문제에서 쉽게 벗어 날 수 있는 해법과 웹 개발에 새로운 패러다임(역동적인 인터페이스, 쉬운 프로그래밍)을 제시하고 있는 jQuery에 대해 자세히 알아보는 보도록 하겠습니다. jQuery는 2006년 “John Resic”에 의해 디자인 된 자바스.. 더보기