Selectors : 객체 찾기

Feb 19, 2024
Selectors : 객체 찾기

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>
notion image
 
    <!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>
    notion image
     
    notion image
     
     
    Share article
    RSSPowered by inblog