JavaScript - jQuery 객체($) 사용하기

HTML 소스

<button>설정하기</button>
<button>가져오기</button>
<button>설정 후 가져오기</button>

<div id="a">아이디로 접근</div>
<div class="b">클래스로 접근</div>
<div>태그로 접근</div>

 

스크립트

<script src="//code.jquery.com/jquery-3.5.1.min.js"></script>

<script>
// $를 이용하여 선택자 활용
    var aDiv1 = $("#a");

    var btn1 = $("button:nth-child(1)")[0];

    // jquery 적용
    var btn1 = $("button:nth-child(1)")[0];
    
    btn1.addEventListener("click", function (e) {
        var aDiv1 = $("#a")[0];
        //aDiv.innerHTML = "버튼 클릭 후 적용됨";
        // mlec 함수에 포함된 html 함수 사용
        $("#a").html("버튼 클릭 후적용됨");
    });

    //var btn2 = document.querySelector("button:nth-child(2)");
    var btn2 = $("button:nth-child(2)")[0];
    btn2.addEventListener("click", function (e) {
        //var bDiv = document.querySelector(".b");
        var bDiv = $(".b")[0];
        //bDiv.innerHTML = "클래스 속성 파트 변경";
        $(".b").html("클래스 속성 파트 변경");
    });

    //var btn3 = document.querySelector("button:nth-child(3)");
    var btn3 = $("button:nth-child(3)")[0];
    btn3.addEventListener("click", function (e) {
        //var arr = document.querySelectorAll("div");
        var arr = $("div");

        $("div").html("버튼 3번 눌렸어요");
    });
</script>

 

결과