학원 day62. jquery 이벤트처리(2), HTML DOM 조작, ER다이어그램

기록 2022. 12. 1. 17:49

=> 버튼을 클릭했을 때 경고창을 나타내라라는 명령

'버튼'은 이벤트대상이 되고, '클릭했을 때'는 방문자의 특정 동작을 가리키는데 이는 이벤트 등록 메서드가 된다.

'경고창을 나타내라'는 이벤트가 발생했을 때 실행되는 이벤트 핸들러가 된다.

* 이벤트 핸들러 :

- 이벤트가 발생했을 때 실행되는 코드

- 이벤트가 발생했을 때 코드를 실행시키는 것

jQuery 집합객체의 이벤트 관련 API

- 메소드

$(selector).on('이벤트명', 콜백함수)

선택된 엘리먼트에서 지정한 이벤트가 발생할 때 마다 콜백함수가 실행된다.

$(container).on('이벤트명', selector, 콜백함수)

container로 지정된 엘리먼트안에 selector로 검색되는 현재 존재하거나 미래에 추가될 엘리먼트에서

지정한 이벤트가 발생할 때마다 콜백함수가 실행된다.

* container : 이벤트 처리 대상이 되는 엘리먼트를 후손으로 가지는 엘리먼트를 지정한다.

* selector : 이벤트 처리 대상이 되는 엘리먼트

$(selector).one('이벤트명', 콜백함수)

선택된 엘리먼트에서 지정한 이벤트가 발생하면 단 한 번만 콜백함수가 실행된다.

$(selector).off('이벤트명')

선택된 엘리먼트에서 지정된 이벤트와 관련된 이벤트처리를 삭제한다.

$(selector).trigger('이벤트명')

선택된 엘리먼트에서 지정된 이벤트가 발생되게 한다.

* 각 이벤트의 편리메소드를 콜백없이 실행하면 해당 이벤트를 발생시키는 trigger가 된다.

* 각각의 이벤트마다 이벤트명으로 된 편리메소드가 있다. (cb : call back)

* click(cb) 엘리먼트를 클릭했을 때 콜백 실행

dbclick(cb) 엘리먼트를 더블클릭했을 때 콜백 실행

keydown(cb) 엘리먼트(입력필드)에서 키보드를 누를 때 콜백 실행

keypress(cb) 엘리먼트에서 키보드가 완전이 눌러졌을 콜백 실행

* keyup(cb) 엘리먼트에서 키보드가 다시 올라올 때 콜백 실행(입력필드에 값이 표시)

mouseenter(cb) 엘리먼트의 경계범위 안으로 마우스 포인트가 진입했을 때 콜백 실행

mouseleave(cb) 엘리먼트의 경계범위 밖으로 마우스 포인트가 빠져나갈 때 콜백 실행

mouseover(cb) 엘리먼트 위에 마우스 포인트가 위치할 때 콜백 실행

mouseout(cb) 엘리먼트 위에서 마우스 포인트가 나갈 때 콜백 실행

mousemove(cb) 엘리먼트 위에서 마우스 포인트를 움직일 때 마다 콜백 실행

focus(cb) 엘리먼트(폼입력요소)가 포커스를 획득했을 때 콜백 실행

blur(cb) 엘리먼트(폼입력요소)가 포커스를 잃을 때 콜백 실행

* change(cb) 엘리먼트(select, radio, checkbox)의 값(선택된/체크된 값)이 변할 때 마다 콜백 실행

* submit(cb) 폼엘리먼트의 입력값들이 서버로 제출될 때 콜백 실행

load(cb) 페이지의 로딩이 완료됐을 때 콜백 실행

ready(cb) Document객체가 준비됐을 때 콜백 실행

resize(cb) 브라우저의 윈도사이즈가 변할 때 마다 콜백 실행

* scroll(cb) 스크롤바가 움직일 때 마다 콜백 실행

* hover(cb1, cb2) mouseenter와 mouseleave를 한 번에 처리하는 메소드

cb1은 mouseenter, cb2는 mouseleave일 때 콜백 실행

HTML 컨텐츠를 응답으로 받아서 파싱해서 document 객체를 생성되고, document객체가 준비되면 ready 라는 이벤트가 발생하도록 jQuery에서 사용자정의 이벤트를 만들었다.

document 객체가 준비가 완료되면 그것을 랜더링해서 화면에 출력하고 화면에 출력이 완료되면 load라는 이벤트가 발생한다. ready라는 이벤트는 load라는 이벤트보다 빠른 시점에 작업을 수행시킬 수 있게 된 것이다.

화면이 로딩되자마자 실행되는 작업들을 제이쿼리 이전에는 load라는 이벤트에 정의했다.

ready는 화면에 뿌려지기 전이다. 브라우저의 뷰포트에 모든 화면이 출력되기까지 기다리지 않아도 된다.

자바스크립트의 대부분은 document의 엘리먼트를 조작하는 것이다.

load보다 빠른 시점인 ready라는 이벤트에는 화면 열리자마자 실행하고 싶은 작업을 작성한다.

$(document).ready(function() {

// Document 객체가 준비되면 실행할 작업

});

↓ (많이 쓰이므로 아래처럼 적도록 허용됨)

$(function() {

// Document 객체가 준비되면 실행할 작업

});

<div class="container">
   <h1>jQuery 이벤트</h1>
   
   <div class="mb-3">
   		<button class="btn btn-primary" id="btn-1">버튼1</button>
   		<button class="btn btn-primary" id="btn-2">버튼2</button>
   </div>
   
   <div>
   		<button class="btn btn-primary btn-sm" id="btn-on">on</button>
   		<button class="btn btn-primary btn-sm" id="btn-one">one</button>
   		<button class="btn btn-primary btn-sm" id="btn-off">off</button>
   		<button class="btn btn-primary btn-sm" id="btn-trigger">trigger</button>
   </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script type="text/javascript">
	// on버튼은 버튼1에 이벤트 핸들러를 등록시킨다.
	$('#btn-on').click(function() {
		// .on()메소드는 선택된 엘리먼트에서 지정된 이벤트가 발생했을 때 실행할 이벤트 핸들러를 등록시킨다.
		$('#btn-1').on('click', function() {
			alert("버튼1이 클릭되었습니다");
		});
	});
	// one버튼은 버튼2에 딱 한번만 실행할 이벤트 핸들러를 등록시킨다.
	$('#btn-one').click(function() {
		// .one()메소드는 선택된 엘리먼트에서 지정된 이벤트가 발생했을 때 딱 한번만 실행할 이벤트 핸들러를 등록시킨다.
		$('#btn-2').one('click', function() {
			alert("버튼2이 클릭되었습니다");
		});
	});
	// off버튼은 버튼1에 등록된 이벤트 핸들러를 삭제시킨다.
	$('#btn-off').click(function() {
		// .off() 메소드는 선택된 엘리먼트에서 지정된 이벤트명으로 등록한 이벤트 핸들러를 삭제시킨다.
		$('#btn-1').off('click');
	});
	// trigger버튼은 버튼1에서 이벤트를 강제발생시킨다.
		$('#btn-trigger').click(function() {
		// .trigger() 메소드는 선택된 엘리먼트에서 지정된 이벤트를 강제로 발생시킨다.
		$('#btn-1').trigger('click');
	});
	
</script>
</body>
</html>

<div class="container">
	<h1>jQuery 이벤트(이벤트에 대한 기본 동작 실행되지 않게 하기)</h1>
	
	<div class="mb-3">
      <a href="http://www.daum.net" id="link-1">링크1</a>
      <a href="http://www.naver.com" id="link-2">링크2</a>
   </div>
   
   <div class="mb-5">
   		<h3>링크 정보</h3>
   		<p id="message-box"></p>
   </div>
   
   <div class="mb-3">
      <form id="form-login" method="post" action="login.jsp">
         <div class="mb-2">
            <label class="form-label">아이디</label>
            <input type="text" class="form-control" name="id"/>
         </div>
         <div class="mb-2">
            <label class="form-label">비밀번호</label>
            <input type="password" class="form-control" name="password"/>
         </div>
         <div class="text-end">
            <button type="submit" class="btn btn-primary btn-sm">로그인</button>
         </div>
      </form>
   </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script type="text/javascript">
// Document객체가 준비되면 자동으로 실행되는 콜백함수를 등록한다.
// 콜백함수에서는 이벤트처리가 필요한 엘리먼트를 검색해서 각각의 엘리먼트에 이벤트핸들러 함수를 등록하는 작업을 수행한다.
// 콜백함수에서는 서버와 HTTP통신을 수행해서 초기 데이터를 획득해서 화면에 표시하는 작업을 수행한다.(AJAX 작업)
$(function() {
	
	// 링크1에서 클릭이벤트가 발생했을 때 실행할 이벤트 핸들러함수를 등록한다.
	$("#link-1").click(function(event) {
		event.preventDefault();
		// this는 이벤트가 발생할 엘리먼트 객체다.
		// $(this)는 엘리먼트 객체가 포함된 jQuery 객체를 반환한다.
		// .attr("속성명")은 선택된 엘리먼트에서 지정된 속성명에 대한 속성값을 반환한다.
		var linkAddress = $(this).attr("href");
		// .text(컨텐츠)는 선택된 엘리먼트의 텍스트 컨텐츠 값을 변경한다.
		$("#message-box").text(linkAddress);
	});
	
	// 링크2에서 클릭이벤트가 발생했을 때 실행할 이벤트 핸들러함수를 등록한다.
	$("#link-2").click(function(event) {
		var linkAddress = $(this).attr("href");
		$("#message-box").text(linkAddress);
		
		return false; // 이벤트에 대한 기본동작이 정의되었을 경우, 기본동작이 실행되지 않는다.
	});
	
	// 폼에서 submit 이벤트가 발생했을 때 실행할 이벤트 핸들러 함수를 등록한다.
	$("#form-login").submit(function(event) {
		//event.preventDefault();
		
		
		// .val() 은 입력요소의 값을 반환한다.
		var idValue = $(":input[name=id]").val();
		if (idValue === "") {
			alert("아이디는 필수입력값입니다.");
			return false;
		}
		var passwordValue = $(":input[name=password]").val();
		if (passwordValue === "") {
			alert("비밀번호는 필수입력값입니다.");
			return false;
		}
		
		return true;  // 이벤트에 대한 기본동작이 실행된다.
	});
});
</script>
</body>
</html>

이벤트에 대한 기본 동작이 일어나지 않게 하기 위한 방법

1. $("#link-1").click(function(event) {

event.preventDefault(); // 이벤트에 대한 엘리먼트의 기본동작이 일어나지 않게 한다.

// 수행문;

});

2. return false;

event객체를 매개변수로 선언하면 제이쿼리가 event객체를 전달해준다.

event.preventDefault();를 실행하면 기본동작이 일어나지 않는다.

즉, a태그의 기본동작으로 화면이 이동하지 않는다.

return false; 처럼 반환값으로 제어할 수도 있다.

무조건 실행안되게 할 때는 event.preventDefault();를 쓰고,

실행될 때도 있고 실행되지 않을 때도 있다면 반환값으로 제어한다.

아이디, 비밀번호 입력 안했을 때 제이쿼리로 이벤트 처리하기

mouseenter와 mouseleave는 항상 쌍으로 같이 다닌다.

따라서, .hover(handler1, handler2) 메소드를 이용한다.

<div class="container">
   <h1>jQuery 이벤트</h1>
   
 	<div class="row mb-3">
      <div class="col-3">
         <div class="card">
            <div class="card-header">부서목록</div>
            <div class="card-body">
               <ul class="list-group" id="dept-list-group">
                  <li class="list-group-item active" data-dept-target="#dept-100">인사부</li>
                  <li class="list-group-item" data-dept-target="#dept-200">총무부</li>
                  <li class="list-group-item" data-dept-target="#dept-300">관리부</li>
                  <li class="list-group-item" data-dept-target="#dept-400">영업부</li>
                  <li class="list-group-item" data-dept-target="#dept-500">기술부</li>
               </ul>
            </div>
         </div>
      </div>
      <div class="col-9" id="dept-tables">
         <div id="dept-100">
            <p>인사부에 소속된 사원 목록을 확인하세요</p>
            <table class="table">
               <thead>
                  <tr>
                     <th>사원번호</th><th>이름</th><th>직위</th><th>연락처</th>
                  </tr>
               </thead>
               <tbody>
                  <tr>
                     <td>E581</td><td>홍길동</td><td>사원</td><td>010-1111-1111</td>
                  </tr>
                  <tr>
                     <td>E231</td><td>홍길동</td><td>사원</td><td>010-1111-1111</td>
                  </tr>
                  <tr>
                     <td>E801</td><td>홍길동</td><td>사원</td><td>010-1111-1111</td>
                  </tr>
               </tbody>
            </table>
         </div>
         <div id="dept-200">
            <p>총무부에 소속된 사원 목록을 확인하세요</p>
            <table class="table">
               <thead>
                  <tr>
                     <th>사원번호</th><th>이름</th><th>직위</th><th>연락처</th>
                  </tr>
               </thead>
               <tbody>
                  <tr>
                     <td>E601</td><td>류관순</td><td>차장</td><td>010-1111-1111</td>
                  </tr>
                  <tr>
                     <td>E441</td><td>류관순</td><td>과장</td><td>010-1111-1111</td>
                  </tr>
                  <tr>
                     <td>E321</td><td>류관순</td><td>부장</td><td>010-1111-1111</td>
                  </tr>
               </tbody>
            </table>
         </div>
         <div id="dept-300">
            <p>관리부에 소속된 사원 목록을 확인하세요</p>
            <table class="table">
               <thead>
                  <tr>
                     <th>사원번호</th><th>이름</th><th>직위</th><th>연락처</th>
                  </tr>
               </thead>
               <tbody>
                  <tr>
                     <td>E081</td><td>이순신</td><td>대리</td><td>010-1111-1111</td>
                  </tr>
                  <tr>
                     <td>E701</td><td>이순신</td><td>대리</td><td>010-1111-1111</td>
                  </tr>
                  <tr>
                     <td>E801</td><td>이순신</td><td>과장</td><td>010-1111-1111</td>
                  </tr>
               </tbody>
            </table>
         </div>
         <div id="dept-400">
            <p>영업부에 소속된 사원 목록을 확인하세요</p>
            <table class="table">
               <thead>
                  <tr>
                     <th>사원번호</th><th>이름</th><th>직위</th><th>연락처</th>
                  </tr>
               </thead>
               <tbody>
                  <tr>
                     <td>E051</td><td>강감찬</td><td>주임</td><td>010-1111-1111</td>
                  </tr>
                  <tr>
                     <td>E061</td><td>강감찬</td><td>대리</td><td>010-1111-1111</td>
                  </tr>
                  <tr>
                     <td>E071</td><td>강감찬</td><td>과장</td><td>010-1111-1111</td>
                  </tr>
               </tbody>
            </table>
         </div>
         <div id="dept-500">
            <p>기술부에 소속된 사원 목록을 확인하세요</p>
            <table class="table">
               <thead>
                  <tr>
                     <th>사원번호</th><th>이름</th><th>직위</th><th>연락처</th>
                  </tr>
               </thead>
               <tbody>
                  <tr>
                     <td>E011</td><td>김유신</td><td>부장</td><td>010-1111-1111</td>
                  </tr>
                  <tr>
                     <td>E021</td><td>김유신</td><td>차장</td><td>010-1111-1111</td>
                  </tr>
                  <tr>
                     <td>E031</td><td>김유신</td><td>대리</td><td>010-1111-1111</td>
                  </tr>
               </tbody>
            </table>
         </div>
      </div>
   </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script type="text/javascript">
	/*
	$("#dept-list-group .list-group-item").mouseenter(function(){
		// this는 이벤트가 발생한 엘리먼트 객체다.
		// $(this)는 이벤트가 발생한 그 엘리먼트를 포함하는 jQuery객체를 반환한다. jQuery객체 = 이벤트가 발생한 엘리먼트 + jQuery 메소드
		$(this).addClass("active");
	})
	$("#dept-list-group .list-group-item").mouseleave(function(){
		// this는 이벤트가 발생한 엘리먼트 객체다.
		// $(this)는 이벤트가 발생한 그 엘리먼트를 포함하는 jQuery객체를 반환한다. jQuery객체 = 이벤트가 발생한 엘리먼트 + jQuery 메소드
		$(this).removeClass("active");
	})
	*/
	// .hover(handler1, handler2) 
	//         handler1은 mouseenter 이벤트 발생시 실행할 이벤트핸들러함수, 
	//         handler2는 mouseleave 이벤트 발생시 실행할 이벤트핸들러함수
	$("#dept-list-group .list-group-item").hover(function() {
		// this는 마우스가 진입한 엘리먼트다. <li class="list-group-item" data-dept-target="#dept-100">인사부</li>
		
		// 마우스가 진입한 엘리먼트에 active 클래스를 추가한다. <li class="list-group-item active" data-dept-target="#dept-100">인사부</li>
		$(this).addClass('active');   // 마우스가 들어왔을 때
		// 마우스가 진입한 엘리먼트에서 data-dept-target 속성값을 조회한다. deptDivId는 "#dept-100"
		var deptDivId = $(this).attr("data-dept-target");
		
		// 사원목록을 포함하는 모든 div를 숨김처리한다.
		$("#dept-tables > div").hide();
		// 표시할 사원목록을 포함하는 div만 화면에 표시한다.
		$(deptDivId).show();
		
	}, function() {
		$(this).removeClass('active');  // 마우스가 나갔을 때
		
		// 사원목록을 포함하는 모든 div를 숨김처리한다.
		$("#dept-tables > div").hide();
	});
	
	// 인사부 사원목록만 표시되게 한다.
	 $("#dept-tables > div:not(:first-child)").hide();
	
	// 처음에 브라우저 열었을 때에도 사원목록이 표시되지 않게 한다.  
	// $("#dept-tables > div").hide();
	
	// list-group-item중에서 첫번째 엘리먼트에서 mouseenter 이벤트를 강제로 발생시킨다. 
	// $("#dept-list-group .list-group-item:first").trigger("mouseenter");
	
</script>
</body>
</html>

function는 실행하는 함수가 아니다. 등록하는 것이다.

버튼 추가하기

<div class="container">
   <h1>jQuery 이벤트</h1>
   
   <div class="mb-3">
   		<button class="btn btn-primary" id="btn-add">버튼 추가하기</button>
   </div>	  
    
   <div id="button-box">
   		<button class="btn btn-primary btn-sm">버튼</button>
   </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script type="text/javascript">
	$("#btn-add").click(function() {
		var htmlContent = ' <button class="btn btn-outline-primary btn-sm">버튼</button>';
	
		// .append(html컨텐츠)는 선택된 엘리먼트 안에 html컨텐츠를 추가한다.
		$("#button-box").append(htmlContent);
		
	});
	
	/*
		<div id="button-box"></div> 엘리먼트 안에 현재 존재하거나, 미래에 추가될 버튼에서 클릭이벤트가 발생했을 때 실행할 이벤트 핸들러 등록하기
		
		// <div id="button-box"></div> 엘리먼트 안에 현재 존재하는 버튼에만 이벤트 핸들러가 등록된다. 
		$('#button-box button').click(function() {
			alert("버튼이 클릭되었습니다.");
		})
		
		// #button-box 엘리먼트 안에 현재 존재하거나 미래에 추가되는 button엘리먼트에서 click 이벤트가 발생했을 때 실행할 이벤트 핸들러 등록하기
		$("#button-box").on("click", 'button', function() {
			
		})
	*/
	
	// <div id="button-box"></div> 엘리먼트 안에 현재 존재하거나, 미래에 추가될 버튼에서 클릭이벤트가 발생했을 때 실행할 이벤트 핸들러 등록하기
	$("#button-box").on('click', 'button', function() {
		alert("버튼이 클릭되었습니다.");
	});
	
</script>
</body>
</html>

$("#btn-add").click(function() {
var htmlContent = ' <button class="btn btn-outline-primary btn-sm me-2">버튼</button>'; // 앞에 공백을 줘서 여백을 준다.
// 사용자가 버튼을 클릭하면 발생한다.

// .append(html컨텐츠)는 선택된 엘리먼트 안에 html컨텐츠를 추가한다.
$("#button-box").append(htmlContent);
});

처음에 열었을 때 버튼이 하나 밖에 없었으니까 htmlContent를 추가하는 건 처음에 버튼 하나만에 적용된다.

미래에 추가되는 버튼에다가 이벤트를 걸 수 없다.

미래에 추가되는 이벤트에다가도 이벤트를 걸고 싶다면 부모가 있어야 한다.

* 미래에 추가될 엘리먼트에 이벤트를 추가하고자 할 때에는 반드시 .on() 메소드를 사용해야 한다.

$(container).on('이벤트명', selector, 콜백함수)

container로 지정된 엘리먼트안에 selector로 검색되는 현재 존재하거나 미래에 추가될 엘리먼트에서

지정한 이벤트가 발생할 때마다 콜백함수가 실행된다.

* container : 이벤트 처리 대상이 되는 엘리먼트를 후손으로 가지는 엘리먼트를 지정한다.

* selector : 이벤트 처리 대상이 되는 엘리먼트

HTML DOM 조작

텍스트컨텐츠, html 컨텐츠, 폼입력값, 속성, 프로퍼티, 스타일 조회/변경 메소드

값의 유무에 따라 나뉜다.

값이 없으면 조회, 값이 있으면 추가/변경이다.

<div class="container">
   <h1>텍스트 컨텐츠/html 컨텐츠/폼입력값/속성/프로퍼티 조회/변경하기</h1>
   
   <div class="mb-3">
   		<p id="el-1">연습</p>
   		<p id="el-2">연습</p>
   		
   		<p id="el-3"><strong>35,000 원</strong></p>
   		<p id="el-4"><strong>35,000 원</strong></p>
   		
   		<input type="text" name="username" class="form-control" id="el-5"/>
   		<input type="text" name="useremail" class="form-control" id="el-6"/>
   		
   		<img src="resources/images/image-2.jpg" width="50" height="75" id="el-7"/>
   		<img src="resources/images/image-3.jpg" width="50" height="75" id="el-8"/>
   		
   		<input type="text" class="form-control" id="el-9" /> 
   
      <div class="form-check">
           <input class="form-check-input" type="checkbox" value="자바" id="el-10" checked="checked">
           <label class="form-check-label" for="el-11">자바</label>
      </div>
   </div>
  
   <div class="mb-3">
   		<button class="btn btn-outline-dark btn-sm">텍스트 컨텐츠 조회</button>
   		<button class="btn btn-outline-dark btn-sm">텍스트 컨텐츠 변경</button>
   		<button class="btn btn-outline-dark btn-sm">HTML 컨텐츠 조회</button>
   		<button class="btn btn-outline-dark btn-sm">HTML 컨텐츠 변경</button>
   		<button class="btn btn-outline-dark btn-sm">폼 입력값 조회</button>
   		<button class="btn btn-outline-dark btn-sm">폼 입력값 변경</button>
   		<button class="btn btn-outline-dark btn-sm">속성값 조회</button>
   		<button class="btn btn-outline-dark btn-sm">속성값 변경</button>
   		<button class="btn btn-outline-dark btn-sm">비활성화 하기</button>
   		<button class="btn btn-outline-dark btn-sm">활성화 하기</button>
   		<button class="btn btn-outline-dark btn-sm">체크하기</button>
   		<button class="btn btn-outline-dark btn-sm">체크해제하기</button>
   		
   </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script type="text/javascript">
	$("button:eq(0)").click(function() {
		// .text() : 엘리먼트의 텍스트 컨텐츠를 조회한다. 태그 사이의 텍스트를 읽어오는 것이다.
		var textContent = $("#el-1").text();
		alert(textContent);
	});
	
	$("button:eq(1)").click(function() {
		// .text(textContent) : 엘리먼트의 컨텐츠를 텍스트 컨텐츠로 변경한다. 태그사이의 텍스트를 변경하는 것이다.
		$("#el-2").text("텍스트 컨텐츠 변경했다.");
	});
	
	//$("button:eq(2)").click(function() {
		//var textContent = $("#el-3").text();
		//alert(textContent);
	//});
	
	$("button:eq(2)").click(function() {
		//.html() : 엘리먼트의 html 컨텐츠를 조회한다. 태그 사이의 html컨텐츠를 읽어오는 것이다.
		var htmlContent = $("#el-3").html();
		alert(htmlContent);
	});
	
	$("button:eq(3)").click(function() {
		// .html(htmlContent) : 엘리먼트의 컨텐츠를 지정된 HTML 컨텐츠로 변경한다. 태그 사이의 html컨텐츠를 변경하는 것이다. 
		$("#el-4").html('<strong class="text-danger">32,000 원</strong>');
	});
	
	$("button:eq(4)").click(function() {
		// .val() : 폼 입력요소의 값을 조회한다.
		var value = $("#el-5").val();
		alert(value);
	});
	
	$("button:eq(5)").click(function() {
		// .val(value) : 폼 입력요소의 값을 지정된 값으로 변경한다. 
		$("#el-6").val("hong@gmail.com");
	});
	
	$("button:eq(6)").click(function() {
		// .attr(name) : 엘리먼트에서 지정된 속성명으로 설정된 값을 조회한다.
		var value = $("#el-7").attr("src");
		alert(value);
	})
	
	$("button:eq(7)").click(function() {
		// .attr(name, value) : 엘리먼트에 지정된 속성명과 속성값을 추가한다. 해당 속성이 이미 존재하면 그 값을 변경한다. 
		$("#el-8").attr("src", "resources/images/image-8.jpg");
	});
	
	$("button:eq(8)").click(function() {
		// .prop("disabled", true) : 폼 입력요소, 버튼을 비활성화시킨다.
		$("#el-9").prop("disabled", true);
	})
	
	$("button:eq(9)").click(function() {
		// .prop("disabled", false) : 폼 입력요소, 버튼을 활성화시킨다.
		$("#el-9").prop("disabled", false);
	})
	
	$("button:eq(10)").click(function() {
		// .prop("checked", true) : 체크박스, 라디오버튼을 체크상태로 변경한다.
		$("#el-10").prop("checked", true);
	})
	
	$("button:eq(11)").click(function() {
		// .prop("checked", false) : 체크박스, 라디오버튼을 체크해제상태로 변경한다.
		$("#el-10").prop("checked", false);
	})
</script>
</body>
</html>

체크박스나 라디오버튼는 값을 변경하지는 못하고 선택여부를 바꾸는 것이다.

disabled와 checked는 속성처럼 보이지만 속성이 아니기 때문에 checked="checked"처럼 쓸 수도 있지만 checked만 써도 된다.

따라서 변경하려면 .attr()이 아닌 .prop()를 사용해야 한다.

<div class="container">
   <h1>jQuery DOM 조작</h1>
   
   <table class="table">
    <thead>
        <tr>
            <th><input type="checkbox" id="checkbox-all" checked></th>
            <th>제목</th>
            <th>가격</th>
            <th>수량</th>
            <th>구매가격</th>
        </tr>
    </thead>
    </tbody>
        <tr>
            <td><input type="checkbox" name="bookNo" value="100" checked/></td>
            <td>이것이 자바다</td>
            <td><strong class="text-danger" id="book-price">35,000</strong> 원</td>
            <td><input type="number" class="form-control w-50" id="book-amount" name="amount" value="1"/></td>
            <td><strong class="text-danger" id="book-order-price">35,000</strong> 원</td>
        </tr>
   </table>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
	   /*
	   $("#book-amount").change(function() {
	      // 가격, 현재수량
	      var price = $("#book-price").text().replace(",", "");   // <strong>35,000</strong> 태그사이의 컨텐츠 조회
	      var amount = $("#book-amount").val();               // <input type="number" value="1"> 입력요소의 값 조회
	      // 구매가격 계산
	      var orderPrice = price*amount;
	      
	      // new Number(숫자).toLocaleString() : 숫자를 3자리마다 ","가 포함된 텍스트로 반환한다.
	      var currencyOrderPrice = new Number(orderPrice).toLocaleString();
	      
	      // 구매가격을 태그의 컨텐츠로 변경
	      $("#book-order-price").text(currencyOrderPrice);            // <strong>35,000</strong> 태그 사이의 컨텐츠 변경
	   })
	   */
	
	  // 동시에 여러 개의 이벤트에 대한 이벤트 핸들러 함수 등록하기	
	  $("#book-amount").on('change keyup', function() {	
		// 가격, 현재수량
		var price = $("#book-price").text().replace(",", "");   //<strong>35,000</strong> 태그사이의 컨텐츠 조회이므로 .text()
		var amount = $("#book-amount").val();  // <input type="number" value="1"> 입력요소의 값 조회이므로 .val()를 사용한다.
		// 구매가격 계산
		var orderPrice = price*amount;
		
		// new Number(숫자).toLocaleString() : 숫자를 3자리마다 ","가 포함된 텍스트로 반환한다.
		var currencyOrderPrice = new Number(orderPrice).toLocaleString();
		
		// 구매가격을 태그의 컨텐츠로 변경
		$("#book-order-price").text(currencyOrderPrice);  // <strong>35,000</strong> 태그 사이의 컨텐츠 변경
	})	
})
</script>
</body>
</html>

세군데에 아이디를 붙인다.

값을 읽어올 곳, 이벤트를 붙여야할 곳, 값을 변경해야 하는 곳에 아이디를 붙인다.

new Number(숫자).toLocaleString() : 숫자를 3자리마다 ","가 포함된 텍스트로 변환된다.

toLocaleString에서 locale은 지역화라는 의미이다, 숫자를 그 지역의 숫자 표기법과 일치하는 표기법으로 표시하라는 의미이다.

이벤트 1개 등록

$("#book-amount").change(function() {

$("#book-amount").on("change", function() { // 위의 코드와 동일하다.

이벤트 2개 등록

$("#book-amount").on('change keyup', function() {

on은 만능이다.

이벤트 2개에 대해서 이벤트 핸들러를 등록할 수도 있고, 미래의 이벤트에 대한 이벤트핸들러도 등록시킬 수 있다.

ERD clound.com

: ER 다이어그램 작성 및 공유 가능한 사이트

논리모델 : 특정데이터베이스에 종속적이지 않는 정보로 구성된 모델, 한글로 적음.

물리모델 : 특정데이터베이스에 종속적인 모델, (물리 이름 : 실제 데이터베이스의 테이블로 만들어졌을 때 사용되는 이름)

* 하나의 논리모델에 여러개의 물리모델이 있을 수 있다.

도메인 : 이 값이 가져야 하는 구체적인 정보, 값에 대한 범위

식별관계 : Primary key가 추가됨

비식별관계 : 외래키로 추가됨.

저작자표시

'기록' 카테고리의 다른 글

학원 day64. ajax (0)	2022.12.05
학원 day63. HTML DOM(2), AJAX (0)	2022.12.02
학원 day61. jquery 선택자, 이벤트 처리 (0)	2022.11.30
학원 day60. 부트스트랩, Jquery (0)	2022.11.29
학원 day59. 검색기능 (0)	2022.11.28

ABOUT ME

개발 일기 개발 일기

jQuery 집합객체의 이벤트 관련 API

버튼 추가하기

HTML DOM 조작

'기록' 카테고리의 다른 글

티스토리툴바

ABOUT ME

jQuery 집합객체의 이벤트 관련 API

버튼 추가하기

HTML DOM 조작

'기록' 카테고리의 다른 글

관련글 관련글 더보기

티스토리툴바