Selectors : 객체 찾기

Feb 19, 2024

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

https://www.w3schools.com/jquery/default.asp

Selectors

태그 $("p")로 찾기

ID $("#test")로 찾기

돔 숨기기

document를 찾아 -> 그림이 다 그려지면 익명 함수 실행 -> 버튼을 클릭 ->p태그가 숨겨져

button은 아직 생겨지 않았으나 button을 찾고 있으면 오류가 남

아직 실행하지말고 그림이 다 그려지면 실행하라는 것

그 이후에는 버튼을 찾을 수 있음


<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").hide();
  });
});
</script>
</head>
<body>

<h2>This is a heading</h2>

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

<button>Click me to hide paragraphs</button>

</body>
</html


<!DOCTYPE html>
<html>

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>

<body>

    <h2>This is a heading</h2>

    <p>This is a paragraph.</p>
    <p>This is another paragraph.</p>

    <button>Click me to hide paragraphs</button>

    <script>
        let btn = $("button");
        console.log(btn);
    </script>
</body>

</html>


<!DOCTYPE html>
<html>

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>

<body>

    <h2>This is a heading</h2>

    <p>This is a paragraph.</p>
    <p>This is another paragraph.</p>

    <button>Click me to hide paragraphs</button>

    <script>
        // $("button").click(function () {
        //     $("p").hide();
        // });

        $("button").click(() => $("p").hide());
    </script>
</body>

</html>

<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("button").click(function(){ $("p").hide(); }); }); </script> </head> <body> <h2>This is a heading</h2> <p>This is a paragraph.</p> <p>This is another paragraph.</p> <button>Click me to hide paragraphs</button> </body> </html

<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script> </head> <body> <h2>This is a heading</h2> <p>This is a paragraph.</p> <p>This is another paragraph.</p> <button>Click me to hide paragraphs</button> <script> let btn = $("button"); console.log(btn); </script> </body> </html>

<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script> </head> <body> <h2>This is a heading</h2> <p>This is a paragraph.</p> <p>This is another paragraph.</p> <button>Click me to hide paragraphs</button> <script> // $("button").click(function () { // $("p").hide(); // }); $("button").click(() => $("p").hide()); </script> </body> </html>