본문 바로가기

Webstoryboy

Category

Explanation

ANIMATION/JQUERY

자바스크립트 샘플

자바스크립트 샘플

자바스크립트 샘플 예제입니다.


html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="selector" class="selector">
        <div class="box add">제이쿼리 VS 자바스크립트</div>
        <div class="box">제이쿼리 VS 자바스크립트</div>
        <div class="box">제이쿼리 VS 자바스크립트</div>
        <div class="box">제이쿼리 VS 자바스크립트</div>
    </div>
    <button class="button1">button1</button>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script>
        //아이디 선택자
        $("#selector").css("color","red");
        document.getElementById("selector").style.color = "#F00";

        //클래스 선택자
        $(".selector").css("color","red");
        document.querySelector(".selector").style.color = "#F00";

        //다중 선택자
        $(".box").css("color","red");
        document.querySelector(".box").style.color = "#F00";
        document.querySelectorAll("box").style.color = "#F00"; (X)
        document.querySelectorAll(".box").forEach(box => { box.style.color = "#F00" });

        const box = document.querySelectorAll(".box")
        for (var i=0; i<=box.length; i++){
            box[i].style.color = "#F00";
        } 

        //태그 선택자 
        $("div").css("color","red");
        document.getElementsByTagName("div").style.color = "#F00"; (X)

        //선택자
        const selector = $(".selector");
        const box = selector.find(".box");
        box.css("color","red");
        const selector = document.querySelector(".selector");
        const box = selector.querySelector(".box");
        box.style.color = "#F00";
        const boxAll = selector.querySelectorAll(".box");
        boxAll.forEach(box => { box.style.color = "#F00" });

        //형제 선택자
        $(".box").next().css("color","red");
        $(".box").prev();
        $(".box").parent();
        const box = document.querySelector(".box");
        box.nextElementSibling.style.color = "#F00";
        box.previousElementSibling;
        box.parentElement;

        //속성
        $(".box").css({
            "color": "#fff",
            "background-color": "red"
        }); 

        const box = document.querySelector(".box");
        box.style.color = "#fff";
        box.style.backgroundColor = "red"; 
        box.style.cssText = "color: #fff; background-color: red"; 

        const boxAll = document.querySelectorAll(".box");
        boxAll.forEach(box => { 
            box.style.color = "#fff";
            box.style.backgroundColor = "red";
        });

        //숨기기, 보이기
        $(".box").hide();
        document.querySelectorAll(".box").forEach(box => { box.style.display = "none" });
        $(".box").show();
        document.querySelectorAll(".box").forEach(box => { box.style.display = "block" });

        //클래스 추가하기
        $(".box").addClass("add");
        $(".box").removeClass("add");
        $(".button1").click(function(){
            $(".box").toggleClass("add");
        });

        const box = document.querySelector(".box");
        box.classList.add("add");
        box.classList.remove("add");
        document.querySelector(".button1").addEventListener("click", () => { 
            box.classList.toggle("add");
        });

        const boxAll = document.querySelectorAll(".box");
        boxAll.forEach(box => { box.classList.add("add") });
        boxAll.forEach(box => { box.classList.remove("add") });
        document.querySelector(".button1").addEventListener("click", () => { 
            boxAll.forEach(box => { box.classList.toggle("add") });
        }); 

        //
        var box = document.querySelector(".box");
        box.classList.add("add", "add2");
        box.classList.remove("add", "add2");

        
        document.querySelector(".box").classList.replace("box", "reduce");



        //이벤트
        $(".button1").click(function() { 
            $(".box").css("color","blue");
        });

        document.querySelector(".button1").addEventListener("click", () => { 
            //document.querySelector(".box").style.color = "#F00" 
            document.querySelectorAll(".box").forEach(box => { box.style.color = "#F00" });
        });

        //마우스 오버 이벤트 
        $(".button1").mouseenter(function() {  
            $(".box").css("color","blue");
        });

        document.querySelector(".button1").addEventListener("mouseenter", () => { 
            //document.querySelector(".box").style.color = "#F00" 
            document.querySelectorAll(".box").forEach(box => { box.style.color = "#F00" });
        });


        //hasClass
        if ($(".box").hasClass("add")) {
            $(".add").css("color","blue");
        }

        if (document.querySelector(".box").classList.contains("add")) {
            document.querySelector(".add").style.color = "#F00" 
        } 


        //append
        $(".button1").click(function(){
            $("#selector").append("<div/>");
        });

        document.querySelector(".button1").addEventListener("click", () => { 
            const element = document.getElementById("selector");
            const doc = document.createElement("div");
            element.appendChild(doc);
        }); 

        //text
        $(".box").text("box text");

        const text = $(".box").text();
        alert(text); 

        document.querySelector(".box").textContent = "box text";
        document.querySelectorAll(".box").forEach(box => { box.textContent = "box text" });

        const text = document.querySelector(".box").textContent;
        alert(text);

        $(".box").html("<div>textContent VS innerText</div>");
        document.querySelector(".box").innerHTML = "<div>textContent VS innerText</div>";
        document.querySelector(".box").innerText = "<div>textContent VS innerText</div>";
        document.querySelector(".box").textContent = "<div>textContent VS innerText</div>";
    </script>
</body>
</html>

AD

comments