
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>


Share article