카테고리 없음2013. 6. 14. 13:11

이번 장에서는 html 구문 form 구문등을 jQuery 를 이용하여 변경하는 방법에 대해서 알아보겠습니다.

 

jQuery text(), html(), val(), attr()

앞 장에서 설명한바와 같이 text, html, var, attr 각각의 속성 값을 제어 할 수 있습니다.

 

간단예제
$("#btn1").click(function(){
  $("#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는 두개의 인자값을 가집니다. 아래 예제와 함께 사용하는 방법에 대해 알아보겠습니다.

 

간단예제

  $("#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 + ")";
    });
  });
// btn1 버튼을 클릭하면 id test1에 text 문구를 추가합니다.

// 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의 속성값을 제어 합니다.

 
간단예제
$("button").click(function(){
  $("#makand").attr("href",http://blog.naver.com/makand123);
});

// 버튼을 클릭하면 id makand의 href 값을 http://blog.naver.com/makand123 으로 바꿉니다.

 

관련예제

<!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://blog.naver.com/makand123");
  });
});
</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://blog.naver.com/makand123 으로 바뀝니다.

 

속성값을 두 가지 이상 제어도 가능합니다.

간단예제

$("button").click(function(){
  $("#makand").attr({
    "href" : http://blog.naver.com/makand123,
    "title" : "Park's의 블로그"
  });
});

// 버튼을 클릭하면 링크(href)값을 "http://blog.naver.com/makand123" 으로 바꾸고 title 값을 "Park's의 블로그" 추가/변경 됩니다.

 

지금까지 jQuery의 text(), html(), val(), attr()에 대해서 알아보았고, 다음 장에선 add() 요소에 대해서 알아보겠습니다.


 

Posted by 아이맥스