티스토리 뷰

(기초)그래서 뭘 배운거야?/jQuery

JQ-15-객체조작메서드(val / prop)

Soheny.P 2021. 10. 13. 22:49
728x90
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="/JS/jquery-3.6.0.min.js"></script>
    <style>

    </style>
</head>

<body>
    <h1>객체 조작 및 생성</h1>
    <form action="#" id="form_1">
        <p><label for="user_name">이름</label><input type="text" name="user_name" id="user_name" value="가나다"></p>
        <p><label for="user_id">아이디</label><input type="text" name="user_id" id="user_id" value="라마바"></p>
    </form>

    <script>
        $(function () {
            // input value값 반환
            let result_1 = $("#user_name").val();
            console.log(result_1); //가나다

            // input value값 변경
            // val() : 지정 요소의 value 반환 및 변경
            $("#user_id").val("아닌데");

            // input valeu 변경 전, 설정된 value값 추출하기
            // prop() : $()에서 선택된 요소 내의 태그 속성을 반환
            let result_2 = $("#user_id").prop("defaultValue");
            console.log(result_2);

        });
    </script>
</body>

</html>

 

 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="/JS/jquery-3.6.0.min.js"></script>
    <style>

    </style>
</head>

<body>
    <!-- 
            * prop()
                : 선택된 요소 내에서 prop()괄호 안 지정된 태그 속성을 추출, 변경할 수 있는 메서드

     -->
    <h1><strong>객체 조작 및 생성</strong></h1>
    <form action="#" id="form_1">
        <p>
            <input type="checkbox" name="chk1" id="chk1"><label for="chk1">체크1</label>
            <input type="checkbox" name="chk2" id="chk2" checked><label for="chk2">체크2</label>
            <input type="checkbox" name="chk3" id="chk3"><label for="chk3">체크3</label>
        </p>
    </form>

    <p>
        <select name="se_1" id="se_1">
            <option value="opt1">option1</option>
            <option value="opt2">option2</option>
            <option value="opt3" selected>option3</option>
        </select>
    </p>
    <script>
            $(function(){
                // #chk1이 체크된 요소인지 확인
                let result1 = $("#chk1").prop("checked");
                console.log(result1); //F

                // #chk2이 체크된 요소인지 확인
                let result2 = $("#chk2").prop("checked");
                console.log(result2); //T

                // #chk3에 체크표시하기
                $("#chk3").prop("checked", true);

                // selected된 옵션 인덱스번호 출력하기
                let result3 = $("#se_1").prop("selectedIndex");
                console.log(result3); //2
                
            });
    </script>
</body>

</html>

728x90
저작자표시 비영리 변경금지 (새창열림)

'(기초)그래서 뭘 배운거야? > jQuery' 카테고리의 다른 글

JQ-16-객체조작메서드(width / height)  (0) 2021.10.14
JQ-14-객체조작메서드(class / text)  (0) 2021.10.13
JQ-13-객체조작메서드(attribute)  (0) 2021.10.13
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2025/05   »
일 월 화 수 목 금 토
1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 31
글 보관함