FrontEnd/JQuery
JQuery Method ( text(), html(), val(), attr() )
H_Develop
2022. 7. 11. 17:08
Method 역할
text() 선택된 HTML 요소의 텍스트 내용을 가져오거나 설정한다.
html() 선택된 HTML 요소에서 HTML 태그를 포함한 내용을 가져오거나 설정한다.
val() 선택된 HTML 폼 요소의 속성 값을 가져오거나 설정한다.
attr() 선택된 HTML 요소의 속성 값을 가져오거나 설정한다. ( attr("href") attr("src","cat.jpg")-이미지교체 등 )
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="C:\UI\JQuery/jquery-3.6.0.min.js"></script>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
$(function() {
$("#btn1").click(function() { // #btn1은 CSS에서 id 선택자를 나타냄, jquery에서도 동일하게 사용
// $("#") 선택자에 정확히 id면 # class면 .을 같이 사용해주어야 한다.
var content = $("#box").text();
alert(content);
});
$("#btn2").click(function() {
var content = $("#box").html();
alert(content);
});
});
</script>
</head>
<body>
<div id="box">
<h3>요소 내용 가져오기</h3>
<p>text()는 요소의 텍스트만 가져오고, html()은 html 태그도 같이 가져온다</p>
</div>
<span id="btn1">텍스트 가져오기</span>
<button id="btn2">html 가져오기</button>
</body>
</html>
결과 출력
요소 내용 가져오기
text()는 요소의 텍스트만 가져오고, html()은 html 태그도 같이 가져온다
<h3>요소 내용 가져오기</h3>
<P>text()는 요소의 텍스트만 가져오고, html()은 html 태그도 같이 가져온다</P>
TEXT(), HTML()
<script>
$(function() {
$("#btn1").click(function() {
var content_2 = $("#box_1").text();
alert(content_2);
});
$("#btn2").click(function() {
var content_1 = $("#box_2").html();
alert(centent_1);
});
});
</script>
</head>
<body>
<div id="box_1">
<h3>요소 내용 가져오기</h3>
<p>text()는 요소의 텍스트만 가져오고, html()은 html 태그도 같이 가져온다.</p>
</div>
<div id="box_2">
<h3>무엇을 넣을까요</h3>
<p>하하하하하하하하하하하하하하하하하하하하하하하하하ㅏ하하하하핳하</p>
</div>
<span id="btn1">텍스트 가져오기</span>
<button id="btn2">html 가져오기</button>
</body>
<script>
$(document).ready(function() {
$("#btn2").click(function() {
$("#p2").text("<h3>안녕</h3>");
});
$("#btn3").click(function() {
$("#p2").html("<span style='color:red;'>반갑</span>");
});
});
</script>
</head>
<body>
<p id="p2"></p>
<button id="btn2">텍스트 설정하기2</button>
<button id="btn3">HTML 설정하기</button>
</body>
</html>반갑
<h3>안녕</h3>
버튼을 누를 때마다 서로 변경되며 화면에 노출
<script>
$(document).ready(function() {
$("#btn1").click(function() {
$("#p1").text("안녕하세요");
});
$("#btn2").click(function() {
$("#p2").text("<h3>안녕하세요</h3>");
});
$("#btn3").click(function() {
$("#p3").html("<span style='color:green;'>반갑습니다.</span>");
// 큰 따음표 안에서는 작은 따음표 사용 유의
});
$("#btn4").click(function() {
$("#phone").val("010-1234-5678");
});
});
</script>
</head>
<body>
<p id="p1"></p1>
<p id="p2"></p2>
<p id="p3"></p3>
<p>전화번호 : <input type="text" id="phone"></p>
<button id="btn1">텍스트 설정하기1</button>
<button id="btn2">텍스트 설정하기2</button>
<button id="btn3">HTML 설정하기</button>
<button id="btn4">입력 창에 값 설정하기</button>
</body>
VAL() == value
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="C:\UI\JQuery/jquery-3.6.0.min.js"></script>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
$(function() {
$("#btn").click(function() {
var content = $("#name").val(); // val == value
alert(content);
});
});
</script>
</head>
<body>
<p>이름 : <input type="text" id="name"></p>
<button id="btn">입력 내용 가져오기</button>
</body>
</html>input에 내용 입력하고 버튼 클릭하면 alert 활성화.
ATTR()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="C:\UI\JQuery/jquery-3.6.0.min.js"></script>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
$(function() {
$("#btn").click(function() {
var url = $("#naver").attr("href");
alert(url);
});
});
</script>
</head>
<body>
<p><a id="naver" href="http://naver.com">네이버 이동</a></p>
<button id="btn">href 값 가져오기</button>
</body>
</html>
<script>
$(function() {
$("#btn1").click(function() {
$("#image").attr("src","cat2.jpg");
});
$("#btn2").click(fucntion() {
$("#image").attr("src","cat1.jpt");
});
});
</script>
</head>
<body>
<img id="image" src="cat1.jpg">
<button id="btn1">첫번째</button>
<button id="btn2">두번째</button>
</body>
웹페이지 첫 화면에서는 cat1.jpg가 뜨고,
첫번째 버튼을 누르면 cat2.jpg, 다시 두번째 버튼을 누르면 cat1.jpg가 뜬다.