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)
버튼을 클릭하면 이미지에 속성 값을 가져오는 예제입니다.
여기에 표시됩니다.
선택 메뉴를 선택하면 속성 값이 표시됩니다.
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 :
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)
이메일을 선택하면 자동으로 설정되는 예제입니다.
이메일을 선택하면 글씨가 자동으로 변경됩니다.
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">
웹 폰트가 연동되어 있으면 작동합니다.
<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 버전 | ○ | ○ | ○ | ○ | ○ | ❌ | ❌ | ❌ | ○ | ○ | ○ | ○ | ○ | ○ |