이번 장에서는 html 구문 form 구문등을 jQuery 를 이용하여 변경하는 방법에 대해서 알아보겠습니다.
jQuery text(), html(), val(), attr()
앞 장에서 설명한바와 같이 text, html, var, attr 각각의 속성 값을 제어 할 수 있습니다.
$("#test1").text("안녕하세요!!!");
});
$("#btn2").click(function(){
$("#test2").html("<b>안녕하세요!!!</b>");
});
$("#btn3").click(function(){
$("#test3").val("Park's 블로그");
});
// 버튼 id btn1을 클릭하면 id text1의 값이 "안녕하세요!!!" 로 변경됩니다.
// 버튼 id btn2을 클릭하면 id text2의 값이 "안녕하세요!!!" 로 변경됩니다.
// 버튼 id btn3을 클릭하면 id text3의 값이 "Park's 블로그" 로 변경됩니다.
관련예제
<!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("안녕하세요!!!");
});
$("#btn2").click(function(){
$("#test2").html("<b>안녕하세요!!!</b>");
});
$("#btn3").click(function(){
$("#test3").val("Park's 블로그");
});
});
</script>
</head>
<body>
<p id="test1">첫번째 구문입니다.</p>
<p id="test2">두 번째 구문입니다..</p>
<p>Input field: <input type="text" id="test3" value="무엇으로 바뀔까요"></p>
<button id="btn1">Set Text</button>
<button id="btn2">Set HTML</button>
<button id="btn3">Set Value</button>
</body>
</html>
// 위 그림에서 보듯이 각각의 버튼을 클릭하면 하나씩 바뀌는 모습을 볼 수 있습니다.
jQuery callback text(), html(), val()
callback는 두개의 인자값을 가집니다. 아래 예제와 함께 사용하는 방법에 대해 알아보겠습니다.
간단예제
$("#test1").text(function(i,origText){
return "Old text: " + origText + " New text: 멋진 미래를 위해! (index: " + i + ")";
});
});
$("#test2").html(function(i,origText){
return "Old html: " + origText + " New html: <b>멋진 미래를 위해!</b> (index: " + i + ")";
});
});
// btn2 버튼을 클릭하면 id test2에 html 문구를 추가합니다.
관련예제
<!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: 멋진 미래를 위해! (index: " + i + ")";
});
});
$("#btn2").click(function(){
$("#test2").html(function(i,origText){
return "Old html: " + origText + " New html: <b>멋진 미래를 위해!</b> (index: " + i + ")";
});
});
});
</script>
</head>
<body>
<p id="test1">첫번째 <b>Park's의 블로그</b> 입니다.</p>
<p id="test2">두 번째 <b>Park's의 블로그</b> 입니다.</p>
<button id="btn1">Show Old/New Text</button>
<button id="btn2">Show Old/New HTML</button>
</body>
</html>
// text 구문추가와, html 구문추가의 틀린점은 text에 html구문 즉 <b>,<tr>,<p> 등을 넣어도 실행되지 않고 text로 뿌려집니다.
// 하지만 html 구문추가는 html 구문을 모두 실행시켜 줍니다.
jQuery attr()
html의 속성값을 제어 합니다.
// 버튼을 클릭하면 id makand의 href 값을 http://makand.tistory.com 으로 바꿉니다.
관련예제
<!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(){
$("#makand").attr("href","http://makand.tistory.com");
});
});
</script>
</head>
<body>
<p><a href="http://www.naver.com" id="makand">naver.com</a></p>
<button>바꾸라 href Value</button>
<p>버튼 클릭 후 마우스를 링크에 오버하면 링크값이 바뀐것을 확인 할 수 있습니다.</p>
</body>
</html>
// 버튼을 클릭하기전 링크값은 http://www.naver.com 이지만 버튼을 클릭하면 http://makand.tistory.com 으로 바뀝니다.
속성값을 두 가지 이상 제어도 가능합니다.
간단예제
$("#makand").attr({
"href" : http://makand.tistory.com,
"title" : "Park's의 블로그"
});
});
// 버튼을 클릭하면 링크(href)값을 "http://makand.tistory.com" 으로 바꾸고 title 값을 "Park's의 블로그" 추가/변경 됩니다.
지금까지 jQuery의 text(), html(), val(), attr()에 대해서 알아보았고, 다음 장에선 add() 요소에 대해서 알아보겠습니다.
'jQuery > jQuery HTML' 카테고리의 다른 글
| jQuery classes css() (0) | 2013.05.23 |
|---|---|
| jQuery CSS Classes (0) | 2013.05.23 |
| jQuery - Remove Elements (0) | 2013.05.22 |
| jQuery Add Elements (0) | 2013.05.21 |
| jQuery HTML Get Content and Attributes text(), html(), val(), attr() (1) | 2013.05.17 |
