Jquery a태그 value - jquery ataegeu value

Question

wrkbrs

jQuery

[jQuery] Value() 값 가져오기, 설정하기 & 태그의 속성 선택

zcarc 2019. 1. 10. 14:12

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>폼 요소의 값 가져오기 및 설정</title>
    <script src="jquery-1.3.2-vsdoc2.js" type="text/javascript "></script>
    <script type="text/javascript ">
        $(document).ready(function () {
            //val을 이용한 초기설정 잡기(좋다!)
            $('#txtName').val("하이하이");
            $('input:radio:').val(['F']);
            $('#lstFavorites').val(['0','2']);
            $('#btnOK').click(function () {
                var msg = "";
                //1 타겟 폼요소의 value속성을 가져온다. <>에러
                msg += $('#txtName').val() + '\n';
                //2 라디오버튼중 이름이 Gender이고 체크된 타겟의 value속성을 가져온다. <> undefined
                msg += $('input:radio[name=Gender]:checked').val() + '\n';
                //3 리스트박스에서 여러개 값 가져오기
                msg += $('#lstFavorites').val().join(" | ") + '\n';

                //
                alert(msg);
            });
        });
    </script>

</head>
<body>
    텍스트박스 : <input type="text" id="txtName" /><br />
    라디오버튼 :
        <input type="radio" id="optGender1" name="Gender" value="M" />남
        <input type="radio" id="optGender2" name="Gender" value="F" />여<br />
    드롭다운리스트 :
        <select id="lstFavorites" multiple="multiple" size="3">
            <option value="0">JavaS-ript </option>
            <option value="1">jQuery</option>
            <option value="2">JavaS-ript </option>
        </select><br />
    <input type="submit" value="확인" id="btnOK" />
</body>
</html>

출처 : http://egloos.zum.com/xxwony/v/82540

H1, a, div, input(text, radio, checkbox), select, datalist(예시코드 참조) 등 각 태그에 따라 값을 불러오는 방식이 다르다.

각 태그별로 값을 가져오는 방법을 정리했다.

(선택한 요소 값 가져오는 방법)

'-' : 선택자

H1, a 태그 값 가져오기 (H1, 2, 3 ... 등) : $('-').text();

div 값 가져오기 : $('-').text()
input(text) 값 가져오기 : $('-').val()
input(radio) 값 가져오기 : $('-').prop("checked")
input(checkbox) 값 가져오기 : $('-').prop("checked")
select 값 가져오기 : $('- option:selected').val()
input(datalist) 값 가져오기 : $('#textDatalist').val()

test.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
    <input type="button" name="" id="testBtn" value="CHECK">

    <!-- $('#textH1').text(); -->
    <h2 id="textH1">1</h2>
    <!-- $('#textA').text(); -->
    <a href="" id="textA">1</a>

    <!-- $('#textDiv').text()); -->
    <div id="textDiv">
        Div 테스트
    </div>

    <!-- $('#testText').val()); -->
    <input type="text" name="" id="testText">

    <!-- $('#textRadio').prop("checked")); -->
    <input type="radio" value="Y" name="" id="textRadio">

    <!-- $('#textCheckbox').prop("checked")); -->
    <input type="checkbox" value="X" name="" id="textCheckbox">

    <!-- $('#textSelect option:selected').val()); -->
    <select name="" id="textSelect">
        <option value="1" id="">one</option>
    </select>

    <!-- $('#textDatalist').val()); -->
    <input list="datalistTest" id="textDatalist" name="" />
    <datalist id="datalistTest">
        <option value="1">
        <option value="2">
        <option value="3">
    </datalist>


</body>
<script src="./test.js"></script>
</html>

test.js

$(document).on('click', '#testBtn', function() {
    console.log("textH1 : ", $('#textH1').text());
    console.log("textA : ", $('#textA').text());    
    console.log("textDiv : ", $('#textDiv').text());
    console.log("testText : ", $('#testText').val());
    console.log("textRadio : ", $('#textRadio').prop("checked"));
    console.log("textCheckbox : ", $('#textCheckbox').prop("checked"));
    console.log("textSelect : ", $('#textSelect option:selected').val());
    console.log("textDatalist : ", $('#textDatalist').val());
});

추가로...

https://seokbong.tistory.com/9

jQuery 다운로드 및 사용 방법

성격 급한 사람들을 위한 CDN ( Contents Delivary Network ) 방식 사용 방법. 헤더에 하단 스크립트를 추가하면 사용 가능하다. 연습용으로 코드를 작성하다 보니 Jquery가 필요하였다. 항상 패키지 매니저

seokbong.tistory.com

https://seokbong.tistory.com/8

jQuery 선택자(태그) 접근 방법 1 (HTML DOM 접근 방법)

Javascript의 Jquery를 이용하여 HTML 태그 ID, Class 접근 방법을 알아보자. 샘플 HTML <!DOCTYPE html> 고객 Jquery id 값을 통해 태그를 접근하는 예시 id가 "userName"인 태그(a 태그)에 접근하여 내용을 "석..

seokbong.tistory.com

a태그 값 넣기