재유's

[jQuery] 입력 요소 제어 본문

IT Story/ : : JQuery

[jQuery] 입력 요소 제어

Stella_NY 2019. 2. 13. 11:01

입력 요소 제어 


$.each() 함수

 - 배열을 탐색하는 jQuery 기능

1
2
3
4
5
6
7
var data = ['hello''world'];
 
// 배열을 탐색하면서 원소의 수 만큼 콜백함수가호출된다.
$.each(data, function(index, item){
    // index는 순차적으로 0, 1
    // item은 순차적으로 'hello', 'world'
});



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

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



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

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




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

 - 포커스가 들어온 경우

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



 - 포커스가 빠져나간 경우

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




상태가 변경된 경우

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

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



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

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

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

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

- 드롭다운의 경우

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

'IT Story >  : : JQuery' 카테고리의 다른 글

[jQuery] 프로퍼티  (0) 2019.02.13
[jQuery] 정규 표현식  (0) 2019.02.13
[jQuery] 입력 요소 값 가져오기  (0) 2019.02.13
[jQuery] 요소의 동적 생성  (0) 2019.02.13
[jQuery] 요소의 탐색  (0) 2019.02.12
Comments