jQuery(4)

9mond·2023년 8월 16일

1. 입력 요소 값 가져오기

1-1. val()함수의 사용

입력값 설정하기
파라미터를 통해 입력값을 설정한다.

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

입력값 조회하기
파라미터 없이 함수를 호출하면 현재 설정되어 있는 입력값(value 속성의 값)을 리턴 받는다.

	let value = $("셀렉터").val();

조회한 입력값의 존재 여부를 if문으로 검사하면 입력여부를 알 수 있다.

	if( !value ) {...}

focus() 함수의 사용
입력 요소에 포커스를 강제로 설정한다.

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

입력값 검사 패턴

	let value = $("셀렉터").val();

	if( !value ) {
		alert("메세지");
		$("셀렉터").focus();
		return false;
	}

ex) 폼에서의 데이터 전송 이벤트

<body>
    <form id="myform">
        <div>
            <label>
                사용자이름 :
                <input type="text" name="username" id="username"/>
            </label>
        </div>
        <div>
            <label>
                비밀번호 :
                <input type="password" name="userpass" id="userpass"/>
            </label>
        </div>
        <button type="submit">입력값 확인</button>
        <hr/>
        <!-- 입력 결과값 확인 div -->
        <div id="result"></div>
    </form>    
    <script>
        // 폼에서의 데이터 전송 이벤트
        $("#myform").submit(function(e){
            //  username 값 유무, 값이 없다면 "이름을 입력하세요", alert
            //  userpass 값 유무, 값이 없다면 "비밀번호를 입력하세요", alert
            //  div 태그 안에 append 사용, 이름, 비밀번호 출력

            // submit의 refesh기능을 없애줌
            e.preventDefault();

            let username = $("#username").val();
            let userpass = $("#userpass").val();

            if( !username ){
                alert("이름을 입력하세요");
                $("#username").focus();
                return false;
            }
            
            if( !userpass ){
                alert("비밀번호를 입력하세요");
                $("#userpass").focus();
                return false;
            }

            // 입력값 화면에 표기
            $("#result").append("<div>이름 : " + username + "</div>");
            $("#result").append("<div>비밀번호 : " + userpass + "</div>");

            // 백엔드 페이지 전송
            $(this).submit();
        });
        
    </script>
</body>

1-2. 드롭다운의 입력값

만약 <option> 요소에 value 속성이 없을 경우 태그 안의 내용을 가져오기 때문에 값이 필요없는 항목이더라도 반드시 공백을 지정해야 한다.
드롭다운 역시 val() 함수를 사용하여 선택한 <option>요소의 값을 가져온다.

	let value = #("#foo").val();

선택 위치 조회

	$("#foo > option:selected").index();

ex) 결과 확인 div

<body>
    <form id="myform">
        <div>
            <label>
                과목 :
                <select name="subject" id="subject">
                    <option value="">---선택해주세요---</option>
                    <option value="html">HTML</option>
                    <option value="CSS">CSS</option>
                    <option value="javascript">JavaScript</option>
                </select>
            </label>
            <button type="submit">입력값 확인</button>
            <hr/>
            <!-- 결과 확인 div -->
            <div id="result"></div>
        </div>
    </form>
    <script>
        $("#myform").submit(function(e){

            e.preventDefault();
            
            let subject = $("#subject").val();

            if(!subject){
                alert("과목을 선택하세요.");
                $("#subject").focus();
                return false;
            }
            
            let subject_index = $("#subject > option:selected").index();

            $("#result").append("<div>과목 : " + subject + "</div>");
            $("#result").append("<div>선택한 과목의 인덱스 : " + subject_index + "</div>");
        });
    </script>
</body>

1-3. radio의 선택항목

여러 개의 항목 중에서 선택된 항목을 의미하는 가상 셀렉터
":checked" 를 사용하여 선택된 요소에 접근
라디오 버튼은 여러 개의 항목 중에서 단 하나만 선택할 수 있으므로 ":checked" 가상 클래스를 사용하여 접근하는 요소 역시 단일 요소가 된다.

ex)

<body>
    <form id="myform">
        <label>
            <input type="radio" name="subject" value="html"/>HTML
            <input type="radio" name="subject" value="css"/>CSS
            <input type="radio" name="subject" value="javascript"/>JavaScript
        </label>
        <button type="submit">입력값 확인</button>
    </form>
    <script>       
        $("#myform").submit(function(e){

        e.preventDefault();

        let subject = $("input[name='subject']:checked").val();

        if(!subject){
            alert("선택된 항목이 없습니다.");
            $("#subject").focus();
            return false;
        }
        
        alert("선택한 항목은 " + subject + "입니다.");
        
        });
    </script>
</body>

1-4. checkbox 선택항목

체크박스는 여러 개의 항목들 중에서 복수 선택이 가능한 요소
사용자가 선택한 항목에 대한 접근 가상 셀렉터 ":checked"를 사용해야한다.

	let el = $("셀렉터:checked");

체크박스는 복수 선택이 가능하기 때문에 접근 요소는 배열 상태
가져온 요소가 유사배열 형태이기 때문에 반복문으로 처리

	for( let i=0; i<el.length; i++ ){
		let value = $(el[i]).val();
	}

ex) 선택된 항목을 가지고 온다.

<body>
    <form id="myform">
        <label>
            <input type="checkbox" class="hobby" value="soccor"/>축구
        </label>
        <label>
            <input type="checkbox" class="hobby" value="basketball"/>농구
        </label>
        <label>
            <input type="checkbox" class="hobby" value="baseball"/>야구
        </label>
        <button type="submit">입력값 확인</button>
        <hr/>
        <div id="result"></div>
    </form>
    <script>
        $("#myform").submit(function(e){
            e.preventDefault();

            // 선택된 항목을 가지고 온다.
            let check_list = $(".hobby:checked");

            if(check_list.length == 0){
                alert("선택된 항목이 없습니다.");
                return false;
            }

            for(let i=0; i<check_list.length; i++){
                let value = $(check_list[i]).val();
                $("#result").append("<div>취미 : " + value + "</div>");
            }
        });
    </script>
</body>

2. $.each() 함수

HTML요소를 원소로 갖는 배열에 대한 반복처리를 수행하는 경우 배열의 각 원소에 대한 index값을 사용하여 원소에 접근해야 한다.

	for( let i=0; i<el.length; i++ ){
		let value = $(el[i]).val();
	}

$.each() 함수는 HTML요소의 수 만큼 콜백함수를 호출하면서 배열의 인덱스와 원소를 파라미터로 전달한다.

	$.each(el, function(index, item){
		// index : 배열의 위치
		// item   : 배열의 각 원소
		let value = $(item).val();
	});

ex)

<body>
    <form id="myform">
        <label>
            <input type="checkbox" class="hobby" value="soccor"/>축구
        </label>
        <label>
            <input type="checkbox" class="hobby" value="basketball"/>농구
        </label>
        <label>
            <input type="checkbox" class="hobby" value="baseball"/>야구
        </label>
        <button type="submit">입력값 확인</button>
        <hr/>
        <div id="result"></div>
    </form>
    <script>
        $("#myform").submit(function(e){
            e.preventDefault();

            // 선택된 항목을 가지고 온다.
            let check_list = $(".hobby:checked");

            if(check_list.length==0){
                alert("선택된 항목이 없습니다.");
                return false;
            }

            // each
            $.each(check_list, function(index, item){
                let value = $(item).val();
                $("#result").append("<div>" + value + "</div>");    
            });

        });
    </script>
</body>

3. 포커스 관련 이벤트 처리

요소에 포커스가 들어갔음을 감지하는 이벤트
focus()는 함수로서 사용할 경우 강제로 포커스를 지정하는 기능은 갖지만, 이벤트로서 사용할 경우 포커스가 들어갔음을 감지하는 기능

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

blur() 함수는 포커스가 빠져나왔음을 감지한다.
포커스가 빠져 나왔음을 감지하는 이벤트

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

ex)

<body>
    <form id="myform">
        <h3>주민번호를 입력하세요</h3>
        <input type="text" name="jumin1" id="jumin1"/>
        -
        <input type="password" name="jumin2" id="jumin2"/>
    </form>
    <script>
        $("#jumin1, #jumin2").focus(function(){
            $(this).css('background-color', 'powderblue');
        });

        $("#jumin1, #jumin2").blur(function(){
            $(this).css('background-color', 'white');
        });

        // 키 이벤트 설정
        // keyup
        $("#jumin1").keyup(function(){
            let value = $(this).val();
            if(value.length >= 6){
                let input = value.substring(0,6);   // 6자리만 남겨놓고 자른다.
                $(this).val(input);
                $("#jumin2").focus();
            }
        });
    </script>
</body>

4. 프로퍼티를 제어하는 prop() 함수

src, width, ... -> 값을 갖는 속성 : attr(key, value)
값을 갖지 않는 속성 -> prop
별도의 값 없이 이름만 명시하는 속성

$("셀렉터").prop("disabled", true);
-> HTML 태그에서 disabled 속성을 부여하면 해당 요소가 비활성화 처리된다.


$("셀렉터").prop("checked", true);
-> input 태그에서 checked 속성이 부여되면 선택상태가 되므로
   jQuery에서는 true값을 부여해야 체크가 된다.

ex1) disabled

<body>
    <label>
        입력하기
        <input type="checkbox" id="input_enable"/>
    </label>
    <input type="text" name="input" id="input" disabled/>
    <script>
        $("#input_enable").change(function(){
            let now = $("#input").prop("disabled");  // true / false
            $("#input").prop("disabled",!now);

            // 입력 가능한 상태라면
            if($("#input").prop("disabled")==false){
                $("#input").focus();
            }
        });
    </script>
</body>

ex2) checkall

<body>
    <label>전체선택
        <input type="checkbox" id="all_check"/>
    </label> 
    <hr/> 
    <label>
        <input type="checkbox" class="hobby" value="soccor"/>축구
    </label>
    <label>
        <input type="checkbox" class="hobby" value="basketball"/>농구
    </label>  
    <label>
        <input type="checkbox" class="hobby" value="baseball"/>야구
    </label>    
    <script>
        $("#all_check").change(function(){
            $(".hobby").prop('checked', $(this).prop('checked'));
        });
    </script>
</body>

9mond

개발자

이전 포스트

jQuery(3)

다음 포스트

jQuery(4)

1. 입력 요소 값 가져오기

1-1. val()함수의 사용

1-2. 드롭다운의 입력값

1-3. radio의 선택항목

1-4. checkbox 선택항목

2. $.each() 함수

3. 포커스 관련 이벤트 처리

4. 프로퍼티를 제어하는 prop() 함수

jQuery(3)

웹 서버

0개의 댓글