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
