셀렉터(Selector)란?
이전 포스팅에서 JQuery 를 사용하는 이유가 엘리먼트를 쉽게 선택하고 이를 제어하기 위함이라 언급했다.
여기서 말한 엘리먼트를 쉽게 선택할 수 있도록 해주는 녀석이 바로 Selector 이다.
JQuery 를 사용하는 가장 큰 이유가 이 Selector 라는 놈을 사용하기 위해서라고 해도 손색이 없다.
서론은 그만하고, 본론으로 넘어가보자.
HTML 에선 태그들에게 id, class 등을 아래와 같이 선언하곤 하는데,
<div>
<div id="testId">AAAAA</div>
<div class="testClass">BBBBB</div>
</div>
기존의 JavaScript 로 위의 엘리먼트들의 html 값을 뽑아내고 싶다면
getElementById, getElementsByClassName 등을 이용했을 것이다.
하지만 JQuery 는 저렇게 할 필요 없이 id 는 "#" 으로, class 는 "." 으로 선택할 수 있게 해준다,
Selector 는 $( ) 형태로 사용되며, 이를 사용한 아래의 예제를 보면 이해가 갈 것이다.
$(function() {
//Id 로 찾기
var idHtml = $("#testId").html();
//Class 로 찾기
var classHtml = $(".testClass").html();
console.log(idHtml); //AAAAA
console.log(classHtml); //BBBBB
});
또한 name 으로 찾고 싶다면? 아래와 같이 선언해 찾을 수 있다.
$(function() {
//name "A" 를 가진 input 태그를 찾아 html 값 가져오기
var aHtml = $("input[name=A]").html();
//name "B" 를 가진 div 태그를 찾아 html 값 가져오기
var bHtml = $("div[name=B]").html();
});
다음으로, 이러한 Selector 를 어떤 기반에 맞춰 사용하냐에 따라 능동적으로 사용이 가능한데,
어떤 식으로 사용할 수 있는지 여러 방법들을 살펴보자.
관계에 기반한 Selector
엘리먼트 간에 부모, 자식, 형제와 같은 관계에 기반해 사용할 수 있다.
// 선택한 엘리먼트의 부모 엘리먼트 선택
$('선택자').parent();
// 선택한 엘리먼트의 자식 엘리먼트 선택
$('선택자').children();
// 선택한 엘리먼트의 바로 다음 차례에 위치한 엘리먼트 선택
$('선택자').next();
// 선택한 엘리먼트의 바로 이전 차례에 위치한 엘리먼트 선택
$('선택자').prev();
조건에 기반한 Selector
엘리먼트를 찾을 때 해당 조건을 충족하는 엘리먼트만 선택할 수 있다.
//선택한 엘리먼트의 컨텐츠 내 값이 "AAAAA" 이면 엘리먼트 선택
$('A element: contains("AAAAA")')
//선택한 엘리먼트의 아이디가 "testId" 가 아니면 엘리먼트 선택
$('A element: not("#testId")')
인덱스에 기반한 Selector
복수의 엘리먼트들을 가지고 0 인덱스부터 시작해 인덱스를 가지고 선택할 수 있다.
//선택한 엘리먼트 중 해당 인덱스에 해당하는 엘리먼트 선택
$('선택자: eq(index)')
//선택한 엘리먼트 중 제일 첫 번째 인덱스에 해당하는 엘리먼트 선택
$('선택자: first')
//선택한 엘리먼트 중 제일 마지막 인덱스에 해당하는 엘리먼트 선택
$('선택자: last')
//선택한 엘리먼트 중 인덱스보다 큰 인덱스에 해당하는 엘리먼트 선택
$('선택자: gt(index)')
//선택한 엘리먼트 중 인덱스보다 작은 인덱스에 해당하는 엘리먼트 선택
$('선택자: lt(index)')
이 외에도 input 등 속성으로도 선택할 수 있고, find( ) 등을 통해서도 가능하다.
참고자료야 인터넷에 워낙 많이 올라와있으니 jquery selector 라고 검색만 해도 쉽게 참고할 수 있다.
이러한 Selector 를 이용하면 이벤트를 달기도 수월할 뿐더러 보다 간결하게 엘리먼트에 접근도 가능하다.
이상으로 Selector 포스팅을 마친다.
'Coding Story > JQuery' 카테고리의 다른 글
[ JQuery ] 제이쿼리 함수 ( attr, val, data 등 ) (0) | 2020.11.25 |
---|---|
[ JQuery ] 제이쿼리 동적으로 생성된 버튼에 이벤트 달기 (2) | 2020.11.06 |
[ JQuery ] 제이쿼리란 무엇인가? (0) | 2020.11.06 |