컬쳐N라이프

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가 사라졌을 때 적용된다는 점을 주의해주시기 바랍니다.

예제보기

jQuery trigger에 대해서 알아보겠습니다.

trigger를 굳이 해석하자면 방아쇠, (어떤) 계기등으로 해석할 수 가 있습니다.

jQuery에서 trigger는 어떤 함수를 실행시켜주는 함수로 보시면 될꺼 같습니다.

<div class="trigger">1번 div</div>

- jQuery

$(document).ready(function() {

   $('.trigger').click(function() {

    var idx = $('. trigger').index(this);

        alert(idx + "번 div, 내용 : " + $(this).text());

   });

   $('.trigger').trigger('click');

});

trigger클래스의 클릭 이벤트로 alert창에 간단한 내용이 뜨도록 정의했습니다.

trigger를 작성하지 않았을 때는 trigger 클래스를 가진 DOM을 클릭했을 때 alert창이 떴는데

현재는 trigger를 선언했기 때문에 자동으로 alert창이 뜨는걸 확인할 수 있습니다.

click, change, blur, dbclick 등등 다양한 이벤트를 적용할 수 있습니다.

예제 : 이동

다음 시간은 jquery를 이용하여 input value의 값을 셋팅하고, 값을 가져오는 것과 일반 DOM에 텍스트 값을 반영하는 방법에 대해 알아보겠습니다.