JQuery 학습 02 - Dom 조작, Dom 이동, 배열, 필터

 

* 웹 페이지 조작

$("img#thumbnail").remove(); Dom 에서 요소를 완전히 제거

$("img#thumbnail").detach(); Dom 에서 제거하지만 요소를 기억해놨다가 다시 삽입 가능

변수에 저장 $f = $("img#thumbnail").detach();

$f - $를 붙이면 JQuery 에서 반환하는 요소를 저장하는 변수라는 뜻

 

* 요소 선택

$(".fish").parent() : fish 클래스 요소를 모두 선택후 요소 위에 있는 부모 요소 선택

$(".fish").children() : fish 클래스 요소를 모두 선택후 요소 아래에 있는 자식 요소 선택

$(".fish").prev() : fish 클래스 요소를 모두 선택후 요소 왼쪽에 있는 형제 요소 선택

$(".fish").next() : fish 클래스 요소를 모두 선택후 요소 오른쪽에 있는 형제 요소 선택

$(".fish").parent().next().remove()

여러개 붙여서 사용 가능

 

* 요소 심화단계

요소 내용을 지우려면 $("p").empty();

요소에서 가장 가까운 부모요소 검색 : $("li").closest("ui");

조상요소 모두 선택 : $("p").parents()

같은 레벨에 있는 요소 모두 선택 : $("li").siblings()

 

* 재배치

$("h2").replaceWith("<h1> 내용 제배치 </h1>") : replaceWith 내용 재배치 - 1:1 대체에서는 좋지만, 다:1은 모두 기억 못함

$("meat").before("<h1> 요소를 앞에 삽입 </h1>") , $("meat").after("<h1> 요소를 뒤에 삽입 </h1>")

요소를 뒤에 추가한 후, detach() 로 변수에 저장 - $h = $(".meat").detach(); 을 하면 모든 값이 배열로 저장됌

 

* 필터 메서드

$(".menu_list").children().first().detach();

.first() : 첫번째 요소만 선택 , .eq(숫자-0번부터) : 괄호안의 숫자에 해당하는 요소만 선택, .last() : 마지막 요소만 선택

.slice(start(숫자 1번 부터),end) : 시작 숫자(미포함) ~ 마지막 숫자(포함) 요소를 선택

.filter(".meat") : 지정한 선택자와 일치하는 요소를 찾음 - 한개가 아니라 관련된것 모두, .not(".meat") : 해당 선택자 이외의 모든것

 

each(function() {} ) 에서 function(i) 를 넣으면 i가 0부터 1씩 증가

 

$(document).ready(function(){

    // $(".menu_list").children().first().before("<li class='test'<em>test </em></li>");
    // // $f = $(".menu_list").children().filter(".fish").detach();
    // $(".menu_list").children().eq(3).replaceWith("<li class='test'<em>eq3 </em></li>");

    // $(".menu_list").children().filter(".test").detach();
    // $(".menu_list").children().slice(1,3).detach();

    // $(".menu_list").children().not(".test").detach();

    // $(".menu_list").children().first().detach();
    // $(".menu_list").children().first().before($f[0]);
    let check = false;
    let $f, $m;
    $("button#vegOn").click(function(){
        if (check == false){
            $f = $(".fish").parent().parent().detach();

            $(".hamburger").replaceWith("<li class='portobello'<em>portobello mushroom </em></li>");
            $(".portobello").parent().parent().addClass("veg_leaf");
        //    $(".meat").replaceWith("<li class='tofu'<em>tofu</em></li>");
        
            $(".meat").after("<li class='tofu'<em>tofu</em></li>");
            $m = $(".meat").detach();
            $(".tofu").parent().parent().addClass("veg_leaf");

        }
        check = true;
    });

    $("button#restoreMe").click(function(){
        if(check == true){
            $(".menu_entrees li").first().before($f);
            $(".portobello").replaceWith("<li class='hamburger'<em>hamburger </em></li>");

            $(".tofu").each(function(i){
                $(this).after($m[i]);
            });
            $(".tofu").remove();

        }

        check = false;
    });

});

 

- 요약 - 

 

Dom 조작

- detach , remove , replaceWith , before , after

 

Dom 이동

- parent , children

 

필터

- first, eq, last, slice, filter, not