jQuery - DOM

$(selector)의 결과에는 '선택된 element(들)' 이 담겨 있다.
이 선택된 element 에서 다시 DOM 구조내의 원하는 element 들로 이동/선택할수 있는

다양하고 편리한 메소드들이 제공된다.

Iteration
~ .each(function) : select된 각element 에 대한 동작 수행.
https://api.jquery.com/each/

* Traversing Up:
~ .parent() : ~ 의 부모 선택
~ .parents() : ~ 의 상위 요소(들) 모두 선택
~ .parents(selector) : ~ 의 상위 요소(들) 중  selector 지정요소들만 선택
~ .parentsUntil(selector)  ~ 의 상위 요소(들) 중 selector 지정요소 전까지 모두 선택

* Traversing Down: 
~ .children() : ~ 의 자식 요소(들) 모두 선택
~ .children(selector) : ~ 의 자식 요소(들) 중  selector 지정요소들만 선택
~ .find() : ~ 의 자손 요소(들) 모두 선택
~ .find(selector) : ~ 의 자손 요소(들) 중 selector 지정요소들만 선택

* Traversing Sibling:
~ .siblings() : ~ 의 형제 요소(들) 모두 선택
~ .siblings(selector) : ~ 의 형제 요소(들) 중  selector 지정요소들만 선택
~ .next() : ~ 의 다음 요소 하나 선택 (동생)
~ .nextAll() : ~ 의 다음 요소(들) 모두 선택
~ .nextUntil(selector) : ~ 의 동생 요소(들) 중 selector 지정요소 전까지 모두 선택
~ .prev() : ~ 의 이전 요소 (하나) 선택  (형..)
~ .prevAll() : ~ 의 이전 요소(들) 모두 선택
~ .prevUntil() : ~ 의 이전 요소(들) 중 selector 지정요소 전까지 모두 선택

참조 :
https://www.w3schools.com/jquery/jquery_traversing.asp
https://www.w3schools.com/jquery/jquery_ref_traversing.asp

 

---

$(document).ready(function(){

* 어떤 버튼이든지 눌리면 selected 클래스 제거
$("button").click(function(){
    $("*").removeClass("selected")
});


* ~ .each(function) : select된 각element 에 대한 동작 수행.
$("#btn01").click(function(){
    $("span").each(function(index){
        $(this).addClass("selected");
    $(this).text($(this).text() + index);
    });
});

* ~ .parent() : ~ 의 부모 선택
$("#btn11").click(function(){
    $("span").parent().addClass("selected");
});

* ~ .parents() : ~ 의 상위 요소(들) 모두 선택
$("#btn12").click(function(){
    $("span").parents().addClass("selected");
});

* ~ .parents(selector) : ~ 의 상위 요소(들) 중  selector 지정요소들만 선택
$("#btn13").click(function(){
    $("span").parents("ul").addClass("selected");
});

* ~ .parentsUntil(selector)  ~ 의 상위 요소(들) 중 selector 지정요소 전까지 모두 선택
$("#btn14").click(function(){
    $("span").parentsUntil("div").addClass("selected");
});

---

* ~ .children() : ~ 의 자식 요소(들) 모두 선택
$("#btn21").click(function(){
    $("div").children().addClass("selected");
});

* ~ .children(selector) : ~ 의 자식 요소(들) 중  selector 지정요소들만 선택
$("#btn22").click(function(){
    $("div").children("p").addClass("selected");
});

* ~ .find(selector) : ~ 의 자손 요소(들) 중 selector 지정요소들만 선택
$("#btn23").click(function(){
    $("div").find("span").addClass("selected");
});

// ~ .find("*") : 자손들 모두 선택
$("#btn24").click(function(){
    $("div").find("*").addClass("selected");
});

---

*  ~ .siblings() : ~ 의 형제 요소(들) 모두 선택
$("#btn31").click(function(){
    $("#sibling h2").siblings().addClass("selected");
});

* ~ .siblings(selector) : ~ 의 형제 요소(들) 중  selector 지정요소들만 선택
$("#btn32").click(function(){
    $("#sibling h2").siblings("p").addClass("selected");
});

* ~ .next() : ~ 의 다음 요소 하나 선택 (동생)
$("#btn33").click(function(){
    $("#sibling h2").next().addClass("selected");
});

* ~ .nextAll() : ~ 의 다음 요소(들) 모두 선택 
$("#btn34").click(function(){
    $("#sibling h2").nextAll().addClass("selected");
});

* ~ .nextUntil(selector) : ~ 의 동생 요소(들) 중 selector 지정요소 전까지 모두 선택
$("#btn35").click(function(){
    $("#sibling h2").nextUntil("h6").addClass("selected");
});

* ~ .prev() : ~ 의 이전 요소 (하나) 선택  (형..)
$("#btn36").click(function(){
    $("#sibling h5").prev().addClass("selected");
});

* ~ .prevAll() : ~ 의 이전 요소(들) 모두 선택
$("#btn37").click(function(){
    $("#sibling h5").prevAll().addClass("selected");
});

* ~ .prevUntil() : ~ 의 이전 요소(들) 중 selector 지정요소 전까지 모두 선택
$("#btn38").click(function(){
       $("#sibling h5").prevUntil("span").addClass("selected");
    });
});