코딩 이야기

jQuery 수업 2일차 본문

jQuery

jQuery 수업 2일차

별메아리 2023. 1. 26. 09:39
728x90

jQuery를 이용한 DOM 변경

  • 요소의 내용을 가져오거나 변경할 수 있다. - text(),html()
  • 요소의 속성을 가져오거나 변경할 수 있다. - attr()
  • 요소의 스타일 속성을 가져오거나 변경할 수 있다. - css()
  • 요소를 추가하거나 삭제할 수 있다. - append(), remove()

예)

id="target"인 요소의 text()와html()을 경고 상자로 출력

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.6.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
	$("#text").click(function () {
		// P 요소의 내용을 가져와라
		//alert($("#target").text());
		// P 요소의 내용을 보내라
		$("#target").text("안녕하세요")
	});
	$("#html").click(function () {
		// p 요소의 내용을 가져와라
		// alert($("#target").html());
		// p 요소의 내용을 보내라!
		$("$target").html("<b>안녕하세요</b>")
	})
	$("#val").click(function () {
		alert($("#name").val());
	})
});


</script>
</head>
<body>
<p id="target">이것은<strong>하나의</strong>단락입니다.</p>
<button id="text">text()</button>
<button id="html">html()</button>
이름 : <input type="text" id="name">
<button id="val">val()</button>
</body>
</html>

attr()을 사용하여 img 에있는 src 속성가져오기,보내기

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.6.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
	// img 요소의 src 속성의 값을 가져오기
	$("#attr").click(function () {
		alert($("#dog").attr("src"));
	});
	// img 요소의 src 속성의 값을 보내기
	$("#change").click(function () {
		$("#dog").attr("src","../../썸네일/다운로드.jpg")
	})
});
</script>
</head>
<body>
<img src="../../썸네일/강아지.jpg" id="dog" width="120" height="100"><br>
<button id="attr">attr()</button>
<button id="change">이미지변경</button>
</body>
</html>

DOM요소에 요소 추가하기

  • append() - 선택된 요소의 끝(end)에 새로운 콘텐츠를 추가한다.
  • prepend() - 선택된 요소의 처음(beginning)에 새로운 콘텐츠를 추가한다.
  • after() - 선택된 요소의 뒤에 콘텐츠를 삽입한다.
  • before() - 선택된 요소의 앞에 콘텐츠를 삽입한다.

예)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.6.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
	$("#button1").click(function () {
		$("p").append("<b style='color:red'>Hello!</b>.");
	});
	$("#button2").click(function () {
		$("p").prepend("<b style='color:red'>Hello!</b>.");
	});
});
</script>
</head>
<body>
<p>I would like to say: </p>
<button id="button1">append()</button>
<button id="button2">prepend()</button>
</body>
</html>

jQuery를 사용하여 특정요소를 DOM에서 삭제하기

  • remove() - 선택된요소와 그 자식 요소를 삭제한다.
  • empty() - 선택된 요소의 자식 요소를 삭제한다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
p{ background-color: yellow;}
.container {height: 80px; width: 200px; border: 1px dotted red;}
</style>
<script type="text/javascript"src="https://code.jquery.com/jquery-3.6.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
	$("#button1").click(function () {
		$(".container").remove();
	});
});
$(document).ready(function () {
	$("#button2").click(function () {
		$(".container").empty();
	});
});
</script>
</head>
<body>
<button id="button1">remove()</button>
<button id="button2">empty()</button><br>
<div class="container">
<p class ="hello">hello</p>
<p class ="goodbye">Goodbye</p>
</div>
<br>
</body>
</html>

jQuery를 이용한 CSS 조작

  • css() - 선택된 요소의 스타일 속성을 설정하거나 반환한다.
  • addClass() 선택된 요소에 하나 이상의 클래스를 추가한다.
  • removeClass() - 선택된 요소에 하나 이상의 클래스를 삭제한다.

css()를 사용해 요소의 스타일 속성을 설정하거나 반환해보자.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
div {
	width: 60px;height: 60px; background-color: blue;
}
</style>
<script type="text/javascript"src="https://code.jquery.com/jquery-3.6.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
	$("#button1").click(function () {
		var color = $("#div1").css("background-color");
		$("#result").text("background-color:"+color);
	});
	$("#button2").click(function () {
		$("#div1").css("background-color","red");
	});
});
</script>
</head>
<body>
<div id="div1"></div>
<button id="button1">css(element)</button>
<button id="button2">css(element,style)</button>
<p id="result">여기에 결과가 표시됩니다.</p>
</body>
</html>

addClass() - 선택된 요소로 부터 클래스 부여, removeClass() - 선택된 요소 클래스 삭제

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
.warning{
	border: 1px solid black;
	background-color: yellow;
}
</style>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.6.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
	$("button").click(function () {
		$("#div1").addClass("warning");
	});
});
</script>
</head>
<body>
<div id="div1">
<p>예제 단락입니다.</p>
</div>
<button>addClass()</button>
</body>
</html>

요소의 크기 알기

width() - 요소의 가로 크기를 반환한다.

height() - 요소의 세로 크기를 반환한다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
body{
display: flex;
}
div {
	width: 70px;
	height: 50px;
	margin: 5px;
	background-color: red;
}
.next{ background: blue;}
</style>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.6.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
	var modWidth = 50;
	$("div").click(function () {
		$(this).width(modWidth).addClass("next");
		modWidth -= 8;
	})
})
</script>
</head>
<body>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</body>
</html>
728x90
저작자표시 비영리 변경금지 (새창열림)

'jQuery' 카테고리의 다른 글

jQuery 수업 1일 차  (0) 2023.01.25
jQuery  (0) 2023.01.25
'jQuery' Related Articles more
Comments