선택자

{
    $(".reset1").click(function(){
        $(".view1 *").removeClass("blue");
    });
    $(".btn1-1").click(function(){
        $(".view1 .class").addClass("blue");
    });
    $(".btn1-2").click(function(){
        $(".view1 #id").addClass("blue");
    });
    $(".btn1-3").click(function(){
        $(".view1 li").addClass("blue");
    });
    $(".btn1-4").click(function(){
        $(".view1 .class, .view1 #id").addClass("blue");
    });
    $(".btn1-5").click(function(){
        $(".view1 *").addClass("blue");
    });
}

{
    // $(".btn1-1j").click(function(){
    //     $(".view1j .class").addClass("red");
    // }); --> jQuery 방식

    //버튼을 클릭했을 때 실행하라~~~
    const jreset1 = document.querySelector(".jreset1");
    const jbtn1_1 = document.querySelector(".jbtn1-1");
    const jbtn1_2 = document.querySelector(".jbtn1-2");
    const jbtn1_3 = document.querySelector(".jbtn1-3");

    jreset1.addEventListener("click", function(){
        // document.querySelector(".jview1 li").classList.remove("red");
        const lilist = document.querySelectorAll(".jview1 li");
        for(let i=0; i<lilist.length; i++){
            lilist[i].classList.remove("red");
        }
    });

    jbtn1_1.addEventListener("click", function(){
        document.querySelector(".j1_class").classList.add("red");
    });

    jbtn1_2.addEventListener("click", function(){
        // document.querySelector("#j1_id").classList.add("red");
        document.getElementById("j1_id").classList.add("red");
    });

    jbtn1_3.addEventListener("click", function(){
        // document.querySelector(".jview1 li").classList.add("red");  -> 다중선택이 안됌
        // document.querySelectorAll(".jview1 li").classList.add("red");  -> 에러뜸 : 선택자가 5개여야 함
        const lilist = document.querySelectorAll(".jview1 li");
        //5개 있는걸 확인해줘야 한다. -> for문
        for(let i=0; i<lilist.length; i++){
            lilist[i].classList.add("red");
        };

        //forEach문도 가능
        // lilist.forEach(el=>{
        //     el.classList.add("red");
        // })

        //for of문
        // for(let i of lilist){
        //     i.classList.add("red");
        // }

        //for in문
        // for(let i in lilist){
        //     lilist[i].classList.add("red");
        // }
    });
}

{
    $(".reset2").click(function(){
        $(".s2 span").removeClass("blue");
    });
    $(".btn2-1").click(function(){
        $(".s2 span").addClass("blue");
    });
    $(".btn2-2").click(function(){
        $(".s2 > span").addClass("blue");
    });
    $(".btn2-3").click(function(){
        $(".s2 .select + span").addClass("blue");
    });
    $(".btn2-4").click(function(){
        $(".s2 .select ~ span").addClass("blue");
    });
}