구글에서 검색을 하다가 좋은글이 있어서 퍼온다.
출처 :http://blog.naver.com/seogi1004
============================================================================================================
안녕하세요. 문학청년입니다. 정말 오랜만에 이렇게 글을 쓰는 것 같네요. 스터디 준비하랴.. 대회 준비하랴.. 요세 조금 바빠서 글 쓰는 것에 너무 소홀해버렸네요. 그럼 앞으로 다시 분발하여 열심히 쓰도록 하겠습니다.
잡설이 너무 길었네요. 오늘은 다름이 아니라 제가 처음이 연재 기획했던 것과는 달리 오늘은 기본 내용을 간략하게 정리해볼까 합니다. 물론 정리된 내용만 보면 재미가 없겠지요. 그래서 여러분들을 위해서 간단하게 할 수 있는 셀렉터 예제를 만들어봤습니다. 이 예제는 jQuery 오프라인 스터디에서도 사용을 했었는데요. 반응이 좋아서 이렇게 연재 강좌에도 예제로 사용해봤습니다.
한가지 팁을 드리자면 아래 정리된 내용을 출력하여 필요할 때마다 보는 것도 좋을 것 같구요.
아래 정리된 내용들을 살펴 본 뒤에 예제 페이지로 가서 직접 실습해보시면 이해하시는데 도움이 될 것입니다.
예제 페이지 이동하기
(1) Javascript 문법 스타일
기존의 프로그래밍 언어의 엄격한 문법 스타일에 적용되어 있는 사용자라면 분명히 자바스크립트의 자유 분방한 문법 스타일을 보고 적지않게 당황한적이 있을 것이다. 이러한 스타일은 단점이 될 수도 있으나 매우 유연하기 때문에 때에 따라서 매우 강력한 기능을 발휘한다. 그렇다면 가장 많이 사용되는 자바스크립트의 함수와 관련된 문법 스타일에 대해서 알아보도록 하자.
1. 함수를 변수에 설정할 수 있다.
| 1 2 3 | var func = function() { alert("안녕"); }; |
2. 변수에 설정한 함수를 매개 변수로 사용하여 호출 할 수 있다.
| 1 | showAlert(func); |
3. 위와 같이 변수에 담지 않고 바로 함수를 매개 변수로 바로 설정 할 수 있다.
| 1 2 3 4 5 6 | showAlert(function() { alert("안녕"); }); // 아래와 같이 한 줄로 사용하는 경우도 있다. showAlert(function() { alert("안녕"); }); |
3번의 경우 조금 어렵게 생각할 수도 있는데 자세히 보면 그냥 함수 파라메터 값에 변수가 아닌 함수 그 자체가 들어가 있다고 간단하게 생각하면 된다. 이러한 표현식은 jQuery에서 상당히 많이 쓰이기 때문에 이러한 문법 스타일에 최대한 빨리 익숙해져야 한다.
(2) 셀렉터 요약 정리
셀렉터는 jQuery의 가장 강력한 기능이다. 간단하게 설명을 하자면, HTML 문서 안에는 다양한 엘리먼트들이 포함되어 있는데, 이를 컨트롤하기란 결코 간단한 일이 아니다. 일반적으로 자바스크립트에서 엘리먼트를 얻기 위해 많이 쓰이는 방법은document.getElementById("엘리먼트 ID 속성 값") 함수를 사용하면 되지만, 일단 소스 코드가 길어지고 얻을 수 있는 엘리먼트들도 매우 한정적이다.
하지만 jQuery에서는 $("셀렉터 문법") 함수를 사용하여 매우 간단하고 다양한 스타일의 엘리먼트들을 쉽게 얻을 수 있다. 셀렉터로 얻은 엘리먼트들을 확장 집합이라 하는데, 특수한 배열 형태의 객체로 반환이 된다. 이렇게 반환된 객체들은 jQuery가 지원하는 매우 다양한 함수들을 사용할 수 있다.
아래 표에 나와 있는 자식/에트리뷰트/컨테이너 셀렉터는 가장 많이 사용되는 셀렉터 문법이다.
| ||||||||||||||||||||||||||||||
| [자식/에트리뷰트/컨테이너 셀렉터] |
아래 표는 jQuery가 지원하는 고급 위치 기반 셀렉터이며, DOM에서 위치를 기반으로 엘리먼트를 선택하며 첫 번째 링크나 홀수 번째, 짝수 번째와 같이 엘리먼트의 위치나 다른 엘리먼트와 관계를 기반으로 엘리먼트를 선택해야 하는 경우에 사용하면 된다.
| ||||||||||||||||||||||||
| [위치 셀렉터] |
CSS 명세만으로는 표현할 수 없는 특성이 있는 엘리먼트를 선택해야 하는 경우 아래 표에 나와 있는 셀렉터를 사용하면 된다.
| ||||||||||||||||||||||||||||||||||||||||||||
| [jquery 정의 셀렉터] (3) 자주 사용되는 함수 정리 $.유틸리티 함수, Event 관련 함수, Ajax 관련 함수는 이번 장에서 다루지 않을 것이다. |
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| [함수 정리 (1)] |
(4) 그 밖에 함수 정리
아래 표에 정리된 함수들은 확장된 엘리먼트 집합을 관리하는 함수들이다.
| ||||||||||||||||||||||||||||||||||||||||||
| [함수 정리 (2)] |
| ||||||||||||||||||||
| [관계를 이용하여 확장 집합 얻기와 관련된 함수 정리] |