JavaScript/기본

this - jQuery/ javascript 차이

dev_jiwon 2022. 6. 23.

https://inpa.tistory.com/entry/jQuery-%F0%9F%93%9A-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-this-%E2%9A%94%EF%B8%8F-%EC%A0%9C%EC%9D%B4%EC%BF%BC%EB%A6%AC-this#%F0%9F%93%8C_%EC%9D%B4%EB%B2%A4%ED%8A%B8_%ED%95%B8%EB%93%A4%EB%9F%AC_%ED%94%84%EB%A1%9C%ED%8D%BC%ED%8B%B0_%EB%B0%A9%EC%8B%9D

[jQuery] 📚 자바스크립트 this / 제이쿼리 $(this) 차이

자바스크립트에는 this가 있고, 제이쿼리에는 $(this) 가 있다. 이벤트 객체에서의 이 둘의 차이점과 더불어 사용법을 알아보자. 자바스크립트 this 📌 인라인 이벤트 핸들러 방식 인라인 이벤

inpa.tistory.com

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul>
        <li>딸기</li>
        <li>바나나</li>
        <li>수박</li>
    </ul>

    <script>
        this.onclick = function(e){
            e.target.style.display="none";
        }
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul>
        <li>딸기</li>
        <li>바나나</li>
        <li>수박</li>
    </ul>

    <script>
        this.onclick=function(){
            event.target.style.display="none";
        }
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul>
        <li id="a">딸기</li>
        <li id="b">바나나</li>
        <li id="c">사과</li>
    </ul>

    <script>
        this.onclick=function(e){
            if(e.target.id=="a"){a.style.backgroundColor="red";
            b.style.backgroundColor="white";
            c.style.backgroundColor="white";}
            if(e.target.id=="b"){b.style.backgroundColor="green";
            a.style.backgroundColor="white";
            c.style.backgroundColor="white";}
            if(e.target.id=="c"){c.style.backgroundColor="blue";
            a.style.backgroundColor="white";
            b.style.backgroundColor="white";}
        }
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        #c {
            cursor: pointer;
        }
    </style>

</head>

<body>
    <ul>
        <li id="a">딸기</li>
        <li id="b">바나나</li>
        <li id="c">사과</li>
    </ul>

    <script>
        this.onmouseover = function (e) {
            if (e.target.id == "a") { a.style.backgroundColor = "red", a.style.cursor = "pointer" }
            if (e.target.id == "b") { b.style.backgroundColor = "green"; }
            if (e.target.id == "c") { c.style.backgroundColor = "blue"; }
        }

        this.onmouseout = function (e) {
            if (e.target.id == "a") { a.style.backgroundColor = "white"; }
            if (e.target.id == "b") { b.style.backgroundColor = "white"; }
            if (e.target.id == "c") { c.style.backgroundColor = "white"; }
        }
    </script>
</body>

</html>

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        h1{
            cursor: pointer;
        }
    </style>
</head>
<body>
    <h1 id="ach">배경 색상 바꾸기</h1>

    <script>
        this.onclick=function(e){
            if(e.target.id=="ach"){
                var arrColor=["#ff0", "#6c0", "#fcf", "#cf0", "#39f"];
                var arrNum=Math.floor(Math.random()*arrColor.length);
                var bodyTag = document.getElementsByTagName("body")[0];
                bodyTag.style.backgroundColor=arrColor[arrNum];
            }
        }
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <p id="a">안녕</p>
    <p id="b">호호호</p>
</body>

<script>
    this.onclick = function(event){
        if(event.target.id == "a"){a.style.color="red"; b.style.color="black";}
        if(event.target.id == "b"){b.style.color="red"; a.style.color="black";}
    }
</script>

</html>

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p id="demo"></p>

    <script>
        const person = {
            firstName: "John",
            lastName: "Doe",
            id: 5566,
            fullName: function(){
                return this.firstName + " " + this.lastName;
            }
        };

        document.getElementById("demo").innerHTML = person.fullName();
    </script>
</body>
</html>

저작자표시 비영리

'JavaScript > 기본' 카테고리의 다른 글

객체 (최소, 최대 평균) (0)	2022.06.29
객체 (생성자) (0)	2022.06.24
객체 (0)	2022.06.24
자바스크립트 참고 사이트 (0)	2022.06.23
이벤트 (0)	2022.06.23

this - jQuery/ javascript 차이

'JavaScript > 기본' 카테고리의 다른 글

댓글

티스토리툴바