본문 바로가기

개발일지/JavaScript + jquery

[jquery] 기본 명령어 예제 몇 가지 ②

 

<!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']);
두개 이상 선택을 하려면 배열을 써야해서 ([ ' ', ' ' ]); 안에 두었다.