| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 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 |
Tags
- dock
- 선택적조인
- MySQL
- Android
- GPS
- iBATIS
- Google Map
- 가우스
- PHP
- swingx
- rowspan
- sencha touch
- tomcat
- phonegap
- appspresso
- node.js
- WebLogic
- jQuery
- jsr 296
- JDOM
- Eclipse
- ibsheet
- PLSQL
- Spring
- 전자정부프레임워크
- oracle
- JSON
- MFC
- Ajax
- Struts
Archives
- Today
- Total
Where The Streets Have No Name
jQuery 기본 예제 모음(3) : Attributes 본문
출처 : http://apmusers.com/tt/dbckdghk/59
<Attributes>
1. attr( name ) Returns: Object
속성 실행후 객체 반환
Access a property on the first matched element. This method makes it easy to retrieve a property value from the first matched element. If the element does not have an attribute with such a name, undefined is returned.
주어진 속성명의 값을 가져옴, 매치되는 첫번째 것만 가져옴
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
var title = $("em").attr("title");
$("div").text(title);
});
</script>
<style>
em { color:blue; font-weight;bold; }
div { color:red; }
</style>
</head>
<body>
<p>
Once there was a <em title="huge, gigantic">large</em> dinosaur...
</p>
The title of the emphasis is:<div></div>
</body>
</html>
2. attr( properties ) Returns: jQuery
attr(속성배열) 실행후 jQuery객체를 반환
Set a key/value object as properties to all matched elements.
속성과 값들의 배열을 지정하여 적용
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
$("img").attr({
src: "/images/hat.gif",
title: "jQuery",
alt: "jQuery Logo"
});
$("div").text($("img").attr("alt"));
});
</script>
<style>
img { padding:10px; }
div { color:red; font-size:24px; }
</style>
</head>
<body>
<img />
<img />
<img />
<div></div>
</body>
</html>
3. attr( key, value ) Returns: jQuery
attr( 속성, 값 ) 실행후 jQuery객체를 반환
Set a single property to a value, on all matched elements.
하나의 속성과 하나의 값만 지정하여 적용
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
$("button:gt(0)").attr("disabled","disabled");
});
</script>
<style>
button { margin:10px; }
</style>
</head>
<body>
<button>0th Button</button>
<button>1st Button</button>
<button>2nd Button</button>
</body>
</html>
4. attr( key, fn ) Returns: jQuery
attr(속성, 콜백함수) 실행후 jQuery 객체를 반환
Set a single property to a computed value, on all matched elements.
하나의 속성과 콜백함수를 지정하여 적용
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
$("img").attr("src", function() {
return "/images/" + this.title;
});
});
</script>
</head>
<body>
<img title="hat.gif"/>
<img title="hat-old.gif"/>
<img title="hat2-old.gif"/>
</body>
</html>
5. removeAttr( name ) Returns: jQuery
속성 제거 실행후 jQuery 객체를 반환
Remove an attribute from each of the matched elements.
주어진 이름과 매치되는 속성을 제거
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
$("button").click(function () {
$(this).next().removeAttr("disabled")
.focus()
.val("editable now");
});
});
</script>
</head>
<body>
<button>Enable</button>
<input type="text" disabled="disabled" value="can't edit this" />
</body>
</html>
6. addClass( class ) Returns: jQuery
클래스 추가 실행후 jQuery 객체 반환
Adds the specified class(es) to each of the set of matched elements.
주어진 클래스 적용
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
$("p:last").addClass("selected");
});
</script>
<style>
p { margin: 8px; font-size:16px; }
.selected { color:red; }
.highlight { background:yellow; }
</style>
</head>
<body>
<p>Hello</p>
<p>and</p>
<p>Goodbye</p>
</body>
</html>
7. removeClass( class ) Returns: jQuery
클래스 제거 실행후 JQuery 객체를 리턴
Removes all or the specified class(es) from the set of matched elements.
주어진 클래스 제거
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
$("p:even").removeClass("blue");
});
</script>
<style>
p { margin: 4px; font-size:16px; font-weight:bolder; }
.blue { color:blue; }
.under { text-decoration:underline; }
.highlight { background:yellow; }
</style>
</head>
<body>
<p class="blue under">Hello</p>
<p class="blue under highlight">and</p>
<p class="blue under">then</p>
<p class="blue under">Goodbye</p>
</body>
</html>
8. toggleClass( class ) Returns: jQuery
클래스 추가 삭제 반복 실행후 jQuery 객체 리턴
Adds the specified class if it is not present, removes the specified class if it is present.
주어진 클래스를 추가 삭제를 반복한다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
$("p").click(function () {
$(this).toggleClass("highlight");
});
});
</script>
<style>
p { margin: 4px; font-size:16px; font-weight:bolder;
cursor:pointer; }
.blue { color:blue; }
.highlight { background:yellow; }
</style>
</head>
<body>
<p class="blue">Click to toggle</p>
<p class="blue highlight">highlight</p>
<p class="blue">on these</p>
<p class="blue">paragraphs</p>
</body>
</html>
9. html( ) Returns: String
실행후 문자열을 반환
Get the html contents (innerHTML) of the first matched element. This property is not available on XML documents (although it will work for XHTML documents).
선택되어진 객체의 html을 반환한다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
$("p").click(function () {
var htmlStr = $(this).html();
$(this).text(htmlStr);
});
});
</script>
<style>
p { margin:8px; font-size:20px; color:blue;
cursor:pointer; }
b { text-decoration:underline; }
button { cursor:pointer; }
</style>
</head>
<body>
<p>
<b>Click</b> to change the <span id="tag">html</span>
</p>
<p>
to a <span id="text">text</span> node.
</p>
<p>
This <button name="nada">button</button> does nothing.
</p>
</body>
</html>
10. html( val ) Returns: jQuery
실행후 jQuery 객체를 반환
Set the html contents of every matched element. This property is not available on XML documents (although it will work for XHTML documents).
매치되는 모든 원소에 주어진 html을 넣는다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
$("div").html("<span class='red'>Hello <b>Again</b></span>");
});
</script>
<style>
.red { color:red; }
</style>
</head>
<body>
<span>Hello</span>
<div></div>
<div></div>
<div></div>
</body>
</html>
11. text( ) Returns: String
실행후 문자열 반환
Get the text contents of all matched elements.
선택되어진 객체의 문자열을 반환한다. 태그는 제외된다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
var str = $("p:first").text();
$("p:last").html(str);
});
</script>
<style>
p { color:blue; margin:8px; }
b { color:red; }
</style>
</head>
<body>
<p><b>Test</b> Paragraph.</p>
<p></p>
</body>
</html>
12. text( val ) Returns: jQuery
실행후 jQuery 객체 반환
Set the text contents of all matched elements.
매치되는 모든 원소에 주어진 텍스트를 집어넣는다. html을 넣는다 해도 텍스트화 된다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
$("p").text("<b>Some</b> new text.");
});
</script>
<style>
p { color:blue; margin:8px; }
</style>
</head>
<body>
<p>Test Paragraph.</p>
</body>
</html>
13. val( ) Returns: String, Array
실행후 문자열이나 배열로 반환
Get the content of the value attribute of the first matched element.
첫번째 매치되는 원소의 값을 반환한다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
function displayVals() {
var singleValues = $("#single").val();
var multipleValues = $("#multiple").val() || [];
$("p").html("<b>Single:</b> " +
singleValues +
" <b>Multiple:</b> " +
multipleValues.join(", "));
}
$("select").change(displayVals);
displayVals();
});
</script>
<style>
p { color:red; margin:4px; }
b { color:blue; }
</style>
</head>
<body>
<p></p>
<select id="single">
<option>Single</option>
<option>Single2</option>
</select>
<select id="multiple" multiple="multiple">
<option selected="selected">Multiple</option>
<option>Multiple2</option>
<option selected="selected">Multiple3</option>
</select>
</body>
</html>
14. val( val ) Returns: jQuery
jQuery 객체를 반환
Set the value attribute of every matched element.
매치되는 모든 원소에 주어진 값을 적용한다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
$("button").click(function () {
var text = $(this).text();
$("input").val(text);
});
});
</script>
<style>
button { margin:4px; cursor:pointer; }
input { margin:4px; color:blue; }
</style>
</head>
<body>
<div>
<button>Feed</button>
<button>the</button>
<button>Input</button>
</div>
<input type="text" value="click a button" />
</body>
</html>
15. val( val )
반환 없음
Checks, or selects, all the radio buttons, checkboxes, and select options that match the set of values.
체크 박스, 셀렉트 박스 레디오 버튼 셀렉트 옵션 등에 값을 적용
레디오나 체크박스 같은 경우는 값을 여러개 지정하여 할수 있다.
멀티플 같은 경우 배열로서 값을 지정할수 있다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
$("#single").val("Single2");
$("#multiple").val(["Multiple2", "Multiple3"]);
$("input").val(["check2", "radio1"]);
});
</script>
<style>
body { color:blue; }
</style>
</head>
<body>
<select id="single">
<option>Single</option>
<option>Single2</option>
</select>
<select id="multiple" multiple="multiple">
<option selected="selected">Multiple</option>
<option>Multiple2</option>
<option selected="selected">Multiple3</option>
</select><br/>
<input type="checkbox" value="check1"/> check1
<input type="checkbox" value="check2"/> check2
<input type="radio" name="r" value="radio1"/> radio1
<input type="radio" name="r" value="radio2"/> radio2
</body>
</html>
<Attributes>
1. attr( name ) Returns: Object
속성 실행후 객체 반환
Access a property on the first matched element. This method makes it easy to retrieve a property value from the first matched element. If the element does not have an attribute with such a name, undefined is returned.
주어진 속성명의 값을 가져옴, 매치되는 첫번째 것만 가져옴
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
var title = $("em").attr("title");
$("div").text(title);
});
</script>
<style>
em { color:blue; font-weight;bold; }
div { color:red; }
</style>
</head>
<body>
<p>
Once there was a <em title="huge, gigantic">large</em> dinosaur...
</p>
The title of the emphasis is:<div></div>
</body>
</html>
2. attr( properties ) Returns: jQuery
attr(속성배열) 실행후 jQuery객체를 반환
Set a key/value object as properties to all matched elements.
속성과 값들의 배열을 지정하여 적용
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
$("img").attr({
src: "/images/hat.gif",
title: "jQuery",
alt: "jQuery Logo"
});
$("div").text($("img").attr("alt"));
});
</script>
<style>
img { padding:10px; }
div { color:red; font-size:24px; }
</style>
</head>
<body>
<img />
<img />
<img />
<div></div>
</body>
</html>
3. attr( key, value ) Returns: jQuery
attr( 속성, 값 ) 실행후 jQuery객체를 반환
Set a single property to a value, on all matched elements.
하나의 속성과 하나의 값만 지정하여 적용
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
$("button:gt(0)").attr("disabled","disabled");
});
</script>
<style>
button { margin:10px; }
</style>
</head>
<body>
<button>0th Button</button>
<button>1st Button</button>
<button>2nd Button</button>
</body>
</html>
4. attr( key, fn ) Returns: jQuery
attr(속성, 콜백함수) 실행후 jQuery 객체를 반환
Set a single property to a computed value, on all matched elements.
하나의 속성과 콜백함수를 지정하여 적용
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
$("img").attr("src", function() {
return "/images/" + this.title;
});
});
</script>
</head>
<body>
<img title="hat.gif"/>
<img title="hat-old.gif"/>
<img title="hat2-old.gif"/>
</body>
</html>
5. removeAttr( name ) Returns: jQuery
속성 제거 실행후 jQuery 객체를 반환
Remove an attribute from each of the matched elements.
주어진 이름과 매치되는 속성을 제거
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
$("button").click(function () {
$(this).next().removeAttr("disabled")
.focus()
.val("editable now");
});
});
</script>
</head>
<body>
<button>Enable</button>
<input type="text" disabled="disabled" value="can't edit this" />
</body>
</html>
6. addClass( class ) Returns: jQuery
클래스 추가 실행후 jQuery 객체 반환
Adds the specified class(es) to each of the set of matched elements.
주어진 클래스 적용
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
$("p:last").addClass("selected");
});
</script>
<style>
p { margin: 8px; font-size:16px; }
.selected { color:red; }
.highlight { background:yellow; }
</style>
</head>
<body>
<p>Hello</p>
<p>and</p>
<p>Goodbye</p>
</body>
</html>
7. removeClass( class ) Returns: jQuery
클래스 제거 실행후 JQuery 객체를 리턴
Removes all or the specified class(es) from the set of matched elements.
주어진 클래스 제거
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
$("p:even").removeClass("blue");
});
</script>
<style>
p { margin: 4px; font-size:16px; font-weight:bolder; }
.blue { color:blue; }
.under { text-decoration:underline; }
.highlight { background:yellow; }
</style>
</head>
<body>
<p class="blue under">Hello</p>
<p class="blue under highlight">and</p>
<p class="blue under">then</p>
<p class="blue under">Goodbye</p>
</body>
</html>
8. toggleClass( class ) Returns: jQuery
클래스 추가 삭제 반복 실행후 jQuery 객체 리턴
Adds the specified class if it is not present, removes the specified class if it is present.
주어진 클래스를 추가 삭제를 반복한다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
$("p").click(function () {
$(this).toggleClass("highlight");
});
});
</script>
<style>
p { margin: 4px; font-size:16px; font-weight:bolder;
cursor:pointer; }
.blue { color:blue; }
.highlight { background:yellow; }
</style>
</head>
<body>
<p class="blue">Click to toggle</p>
<p class="blue highlight">highlight</p>
<p class="blue">on these</p>
<p class="blue">paragraphs</p>
</body>
</html>
9. html( ) Returns: String
실행후 문자열을 반환
Get the html contents (innerHTML) of the first matched element. This property is not available on XML documents (although it will work for XHTML documents).
선택되어진 객체의 html을 반환한다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
$("p").click(function () {
var htmlStr = $(this).html();
$(this).text(htmlStr);
});
});
</script>
<style>
p { margin:8px; font-size:20px; color:blue;
cursor:pointer; }
b { text-decoration:underline; }
button { cursor:pointer; }
</style>
</head>
<body>
<p>
<b>Click</b> to change the <span id="tag">html</span>
</p>
<p>
to a <span id="text">text</span> node.
</p>
<p>
This <button name="nada">button</button> does nothing.
</p>
</body>
</html>
10. html( val ) Returns: jQuery
실행후 jQuery 객체를 반환
Set the html contents of every matched element. This property is not available on XML documents (although it will work for XHTML documents).
매치되는 모든 원소에 주어진 html을 넣는다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
$("div").html("<span class='red'>Hello <b>Again</b></span>");
});
</script>
<style>
.red { color:red; }
</style>
</head>
<body>
<span>Hello</span>
<div></div>
<div></div>
<div></div>
</body>
</html>
11. text( ) Returns: String
실행후 문자열 반환
Get the text contents of all matched elements.
선택되어진 객체의 문자열을 반환한다. 태그는 제외된다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
var str = $("p:first").text();
$("p:last").html(str);
});
</script>
<style>
p { color:blue; margin:8px; }
b { color:red; }
</style>
</head>
<body>
<p><b>Test</b> Paragraph.</p>
<p></p>
</body>
</html>
12. text( val ) Returns: jQuery
실행후 jQuery 객체 반환
Set the text contents of all matched elements.
매치되는 모든 원소에 주어진 텍스트를 집어넣는다. html을 넣는다 해도 텍스트화 된다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
$("p").text("<b>Some</b> new text.");
});
</script>
<style>
p { color:blue; margin:8px; }
</style>
</head>
<body>
<p>Test Paragraph.</p>
</body>
</html>
13. val( ) Returns: String, Array
실행후 문자열이나 배열로 반환
Get the content of the value attribute of the first matched element.
첫번째 매치되는 원소의 값을 반환한다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
function displayVals() {
var singleValues = $("#single").val();
var multipleValues = $("#multiple").val() || [];
$("p").html("<b>Single:</b> " +
singleValues +
" <b>Multiple:</b> " +
multipleValues.join(", "));
}
$("select").change(displayVals);
displayVals();
});
</script>
<style>
p { color:red; margin:4px; }
b { color:blue; }
</style>
</head>
<body>
<p></p>
<select id="single">
<option>Single</option>
<option>Single2</option>
</select>
<select id="multiple" multiple="multiple">
<option selected="selected">Multiple</option>
<option>Multiple2</option>
<option selected="selected">Multiple3</option>
</select>
</body>
</html>
14. val( val ) Returns: jQuery
jQuery 객체를 반환
Set the value attribute of every matched element.
매치되는 모든 원소에 주어진 값을 적용한다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
$("button").click(function () {
var text = $(this).text();
$("input").val(text);
});
});
</script>
<style>
button { margin:4px; cursor:pointer; }
input { margin:4px; color:blue; }
</style>
</head>
<body>
<div>
<button>Feed</button>
<button>the</button>
<button>Input</button>
</div>
<input type="text" value="click a button" />
</body>
</html>
15. val( val )
반환 없음
Checks, or selects, all the radio buttons, checkboxes, and select options that match the set of values.
체크 박스, 셀렉트 박스 레디오 버튼 셀렉트 옵션 등에 값을 적용
레디오나 체크박스 같은 경우는 값을 여러개 지정하여 할수 있다.
멀티플 같은 경우 배열로서 값을 지정할수 있다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
$("#single").val("Single2");
$("#multiple").val(["Multiple2", "Multiple3"]);
$("input").val(["check2", "radio1"]);
});
</script>
<style>
body { color:blue; }
</style>
</head>
<body>
<select id="single">
<option>Single</option>
<option>Single2</option>
</select>
<select id="multiple" multiple="multiple">
<option selected="selected">Multiple</option>
<option>Multiple2</option>
<option selected="selected">Multiple3</option>
</select><br/>
<input type="checkbox" value="check1"/> check1
<input type="checkbox" value="check2"/> check2
<input type="radio" name="r" value="radio1"/> radio1
<input type="radio" name="r" value="radio2"/> radio2
</body>
</html>