happy cat image

everdevel

Web Technology, 에버디벨

UI 변경

EEOS

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

더 알아보기
에버디벨이 만든 무료 클라우드 개발환경을 소개합니다.

empty()

empty()는 요소의 내용을 완전히 비어버리는 기능을 제공합니다.

HTML

<div class="hello">hello world</div>

위의 html소스에서 hello world를 없애 버리는 기능을 empty()가 합니다.

jQuery

$('.hello').empty();

위의 기능을 실행하면 클래스 hello가 갖고 있는 hello world는 사라지게 됩니다.

예제

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

(로그인을 하시면 위의 코드를 실행 할 수 있습니다.
oAuth인증 방식으로 빠르고 간편하게 로그인할 수 있습니다.
네이버, 구글, 카카오, 라인의 ID로 빠르게 로그인 하세요.)

로그인 하여 위의 코드를 클릭 한번에 실행하려면 여기를 클릭해 주세용.

remove()

위의 empty()는 비어버리는 기능만 제공을 했는데요. 즉 div태그는 그대로 남아 있고 내용만 사라졌죠?

remove()는 태그 자체가 사라져 버리는 기능을 제공합니다.

<div class="hello">hello world</div>

위의 html소스에서 div 태그를 없애 버리는 기능을 remove()가 합니다.

CSS

.hello{border:3px solid yellow}

태그 자체가 사라진다는 것을 보여주기 위해 css를 적용합니다.

jQuery

$('.hello').remove();

예제

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>EVERDEVEL :: 제이쿼리 강좌</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-3.2.0.min.js" ></script>
<script type="text/javascript">
$(function(){
  $('.hello').remove();
});
</script>
<style>
.hello{border:3px solid yellow}
</style>
</head>
<body>
<div class="hello">hello world</div>
</body>
</html>

(로그인을 하시면 위의 코드를 실행 할 수 있습니다.
oAuth인증 방식으로 빠르고 간편하게 로그인할 수 있습니다.
네이버, 구글, 카카오, 라인의 ID로 빠르게 로그인 하세요.)

로그인 하여 위의 코드를 클릭 한번에 실행하려면 여기를 클릭해 주세용.

val()

val()은 텍스트의 필드값을 변경해주는 기능을 제공합니다.

위의 텍스트창에 쓰여있는 input your name을 val()를 통해서 변경이 가능합니다.

HTML

<input type="text" class="text1" value="input your name" />

jQuery

$('.text1').val('이름을 입력하세요');

위의 제이쿼리를 적용하면..아래와 같이 value값이 한글로 변경이 됩니다.

예제를 통해서 확인해 연습해보시기 바랍니다.

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>EVERDEVEL :: 제이쿼리 강좌</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-3.2.0.min.js" ></script>
<script type="text/javascript">
$(function(){
  $('.text1').val('이름을 입력하세요');
});
</script>
<style>
</style>
</head>
<body>
<input type="text" class="text1" value="input your name" />
</body>
</html>

(로그인을 하시면 위의 코드를 실행 할 수 있습니다.
oAuth인증 방식으로 빠르고 간편하게 로그인할 수 있습니다.
네이버, 구글, 카카오, 라인의 ID로 빠르게 로그인 하세요.)

로그인 하여 위의 코드를 클릭 한번에 실행하려면 여기를 클릭해 주세용.

이렇게 강좌를 마치고 다음 강좌는 focus(),blur()에 대해서 배워보도록 하겠습니다.^^

강좌로 돌아가기