컬쳐N라이프

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

val() 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를 적용하는 방법에 대해 알아보겠습니다.