2. 제이쿼리 실습: attr(), 클래스명 바꾸기
study.zip예제1) 어트리뷰트(attr)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>attr</title>
<style>
html * { margin:0; padding:0; }
body { padding:10px; margin-top:100px;}
body span { color:red; font-size: 30px; }
p { margin-bottom: 20px;}
#wrapper { width:522px; margin:0 auto; text-align:center;}
li { float: left; list-style: none; margin-left: 10px;overflow:hidden; width:123px; height:40px;}
li.first { margin-left:0px; }
li a {display:block; width:123px;}
li a img {display:block;}
#nav {width:522px; height:40px; margin: 0px auto 10px auto; }
#big_img { width:522px; height:400px; margin: 10px auto 0px auto; }
#big_img img { width: 522px; height: 400px; }
</style>
<script type="text/javascript" src="./js/jquery-3.2.1.min.js" /></script>
<script>
$(document).ready(function(){
$('#nav > ul > #btn1').bind('click', function(){
$('#big_img > img').attr({src:'images/img1.png', alt:'예쁜배경1'});
});
$('#nav > ul > #btn2').bind('click', function(){
$('#big_img > img').attr({src:'images/img2.png', alt:'예쁜배경2'});
});
$('#nav > ul > #btn3').bind('click', function(){
$('#big_img > img').attr({src:'images/img3.png', alt:'예쁜배경3'});
});
$('#nav > ul > #btn4').bind('click', function(){
$('#big_img > img').attr({src:'images/4.jpg', alt:'예쁜배경4'});
});
});
</script>
</head>
<body>
<div id="wrapper">
<div id="nav">
<ul>
<li id="btn1" class="first on">
<a href="#">
<img src="images/btn1_2.jpg" />
</a>
</li>
<li id="btn2">
<a href="#">
<img src="images/btn2_2.jpg" />
</a>
</li>
<li id="btn3">
<a href="#">
<img src="images/btn3_2.jpg" />
</a>
</li>
<li id="btn4">
<a href="#">
<img src="images/btn4_2.jpg" />
</a>
</li>
</ul>
</div>
<!-- 버튼 클릭시 큰 그림을 보여주는 영역-->
<div id="big_img">
<img src="images/img1.png" alt="예쁜배경1" />
</div>
</div>
</body>
</html>
예제2) class명 바꾸기
<!DOCTYPE html>
<html>
<head>
<title>class값 변경</title>
<meta charset="utf-8">
<style>
html * { margin:0; padding:0; }
body { padding:10px; margin-top:100px;}
body span { color:red; font-size: 30px; }
p { margin-bottom: 20px;}
#wrapper { width:522px; margin:0 auto; text-align:center;}
li { float: left; list-style: none; margin-left: 10px;overflow:hidden; width:123px; height:40px;}
li.first { margin-left:0px; }
li a {display:block; width:123px;}
li a img {display:block;}
#nav {width:522px; height:40px; margin: 0px auto 10px auto; }
#image { width:522px; height:400px; margin: 10px auto 0px auto; }
#image.spring { background:url(images/spring.jpg) }
#image.summer { background:url(images/summer.jpg) }
#image.fall { background:url(images/fall.jpg) }
#image.winter { background:url(images/winter.jpg) }
</style>
<script type="text/javascript" src="./js/jquery-3.2.1.min.js"></script>
<script>
$(document).ready(function(){ // 문서가 읽혀지는 순간 함수 실행
$('#nav > ul > #springBtn').bind('click', function(){
$('#image').removeClass().addClass('spring');
});
$('#nav > ul > #summerBtn').bind('click', function(){
$('#image').removeClass().addClass('summer');
});
$('#nav > ul > #fallBtn').bind('click', function(){
$('#image').removeClass().addClass('fall');
});
$('#nav > ul > #winterBtn').bind('click', function(){
$('#image').removeClass().addClass('winter');
});
});
</script>
</head>
<body>
<div id="wrapper">
<div id="nav">
<ul>
<li id="springBtn" class="first on">
<a href="#">
<img src="images/btn1_2.jpg" />
</a>
</li>
<li id="summerBtn">
<a href="#">
<img src="images/btn2_2.jpg" />
</a>
</li>
<li id="fallBtn">
<a href="#">
<img src="images/btn3_2.jpg" />
</a>
</li>
<li id="winterBtn">
<a href="#">
<img src="images/btn4_2.jpg" />
</a>
</li>
</ul>
</div>
<div id="image" class="spring"></div>
</div>
</body>
</html>
'jQuery' 카테고리의 다른 글
| J쿼리의 메서드: size(), eq(), first()/last(), index(), not(), filter(), slice(), has(), each() (0) | 2017.09.05 |
|---|---|
| 제이쿼리 스크롤메뉴 (0) | 2017.08.29 |
| 1. 제이쿼리 문법 기초 (0) | 2017.08.24 |
| Ajax: serialize(), serializeArray() (0) | 2016.03.22 |
| Ajax에서 스크립트 로드하기 $.getScript() (0) | 2016.03.22 |
