happy cat image

everdevel

Make It Yours, 에버디벨

UI 변경

EEOS

에버디벨 책을 학습할 수 있는 클라우드 개발 환경을 제공합니다.
개발환경구축없이 태블릿에서도 개발할 수 있는 책의 예제와 프로젝트
오직 당신을 위한 스토리지, URL, DB, 무제한 트래픽
그리고 웹기반 개발환경을 제공합니다.

더 알아보기

웹애플리케이션을 만들고 싶은데 이것도 알아야 하고
저것도 알아야 한다는데 어떻게 해야할지 모르겠다면

웹프로그래밍 초보자를 넘어 프로그래밍을 처음 접하는 분들을 위해
에버디벨이 1년넘게 작업한

HTML5 + CSS3 + jQuery + MySQL + PHP

한권으로 배우는 웹코딩 시작하기

내용 변경하기

오늘 배울 내용은 text(),html() 함수 입니다.

text()

어떤 p태그 안에 내용이 hello가 있다면 text()를 사용해서 konnichiha로 변경할 수 있습니다.

신기하죠? 그럼 한번 해볼까요?

HTML

<p class="change_greeting">hello</p>

jQuery

$('.change_greeting').text('konnichiha');

이렇게 되면 change_greeting가 감싸고 있는 텍스트는 konnichiha로 변경됩니다.

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>EVERDEVEL :: 제이쿼리 강좌</title>
<script type="text/javascript"
src="http://code.jquery.com/jquery-2.1.0.min.js">
</script>
<script type="text/javascript">
$(function(){
  $('.change_greeting').text('konnichiha');
});
</script>
</head>
<body>
    <p class="change_greeting">hello</p>
</body>
</html>

이 소스 실행 버튼을 눌러서 결과를 확인해 보시기 바랍니다.
^^결과를 확인하셨나요?
hello가 아닌 konnichiha가 출력이 되죠?
모터에 전기를 공급하면 모터가 정방향으로 빠르게 회전 하죠?
LED에 전기를 공급하면 다이오드에서 빛이 발광하죠?
모터의 반대로 역방향으로 돌리면 모터는 전기를 생산합니다.
LED는의 빛이 발광하는 부분에 역으로 우리가 빛을 공급해주면 어떻게 될까요?
LED는역으로 전기를 생산합니다.
text()안에 아무것도 쓰지 않는다면 역으로 해당하는 요소의 글을 가져온답니다.
text()의 괄호 안에 어떠한 문구를 써 넣으면 해당하는 요소의 텍스트를 괄호안의 문구로 변경해주는데요.
반대로 아무것도 쓰지 않는다면 해당하는 요소가 감싸는 텍스트를 가지고 오는 기능도 있답니다.
아래는 클래스 hello감싸는 텍스트hello를 jquery의 text()가 값을 가져와서 alert창으로 띄워주는 소스 입니다.

HTML

<p class="hello">hello</p>

jQuery

var i = $('.hello').text();
alert(i);

아래의 소스 웹에서 보기 버튼을 눌러서 확인해 보시기 바랍니다.

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>EVERDEVEL :: 제이쿼리 강좌</title>
<script type="text/javascript"
src="http://code.jquery.com/jquery-2.1.0.min.js">
</script>
<script type="text/javascript">
    $(function(){
        var i = $('.hello').text();
        alert(i);
    });
</script>
</head>
<body>
<p class="hello">hello</p>
</body>
</html>

text()에 대해서 알아봤는데요.
이번에는 html();에 대해서 알아봅시다.

html()

html()도 text()와 비슷한 기능인데요.
text()은 텍스트만 불러오지만 html()은 html태그도 불러 옵니다.

$('.class_Name').html('hello');

위와 같이 괄호 안에 태그를 사용할 수 있습니다.
위의text()예제를 html로 변경해서 사용할게요. hello 를 볼드가 들어간 konnichiha로 변경해주는 소스입니다.

HTML

<p class="change_greeting">hello</p>

jQuery

$('.change_greeting').html('<b>konnichiha</b>');
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>EVERDEVEL :: 제이쿼리 강좌</title>
<script type="text/javascript"
src="http://code.jquery.com/jquery-2.1.0.min.js">
</script>
<script type="text/javascript">
$(function(){
    $('.change_greeting').html('<b>konnichiha</b>');
});
</script>
</head>
<body>
<p class="change_greeting">hello</p>
</body>
</html>

강좌로 돌아가기