<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="../jquery-3.6.0.min.js"></script>
<style>
</style>
<script>
$(function(){
$('#div1').text('text인천시청');
$('#div2').html('html인천시청');
$('#div3').text('<strong>인천시청</strong>');
$('#div4').html('<strong>인천시청</strong>');
});
</script>
</head>
<body>
<div id="div1">안에 들어 있는 텍스트1</div>
<div id="div2">안에 들어 있는 텍스트2</div>
<div id="div3">안에 들어 있는 텍스트3</div>
<div id="div4">안에 들어 있는 텍스트4</div>
</body>
</html>
$('#div3').text('<strong>인천시청</strong>'); 텍스트로 인식
$('#div4').html('<strong>인천시청</strong>'); 태그 명령이 실행
↓
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="../jquery-3.6.0.min.js"></script>
<style>
div{ border: 3px solid #000; padding:10px; }
</style>
<script>
$(function(){
$('#div1').empty(); //비워라
});
</script>
</head>
<body>
<div id="div1">비우자</div>
</body>
</html>
empty(), html(' '), text(' ')
박스 안의 글씨를 비우는 명령입니다.
$('#div1').empty();$('#div1').html('');$('#div1').text('');html과 text의 경우 (' '); 를 해주어야 하는 이유는 작은 따옴표(') 안에 들어있는 띄어쓰기 부분이 빈공간을 대체하기 때문입니다.
hide와 다른 점은?
$('#div1').hide();hide()의 경우에는 네모선까지 모든 게 숨겨지는 기능 입니다.
<체인지 명령>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="../jquery-3.6.0.min.js"></script>
<style>
img{ width: 200px; height: 150px; }
</style>
<script>
$(function(){
$('#change').attr('src','../img/incheon.jpg');
});
</script>
</head>
<body>
<div>
<img src="../img/dog.jpg" id="change">
</div>
</body>
</html>
<div>
<img src="../img/dog.jpg" id="change">
</div>
$(function(){
$('#change').attr('src','../img/incheon.jpg');
});강아지 이미지를 등록 했지만 attr(attribute) 속성.. 명령으로 속성을 바꾸어 줄 수 있습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="../jquery-3.6.0.min.js"></script>
<style>
fieldset{ width:300px; height:200px; background:skyblue; }
legend{ background:white; }
</style>
<script>
$(function(){
$('#input1').val('내용 바꿈'); //val 내용바꿈
$('#textarea1').val('다음의 내용'); //내용이 달라짐
$('#select1').val('s2'); //미국이 나타남
$('#select2').val(['ss2','ss4']); //두개 선택은 테이블을 써야한다.
});
</script>
</head>
<body>
<form>
<fieldset>
<legend>인적사항</legend>
<input id="input1" type="text" size="40" value="텍스트 필드입니다."><br>
<textarea id="textarea1" rows="3" cols="20">
처음의 내용입니다.
</textarea><br>
<select id="select1">
<option value="s1">한국</option>
<option value="s2">미국</option>
<option value="s3">영국</option>
<option value="s4">독일</option>
</select><br>
<select id="select2" multiple="multiple">
<option value="ss1">한국</option>
<option value="ss2">미국</option>
<option value="ss3">영국</option>
<option value="ss4">독일</option>
</select><br>
</form>
</fieldset>
</body>
</html> |
 |
아래의 코드가 있고 없고의 차이
<script>
$(function(){
$('#input1').val('내용 바꿈'); //val 내용바꿈
$('#textarea1').val('다음의 내용'); //내용이 달라짐
$('#select1').val('s2'); //미국이 나타남
$('#select2').val(['ss2','ss4']); //두개 선택은 테이블을 써야한다.
});
</script>없으면 왼쪽이고, 이걸 추가하면 오른쪽이다. val이 내용을 바꾸는 명령어다. 왼쪽에 있는 걸 불러와서 오른쪽에 있는 내용으로 바꾼다.
$('#select2').val(['ss2','ss4']);
두개 이상 선택을 하려면 배열을 써야해서 ([ ' ', ' ' ]); 안에 두었다.
'개발일지 > JavaScript + jquery' 카테고리의 다른 글
| [jquery] append() 명령어 (0) | 2021.09.13 |
|---|---|
| [jquery ] addClass(),removeClass() 명령어 (0) | 2021.09.13 |
| [jquery] 명령어 기본규칙과 예시들① (0) | 2021.09.10 |
| [jquery] 다운로드 주의 사항 + 기본 사용법 (0) | 2021.09.10 |
| [js] canvas에 그림 그리기(선, 사각형, 삼각형, 글씨 등) (0) | 2021.09.10 |
