입력 요소 값 가져오기

입력 요소 값 가져오기

---

값 설정하기

$("셀렉터").val("내용");

값 읽어오기

text, select(드롭다운)

var input = $("셀렉터").val();

드롭다운요소의 경우 사용하지 않는 <option> 태그라 하더라도 value속성값을 부여해야 한다.

<select name='foo'>
        <option value="">---선택하세요 ---</option>
        <option value="bar">item 1</option>
</select>

라디오 버튼의 경우

• 셀렉터가 여러개를 의미하는 경우이므로 그 중에서 선택된 항목만 지정하는 셀렉터를 사용해야 한다.
  

• 라디오는 하나만 선택 가능하므로 가져온 결과 자체는 단일 값이다.

var input = $("셀렉터:checked").val();

체크박스의 경우

• .checked 가상클래스를 통해 가져온 대상이 배열 상태가 되므로 이를 반복문으로 처리해야 한다.

• 배열의 요소는 선택된 체크박스들에 대한 HTML 태그가 된다.

• 그러므로 각 HTML 태그를 다시 jQuery 객체로 변환하여 사용해야 한다.

var input = $("셀렉터:checked");
 
    for (var i=0; i<input.length; i++){
        // 배열에 포함된 원소(HTML태그)를 jQuery객체로 변환
        var tmp = $(input[i]);
        ...
    }

포커스 강제 지정

$("셀렉터").focus();

입력 요소 제어

$.each() 함수

배열을 탐색하는 jQuery 기능.

var data = ['hello', 'world'];
    
//     
$.each(data, function(index, item) {
    // index는 순차적으로 0,1
    // item은 순차적으로 'hello', 'world'
});

• 배열의 원소가 HTMl객체인 경우 jQuery객체로 변환하여 사용해야 한다.

ex) 체크박스

var data = ['<input type-"checkbox"/>', '<input type-"checkbox"/>'];
 
    // 배열을 탐색하면서 원소의 수 만큼 콜백함수가 호출된다
$.each(data, function(index, item){
    // $(item) 형태로 객체를 생성하여 처리 가능.
});

원래의 목적은 객체를 탐색하는 기능.

var data = {name: 'hello', userid: 'world', age: 20};
 
$.each(data, function(index, item) {
    console.log(index + ">>" + item);
    
});

입력요소 관련 submit 이외의 이벤트

포커스가 들어온 경우

$("셀렉터").focus(function( [e] ) {
    ...
});

포커스가 빠져나간 경우

$("셀렉터").blur(function( [e] ) {
    ...
});

상태가 변경된 경우

change 이벤트는 주로 라디오, 체크박스, 드롭다운에 대하여 활용도가 높다

$("셀렉터").change(function( [e] ) {
    ...
});

텍스트를 입력하는 요소일 경우

내용이 변경되고 포커스가 빠져 나올 때 이벤트가 발생한다.

체크박스나 라디오 버튼의 경우

선택 상태가 변경된 즉시 발생한다.

드롭다운의 경우

선택상태가 변경된 즉시 발생한다.

프로퍼티 설정

• HTML 태그에서 값을 갖지 않는 속성 : property

• 값을 갖는 속성 : attribute

프로퍼티의 적용여부 조회

특정 프로퍼티의 적용여부를 boolean 값으로 조회한다.

     checked, disabled, selected

var is = $("셀렉터").prop('프로퍼티 이름');

ex) 체크박스만 checked 속성이 적용되어 있는지 여부 확인

<input type="checkbox" class='foo' disabled/>

// 속성이 적용되어 있으므로 true
var ok = $(".foo").prop('disabled');

프로퍼티의 설정/해제

prop 함수에 두 번째 파라미터로 boolean값을 전달하면 프로퍼티를 강제로 설정하거나 해제할 수 있다.

$(".foo").prop('disabled', true|false);