val()

val()

val() 메서드는 요소의 속성 값을 가져오거나 변경합니다.

---

val()

val() 메서드는 요소의 속성 값을 가져오거나 변경합니다.

특징	설명
버전(version)	1.x
결과값(return)	문자열(string) or 숫자(number) or 배열(array)
사용성	★★★★☆

문법(Syntax)

"선택자".val()
"선택자".val("속성")
"선택자".val("함수")

//select 메뉴의 속성 값을 가져오는 경우
$("select option:checked").val();

//input의 속성 값을 가져오는 경우
$("input[type=checkbox]:checked").val();

//콜백함수를 사용하는 경우
$("input[type=checkbox]").val(function(){});

• 선택자(selector) : 클래스 이름을 추가할 선택자를 설정합니다.
• 속성 이름(attribute name) : 속성 이름을 설정합니다.
• 함수(function) : 속성 값을 가져온 후 실행되는 함수를 설정합니다.

정의(Definition)

• val() 메서드는 요소의 속성 값을 가져오거나 변경합니다.

속성 관련된 메서드(Attribute Related method)

• attr() 메서드는 요소의 속성(attribute) 값을 가져오거나 변경합니다.
• removeAttr() 메서드는 요소의 속성 값을 삭제합니다.
• prop() 메서드는 요소의 속성(property) 값을 가져오거나 변경합니다.
• removeProp() 메서드는 요소의 속성 값을 삭제합니다.
• val() 메서드는 속성(value) 값을 가져오거나 변경합니다.

비교(Compare)

• jQuery에서 속성 값을 가져오거나 변경할 때에는 attr()를 사용합니다.
• Javascript에서 속성 값을 가져올 때에는 getAttribute()를 사용합니다.
• Javascript에서 속성 값을 변경할 때에는 setAttribute()를 사용합니다.

예제1(Sample)

버튼을 클릭하면 이미지에 속성 값을 가져오는 예제입니다.

선택하기1 선택하기2 선택하기3 선택하기4

여기에 표시됩니다.

선택 메뉴를 선택하면 속성 값이 표시됩니다.

HTML

CSS

SCRIPT

<select name="select1" id="select1">
    <option value="select1">선택하기1</option>
    <option value="select2">선택하기2</option>
    <option value="select3">선택하기3</option>
    <option value="select4">선택하기4</option>
</select>

.jsample img {
    border-radius: 3px;
    max-width: 300px
}
.jsample .text {
    margin-top: 10px;
}

$(".jsample select").change(function(){
    $("#sample1 .text").text("속성 값은 : " + $("#select1").val() + "입니다.");
});

예제2(Sample)

버튼을 클릭하면 input의 글씨가 변경되는 예제입니다.

INPUT :

리셋 버튼을 클릭하면 input에 글씨가 변경됩니다.

HTML

CSS

SCRIPT

INPUT : <input type="text" value="클릭하면 글씨가 변경됩니다." class="text">

#sample2 input {
    border: 1px solid #ccc;
    padding: 10px;
    min-width: 350px;
    color: #666;
}

("#sample2 .btn0").click(function() {
    $("#sample2 .text").val("클릭하면 글씨가 변경됩니다.");
});
$("#sample2 .btn1").click(function() {
    $("#sample2 .text").val($(this).text());
});

예제3(Sample)

이메일을 선택하면 자동으로 설정되는 예제입니다.

이메일 아이디

@

이메일 주소

메일 선택 :: 이메일주소 직접입력 :: naver.com nate.com gmail.com yahoo.com hanmail.net

이메일을 선택하면 글씨가 자동으로 변경됩니다.

HTML

CSS

SCRIPT

<div class="form">
    <div>
        <label for="email1">이메일 아이디</label>
        <input type="text" id="email1" name="email1">
    </div>
    @
    <div>
        <label for="email2" class="ir_su">이메일 주소</label>
        <input type="text" id="email2" name="email2">
    </div>
    <div>
        <label for="email3" class="ir_su">메일 선택</label>
        <select id="email3" name="email3" title="이메일 주소 선택">
            <option value=""> :: 이메일주소 직접입력 :: </option>
            <option value="naver.com">naver.com</option>
            <option value="nate.com">nate.com</option>
            <option value="gmail.com">gmail.com</option>
            <option value="yahoo.com">yahoo.com</option>
            <option value="hanmail.net">hanmail.net</option>
        </select>
    </div>
</div>

.form {
    display: flex;
    align-items: center;
}
.form label {
    overflow: hidden; 
    position: absolute; 
    width: 0; 
    height: 0; 
    line-height: 0; 
    text-indent: -9999px;
}
.form input {
    border: 1px solid #ccc;
    padding: 5px 15px;
    vertical-align: 2px;
    margin: 0 5px;
}
.form select {
    border: 1px solid #ccc;
    padding: 7px;
    min-width: 250px;
}

$("#email3").change(function(){
    $("#email2").val($("#email3").val());
});

예제4(Sample)

메뉴를 선택하면 해당 주소로 이동하는 예제입니다.

튜토리얼 사이트 폰트 사이트 웹지엘 사이트 애니메이션 사이트

메뉴를 선택하면 해당 사이트로 이동합니다.

HTML

CSS

SCRIPT

<select id="address">
    <option value="https://wtss.tistory.com/">튜토리얼 사이트</option>
    <option value="https://wess.tistory.com/">폰트 사이트</option>
    <option value="https://wiss.tistory.com/">웹지엘 사이트</option>
    <option value="https://wsss.tistory.com/">애니메이션 사이트</option>
</select>

/* CSS none */

$("#address").change(function(){
    var url = $(this).val();
    if(url) location.href= url;
});

예제5(Sample)

폰트를 선택하면 해당 폰트로 변경되는 예제입니다.

넥슨고딕 나눔스퀘어 티머니 둥근바람 헬스셋 복조리체 빈폴

메뉴를 선택하면 폰트가 변경됩니다.
웹 폰트가 연동되어 있으면 작동합니다.
<link href="https://webfontworld.github.io/NanumSquare/NanumSquare.css" rel="stylesheet">
<link href="https://webfontworld.github.io/tmoney/TmoneyRoundWind.css" rel="stylesheet">
<link href="https://webfontworld.github.io/Healthset/HealthsetLuckybag.css" rel="stylesheet">
<link href="https://webfontworld.github.io/ssf/BeanPole.css" rel="stylesheet">

HTML

CSS

SCRIPT

<select id="font">
    <option value="'NexonLv1Gothic'">넥슨고딕</option>
    <option value="'NanumSquare'">나눔스퀘어</option>
    <option value="'TmoneyRoundWind'">티머니 둥근바람</option>
    <option value="'HealthsetLuckybag'">헬스셋 복조리체</option>
    <option value="'BeanPole'">빈폴</option>
</select>

/* CSS none */

$("#font").change(function(){
    $("#explanation").css("font-family", $(this).val());
});

호환성(Compatibility)

							6	7	8	9	10	11
val()	jQeury 1.x 버전	○	○	○	○	○	○	○	○	○	○	○	○	○	○
	jQeury 2.x 버전	○	○	○	○	○	❌	❌	❌	○	○	○	○	○	○
	jQeury 3.x 버전	○	○	○	○	○	❌	❌	❌	○	○	○	○	○	○

참고 사이트(Reference)

• jquery

---