text()- 선택한 요소의 텍스트 내용을 설정하거나 반환
html()- 선택한 요소(HTML 마크업 포함)의 내용을 설정하거나 반환
val()- 양식 필드의 값을 설정하거나 반환
1. text()및 html()메서드를 사용하여 콘텐츠를 가져오는 방법
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script> </head> <body> <h1>Get 실습하기</h1> <hr> <p id="test">This is some <b>bold</b> text in a paragraph.</p> <script> $(document).ready(function () { $("#btn1").click(function () { alert("Text: " + $("#test").text()); }); $("#btn2").click(function () { alert("HTML: " + $("#test").html()); }); }); </script> <button id="btn1">Show Text</button> <button id="btn2">Show HTML</button> </body> </html>
2. val()메서드를 사용하여 입력 필드의 값을 가져오는 방법
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script> </head> <body> <h1>Get 실습하기</h1> <hr> <p>Name: <input type="text" id="test" value="cute animal"></p> <script> $(document).ready(function () { $("button").click(function () { alert("Value: " + $("#test").val()); }); }); </script> <button>Show Value</button> </body> </html>
3. attr()메서드는 속성 값을 가져오는 데 사용
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script> </head> <body> <h1>Get attr() 실습하기</h1> <hr> <p><a href="https://www.w3schools.com" id="w3s">W3Schools.com</a></p> <button>Show href Value</button> <script> $(document).ready(function () { $("button").click(function () { alert($("#w3s").attr("href")); }); }); </script> </body> </html>
Share article
