잡담
jQuery 부분은 대부분 다 예제로 배울 예정입니다. 이번에 수업으로 nodejs 들어갔는데 블로그엔 아직 jQuery정리하고 있네요 조금 더 분발해보도록 하겠습니다. 잡담을 읽어주는 사람이 있을까 싶긴 하지만...
1. val
jQuery의 val() 메서드는 입력 필드의 현재 값을 가져오거나 입력 필드의 값을 설정하는 데 사용됩니다. 이 메서드는 <input>, <select>, <textarea>와 같은 다양한 유형의 폼 요소에 적용할 수 있습니다.
사용 방법은 다음과 같습니다:
1. 값 가져오기:
var value = $('#myInput').val();
2. 값 설정하기:
$('#myInput').val('새로운 값');이 메서드를 사용하면 폼 요소와 상호 작용이 간단해지며, 폼 유효성 검사, 데이터 검색 또는 조작과 같은 작업에 매우 편리합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
//var v=$("#my-input").val()-getter
//alert(v)//최부장
$("#my-input").val('김대리')//-setter
//메소드오버로딩
//val메서드에 입력 안주면 접근한곳의 value를 반환-getter
//val메서드에 입력 주면 접근한곳의 value를 변경-setter
})
</script>
</head>
<body>
<input type="text" id="my-input" value="최부장">
</body>
</html>
See the Pen jQuery val by 이현석 (@loxshqac-the-styleful) on CodePen.
2. text
jQuery의 text() 메서드는 선택한 요소의 텍스트 내용을 가져오거나 설정하는 데 사용됩니다.
1. 텍스트 내용 가져오기:
var textContent = $('#myElement').text();
2. 텍스트 내용 설정하기:
$('#myElement').text('새로운 텍스트');이 메서드는 선택한 요소의 텍스트 내용을 가져오거나 변경하는 데 유용합니다. 이는 HTML 요소의 내용을 동적으로 조작하거나 업데이트할 때 사용됩니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
function myFunc(){
$("#my-div").text('변경된!')
//document.getElementById("my-div").innerText='변경된!'
}
</script>
</head>
<body>
<div id="my-div">내div</div>
<button onclick="myFunc()">클릭</button>
</body>
</html>See the Pen jQuery text by 이현석 (@loxshqac-the-styleful) on CodePen.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
var num=0
function increase(){
num++
$("#my-div").text(num)
}
function decrease(){
num--
$("#my-div").text(num)
}
</script>
</head>
<body>
<div id="my-div">1</div>
<button onclick="increase()">+</button>
<button onclick="decrease()">-</button>
</body>
</html>See the Pen jQuery text2 by 이현석 (@loxshqac-the-styleful) on CodePen.
3. html
jQuery의 html() 메서드는 선택한 요소의 HTML 내용을 가져오거나 설정하는 데 사용됩니다.
1. html 내용 가져오기:
var htmlContent = $('#myElement').html();
2. html 내용 설정하기:
$('#myElement').html('<p>새로운 HTML 내용</p>');이 메서드는 선택한 요소의 HTML 내용을 가져오거나 변경하는 데 사용됩니다. HTML 요소의 내용을 동적으로 조작하거나 업데이트할 때 유용합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
var num=0
function increase(){
num++
$("#my-div").html('<b style=color:red>'+num+'</b>')
}
function decrease(){
num--
$("#my-div").html('<b style=color:blue>'+num+'</b>')
}
</script>
</head>
<body>
<div id="my-div">1</div>
<button onclick="increase()">+</button>
<button onclick="decrease()">-</button>
</body>
</html>See the Pen jQuery html by 이현석 (@loxshqac-the-styleful) on CodePen.
글을 마치며
오늘은 jQuery의 val, text, html에 대해 알아보았습니다. 미니 프로젝트하면서 val와 text는 자주 사용했던 거 같습니다. 어려운 내용은 아니라서 예제를 보면서 복습하면 좋을 것 같네요. 감사합니다.
'Java Script > jQuery' 카테고리의 다른 글
| [Java Script] jQuery / width, height, attr (0) | 2024.05.01 |
|---|---|
| [Java Script] jQuery/ radio, checkbox (0) | 2024.04.30 |
| [Java Script] jQuery 사용법 (0) | 2024.04.26 |
| [Java Script] jQuery / even, odd, lt, gt, eq (1) | 2024.04.26 |
| [Java Script] jQuery / prev, prevAll, prevUntil, next, nextAll, nextUntil, siblings (0) | 2024.04.26 |