[jQuery] 제이쿼리 5일차 요점정리

-입력 요소 제어-

[1] 값 설정하기

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

[2] 값 읽어오기

# text, select(드롭다운)

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

                                                                                                                            

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

<select name = 'foo'>

    <option value = ''>---선택하세요---</option>

    <option value = 'bar'>item1</option>

</select>

# 라디오 버튼의 경우

1. 셀렉터가 여러 개를 의미하는 경우이므로 그 중에서 선택된 항목만 지정하는 셀렉터를 사용해야 한다.
2. 라디오는 하나만 선택 가능하므로 가져온 결과 자체는 단일 값이다.

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

# 체크 박스의 경우

1. checked 가상 클래스를 통해 가져온 대상이 배열 상태가 되므로 이를 반복문으로 처리해야 한다.
2. 배열의 요소는 선택된 체크박스들에 대한 HTML태그가 된다.
3. 그러므로 각 HTML 태그를 다시 jQuery 객체로 변환하여 사용해야 한다.

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

for(var i=0; i<input.length; i++) {

    //배열에 포함된 원소(HTML태그)를 jQuery객체로 변환

    var tmp = $(input[i]);

    ...

}

[3] 포커스 강제 지정

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

[4] $.each() 함수

• 배열을 탐색하는 jQuery 기능.

var data = ['hello', 'world'];

//배열을 탐색하면서 원소의 수 만큼 콜백함수가 호출된다.

$.each(data, function(index, item) {

    //index는 순차적으로 0, 1

    //item은 순차적으로 'hello', 'world'가 적용

    

});

• 배열의 원소가 HTML 객체인 경우.

var data = ['<input type="checkbox"/>', '<input type="checkbox"/>'];

$.each(data, function(index, item) {

    // $(item) 형태로 객체를 생성하여 처리 가능.

    var value = $(item).val();

    $("#result").append("<div>"+value+"</div>");

});

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

$(function() {

    var data = { name: 'hello', userid: 'world', age: 20 };

    

    $.each(data, function(index, item) {

            console.log(index+ ">>" +item);

});

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

• 포커스가 들어온 경우

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

    ...

});

• 포커스가 빠져나간 경우

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

    ...

});

• 상태가 변경된 경우

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

    ...

});

#change 이벤트 특성

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

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

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

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

• 드롭다운의 경우

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

[6] 프로퍼티 설정

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

# 프로퍼티의 적용 여부 조회

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

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

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

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

//속성이 적용되어 있으므로 true

var ok = $(".foo").prop('disabled');

# 프로퍼티의 설정 / 해제

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

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

# 정규표현식

• 문자열의 형식을 검사하기 위한 정형화된 식
• 모든 프로그래밍 언어에서 공통적으로 사용한다.

var regex = / 정규표현식 /;

if( !regex.test("검사할 문자열")) {

    // ... 정규표현식에 부합하지 않을 경우의 처리...

}

숫자 모양에 대한 형식 검사

/^[0-9]*$/

영문으로만 구성되었는지에 대한 형식 검사

/^[a-zA-Z]*$/

  

한글로만 구성되었는지에 대한 형식 검사

/^[ㄱ-ㅎ가-힣]*$/

  

영문과 숫자로만 구성되었는지에 대한 형식 검사

/^[a-zA-Z0-9]*$/

  

한글과 숫자로만 구성되었는지에 대한 형식 검사

/^[ㄱ-ㅎ가-힣0-9]*$/

  

이메일 형식인지에 대한 검사. 아이디@도메인의 형식을 충족해야 한다.

/^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i

  

'-'없이 핸드폰번호인지에 대한 형식검사.

/^01(?:0|1|[6-9])(?:\d{3}|\d{4})\d{4}$/

  

'-'없이 전화번호인지에 대한 형식검사. 각 부분에 대한 자리수도 충족시켜야 한다.

/^\d{2,3}\d{3,4}\d{4}$/

  

'-'없이 주민번호에 대한 글자수 및 뒷자리 첫글자가 1~4의 범위에 있는지에 대한 검사

/^\d{6}[1-4]\d{6}/