[codeSchool] try jQuery 정리 level 2 — Selecting and Traversing

2 분 소요

jQuery의 selecting방법에는 정말 다양한 방법이 있는 것 같다. 중복되는 방법도 많고.. 좋아하는 방법 또는 상황에 맞게 가장 효율적인 방법을 골라서 사용하는 것이 유용할 것이다.

Level 2: Searching the DOM

$(‘<상위구조객체> <하위구조객체>’); 와 같이 사용한다.

예) id가 destination인 ul 하위구조의 li를 전부 선택

$(‘#destination li’);

순서와 띄어쓰기에 주목하자. id는 앞에 # 이 붙고, element 는 아무것도 붙지 않음 단, 이 경우에는 1단계 하위구조가 아니라 전체 자손구조에 있는 li element를 전체 선택하게 된다.

따라서 child of child가 아닌 1단계 child만 선택하고자 할 때는

> 기호를 사용해

$(‘#destination > li’); 라고 쓴다.

다중 DOM선택하기

구조 level에 관계없이 원하는 DOM을 이것저것 선택하려면?

,(comma)를 사용한다.

예) $(‘.promo, #france’); → promo class를 가진 DOM 및 france id를 가진 DOM을 모두 선택한다. 합집합임에 주목하자.

pseudo class 사용하기 :를 이용하여 filter비슷한 기능을 사용할 수 있다. CSS에도 있는 기능인 듯 하다.

$(‘#destination li:first’); → destination id 하위 li DOM 중에서 첫 번째 객체 선택 마찬가지로 last, even, odd 모두 가능. index는 0부터 시작!

Traversing: (사면 횡단?)

jQuery에서는 method들을 이용하여 DOM사이를 자유롭게 왔다갔다할 수 있는데, 이를 traversing이라고 표현하나보다. 재미있다.

방법은 1. 선택 2. 이동 순.

filter이용한 traversing

$(“#destinations li”);는 위에서 쓴 방법 아래 코드는 동일한 동작을 하지만

$(“#destinations”).find(“li”); ← 이것은 브라우저에서 더 빠르게 동작한다.

마찬가지로 $(“li:first”); 보다 $(“li”).first();가 더 빠르다.

DOM사이를 자유롭게 걸어보자!

$(“li”).first(); → li DOM 중 첫번째 것으로 이동

$(“li”).first().next(); → 그 다음 DOM으로

$(“li”).first().next().prev(); → 다시 전 DOM으로!

DOM hirachy 사이를 이동해보자!

$(“li”).first();

$(“li”).first().parent(); →부모DOM으로 이동

$(“#destinations”).children(“li”); →자식 DOM으로 이동(1 level자식들을 전부 선택!)