[JQuery] val메서드, getter, setter

input의 value 읽어오기

function myFunc() {
    var result = $("#my-input").val();
    // val메서드가 접근한 요소의 value를 반환해준다.
    // 반환된 값은 result 변수에 저장되고
    alert(result); // 출력
}

<input type="text" id="my-input" value="나의 값">
<button onclick="myFunc()">클릭</button>

 

버튼을 클릭하면 알림창에 해당 값인 "나의 값"이 출력된다.

 

 

 

input의 value 변경하기

function myFunc() {
    $("#my-input").val('우리 값');
}

<input type="text" id="my-input" value="나의 값">
<button onclick="myFunc()">클릭</button>

 

버튼을 클릭하면 input의 값이 변경되는 걸 확인할 수 있다.

 

 

 

 

getter, setter

var result = $("#my-input").val(); - getter (가져오는 함수, 반환값 사용)
$("#my-input").val('우리 값'); - setter (설정하는 함수)
메서드 오버로딩 (이름이 갖고, 매개변수 타입이나 갯수나 다른 메서드가 여러개)
method overloading - 메서드 과적하는 것

 

text() - getter

text('값') - setter

html() - getter

html('값') - setter