[jQuery] jquery change change()

jquery change함수에 대해 알아보겠습니다.

jquery chage함수는 DOM의 상태 변경 등의 이벤트가 발생했을 때 사용할 수 있습니다.

- html 

<div>
  <select id="sweets">
    <option>Chocolate</option>
    <option>Candy</option>
    <option>Taffy</option>
    <option>Caramel</option>
    <option>Fudge</option>
    <option>Cookie</option>
  </select>
</div>
<hr/>
<div>
  <input type="text" id="txt"/>
  <span id="result"></span>
</div>

- javascript

$(document).ready(function () {
	$('#sweets').change(function () {
  		alert($(this).val());
  });
  
  $('#txt').change(function() {
  	// validation check 
    $('#result').text($(this).val());
  });
});

첫번째는 change 함수를 이용해서 HTML의 select 변경이 일어났을 때 선택된 이름을 알림창으로 나타냅니다.

두번째는 change 함수를 이용해서 HTML input 값을 다 입력하고 input의 focus가 사라졌을 때 

span에 input에 입력된 값을 표시합니다.

input에 적용된 change 함수의 경우에는 텍스트가 입력될 때 마다 적용되는게 아니라

focus가 사라졌을 때 적용된다는 점을 주의해주시기 바랍니다.

예제보기