<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- CDN으로 jQuery 라이브러리 연결하기 - https://cdnjs.com/libraries/jquery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<style>
img{width:100px; height:100px;}
.c1{border:5px solid red; }
.c2{border:5px dotted green; }
.c3{border:5px solid blue; }
.c4{border:5px solid pinks; }
</style>
</head>
<body>
<div>
이름: <input type="" name="username" id="username" value="홍길동"/>
연락처: <input type="" name="tel" id="tel" />
<textarea id="intro" cols="50" row="3"></textarea>
</div>
<div></div>
<img src="../img/swisda.jpg" />
<img src="../img/swisda.jpg" />
<img src="../img/swisda.jpg" />
<img src="../img/swisda.jpg" />
<script>
$(function(){
// **스타일시트 클래스 조작**
// addClass(): 클래스 조작
$("img").addClass('c1');
$("img").addClass('c2');
//세번재 이지미에 c3클래스 삽입
$("img").eq(2).addClass('c3');
//removeClass(): 클래스 제거
$("img").removeClass("c2");
//홀수번째는 c3추가, 짝수번째 c4추가
$("img:even").addClass("c3"); // 0, 2, 4
$("img:odd").addClass("c4"); // 1, 3, 5
$("img").removeClass("c1");
//toggleClass(기준 클래스) : 클래스 있으면 지우고 없으면 추가
$("img").toggleClass("c3")
//hasClass() : 클래스가 있는지 확인해주는 함수, boolean 반환
var q = $("img").hasClass('c3')
$('#tel').val(q)
// val(): input, select, textarea태그의 값을 얻어오거나 바꿀때 사용한다.
// document.getElementById('username').value
$('#intro').val($("#username").val())
})
</script>
</body>
</html>클래스 추가 및 제거 결과
화면 결과
풀스택eDot
0개의 댓글
