이전에 HTML 페이지에서 값을 가져오는 방법을 배웠습니다.
같은 메서드를 사용해서 메서드내에 파라메터값을 넣으면 HTML 페이지의 값을 변경할 수 있습니다.
1. text("텍스트")
2. html("태그가포함된내용")
3. val("폼필드값")
4. attr("바꿀속성값")
[예제1] 값을 대체하는 예제
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("#test1").text("Hello world!");
});
$("#btn2").click(function(){
$("#test2").html("<b>Hello world!</b>");
});
$("#btn3").click(function(){
$("#test3").val("Dolly Duck");
});
});
</script>
</head>
<body>
<p id="test1">This is a paragraph.</p>
<p id="test2">This is another paragraph.</p>
<p>Input field: <input type="text" id="test3" value="Mickey Mouse"></p>
<button id="btn1">Set Text</button>
<button id="btn2">Set HTML</button>
<button id="btn3">Set Value</button>
</body>
</html>
[예제2] 콜백을 사용
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("#test1").text(function(i,origText){
return "Old text: " + origText + " New text: Hello world! (index: " + i + ")";
});
});
$("#btn2").click(function(){
$("#test2").html(function(i,origText){
return "Old html: " + origText + " New html: Hello <b>world!</b> (index: " + i + ")";
});
});
});
</script>
</head>
<body>
<p id="test1">This is a <b>bold</b> paragraph.</p>
<p id="test2">This is another <b>bold</b> paragraph.</p>
<button id="btn1">Show Old/New Text</button>
<button id="btn2">Show Old/New HTML</button>
</body>
</html>
[예제3] 속성을 바꾸는 예제
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#w3s").attr("href","http://www.w3schools.com/jquery").
text("jQuery");
});
});
</script>
</head>
<body>
<p><a href="http://www.w3schools.com" id="w3s">W3Schools.com</a></p>
<button>Change href Value</button>
<p>Mouse over the link (or click on it) to see that the value of the href attribute has changed.</p>
</body>
</html>
다음은 속성을 href 및 제목속성을 모두 설정하는 방법입니다.
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#w3s").attr({
"href" : "http://www.w3schools.com/jquery",
"title" : "W3Schools jQuery Tutorial"
});
});
});
</script>
</head>
<body>
<p><a href="http://www.w3schools.com" id="w3s">W3Schools.com</a></p>
<button>Change href and title</button>
<p>Mouse over the link to see that the href attribute has changed and a title attribute is set.</p>
</body>
</html>
'WEB_TECH > jquery' 카테고리의 다른 글
| [jQuery] 7. HTML Get (0) | 2013.04.22 |
|---|---|
| [jQuery] 6. jQuery method chaining (0) | 2013.04.22 |
| [jQuery] 5. jQuery 이펙트 (0) | 2013.04.22 |
| [jQuery] 4. jQuery이벤트 (0) | 2013.04.22 |
| [jQuery] 3. jQuery 셀렉터 (0) | 2013.04.16 |
| [jQuery] 2. jQuery 문법 (0) | 2013.04.11 |
| [jQuery] 1. jQuery 시작하기 (0) | 2013.04.11 |
