happy cat image

everdevel

Happiness is Here

EEOS

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

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

안녕하세요. 에버디벨입니다.
저의 실수로 2020년 3월 22일,23일,24일,27일,29일 서버에 문제가 발생하여 서비스가 멈췄습니다.
지금까지 에버디벨을 찾아주신 95만명의 방문자분들에게 불편을 드려죄송합니다.
현재 에버디벨 사이트는 복구했고 eeos는 점검중에 있습니다. 빠른복구하겠습니다.
eeos의 프로젝트 파일과 데이터베이스는 안전히 백업되어 복구한 상태입니다.
이번 일을 계기로 백업시스템을 더욱 강화했습니다.
유저님들 모두 코로나 바이러스 조심하시기 바랍니다. 감사합니다. ^-^*

요소의 속성값 변경하기

attr('속성','속성값');

attr()은 우리가 태그안에 부가적으로 쓰는 src="" alt="" title="" 등의 값을 변경해주는 기능을 제공합니다.

예를 들어

<img class="myimage" src="/material/images/jQuery/disney.jpg" alt="disney" />

위의 src의 속성값인 /material/images/jQuery/disney.jpg를 다르게 변경해주거나 alt의 속성값인 disney를 변경할 수 있게 해줍니다.

disney

위의 이미지를 클릭하면 혼다사의 이족보행 로봇 아시모가 나오게끔 해봅시다.

그렇게 하기 위해서는 src('','')의 첫번째에는 바꿀 속성를 쓰고, 두번째에는 변경할 속성값을 넣어줍니다.^^

var myimage = $('.myimage');
myimage.click(function(){
  myimage.attr('src','/material/images/jQuery/asimo.png');
});

아래의 도쿄디즈니랜드 25주년 신데렐라성 이미지를 클릭해주세요 그럼 이미지가 변경됩니다 이렇게 하는 방법을 이제 알 수 있습니다. ^-^;

disney

클릭하면 혼다사의 최첨단 이족보행 로봇 아시모의 사진으로 변경됩니다. 즉

<img class="myimage" src="/material/images/jQuery/disney.jpg" alt="disney" />
위의 소스가
<img class="myimage" src="/material/images/jQuery/asimo.png" alt="disney" />
로 변경이 되었습니다.

소스로 결과를 확인해본다면

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>EVERDEVEL :: 제이쿼리 강좌</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.0.min.js" ></script>
<script type="text/javascript">
$(function(){
  var myimage = $('.myimage');
  myimage.click(function(){
    myimage.attr('src','/material/images/jQuery/asimo.png');
  });
});
</script>
<style>
</style>
</head>
<body>
<img class="myimage" src="/material/images/jQuery/disney.jpg" alt="disney" />
</body>
</html>

(로그인을 하시면 위의 코드를 웹에서 바로 실행 할 수 있습니다.
oAuth인증 방식으로 빠르고 간편하게 로그인할 수 있습니다.
네이버, 구글, 카카오, 라인의 ID로 에버디벨에 비밀번호 정보 제공없이 순식간에 로그인 하세요.)

그 외에도 a태그의 href="", target="",등등 변경이 가능하니 테스트 해보시기 바랍니다.


    
    

강좌로 돌아가기

댓글 0개

정렬기준