jQuery] val(), text() 값 셋팅, 값 가져오기 setValue, setText

jQuery val(), text()에 대해서 알아보겠습니다.

val() text()의 차이는 

input DOM과 같이 value 속성에 값이 적용되는 DOM은 val() 함수를 사용하고

div와 같이 <div></div> 사이에 text가 값이 적용되는 DOM은 text()함수를 사용합니다.

<input type="text" id="ipt" placeholder="입력 후 버튼을 클릭"/>

<div class="test">1번 div</div><br/>

------------------ 값 가져오기 --------------------<br/>

<button id="ipt_btn">input value</button>

<button id="div_test">div text</button><br/><br/>

------------------ 값 셋팅하기 ---------------------<br/>

<button id="set_ipt_btn">input 셋팅</button>

<button id="set_div_test">div 셋팅</button>

- jQuery

$(document).ready(function() {

// 값 가져와서 알림창으로 띄우기

  $('#ipt_btn').off('clcik').on('click', function() {

    alert($('#ipt').val());

    });

    $('#div_test').off('clcik').on('click', function() {

    alert($('.test').text());

    });

 // DOM에 값 셋팅하기

    $('#set_ipt_btn').off('clcik').on('click', function() {

    $('#ipt').val('input 셋팅');

    });

    $('#set_div_test').off('clcik').on('click', function() {

    $('.test').text('div 셋팅');

    });

});

예제 : 이동

간단하게 val(), text() 함수를 이용하여 DOM의 값을 가져오고

셋팅하는 방법을 알아보았습니다.

다음 시간은 jQuery를 이용하여 CSS를 적용하는 방법에 대해 알아보겠습니다.