jquery7 클래스 조작

삼전·2023년 5월 30일
0

jQuery

목록 보기
6/15
<!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>

클래스 추가 및 제거 결과

화면 결과

profile
풀스택eDot

0개의 댓글