[JQuery-3.6.0] 요소(속성) 조작, 수치 조작 메서드

요소 조작 메서드 : 요소를 생성, 복사, 삭제, 속성 변환과 관련된 메서드를 제공.
1. 속성 조작 메서드

2. 수치 조작 메서드

- html() : 선택한 요소에 포함되는 하위 요소를 불러오거나 새 요소로 바꿀 때 사용.
- text() : 선택한 요소 내의 텍스트를 불러오거나 텍스트를 바꿀 때 사용.

- removeAttr("속성") : 선택한 요소에서 기존의 속성을 삭제할 때 사용.
- attr("속성") / attr("속성","값) : 선택한 요소에 새 속성을 추가하거나, 기존의 속성을 변경할 때 사용

- addClass() : 선택한 요소에 클래스 선택자를 생성할 때 사용.

- removeClass() : 선택한 요소에 지정된 클래스 선택자를 삭제할 때 사용.

- val() / val(값) : 입력 요소에 있는 value 값을 가져오거나 변경할 때 사용.

요소 불러오기, 텍스트 수정하기

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script type="text/javascript">
	$(function () {
		alert($("h2").html());
		$("h2").html("<a href='#'>HTML 메서드</a>");
		
		alert($("h1").html());
		$("h3").text("텍스트 메서드입니다.");
	});
	
</script>
</head>
<body>
	<p><strong>객체 조작 및 생성1</strong></p>
	<h2><i>html()</i></h2>
	
	<h1>객체 조작 및 생성2</h1>
	<h3>text()</h3>
</body>
</html>

속성 추가/삭제하기

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script type="text/javascript">
	$(function () {

		$(".text").text($(".wrap img").attr("src")); // 이미지 경로
		$(".wrap img").attr("width","200"); // 사이즈 조절
		$(".box img").removeAttr("border"); // 테두리 삭제
	});
</script>
</head>
<body>
	<h4>객체 조작 및 생성3</h4>
	<p class="wrap">
		<img src="images/apple.jpg" alt="사과 이미지" width="100">
	</p>
	
	<p class="text"></p>
	
	<p class="box">
		<img src="images/cherry.jpg" alt="체리 이미지" width="100" border="2">
	</p>
</body>
</html>

클래스 추가/삭제 하기

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script type="text/javascript">

	$(function () {
		$("#p1").addClass("aqua");
		$("#p2").removeClass("red");
	});
	
</script>
<style type="text/css">


	.red { background-color: red; }
	.aqua { background-color: aqua; }
	
</style>
</head>
<body>
	<p id="p1">내용1</p>
	<p id="p2" class="red">내용2</p>
</body>
</html>

값 변경 메서드

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script type="text/javascript">
	$(function () {
		alert($("#user_name").val()); //id가 user_name인 요소의 value값을 가져오기
		$("#my_name").val($("#user_name").val()); // id가 user_name인 요소의 value값을 my_name에 셋팅
	});
	
</script>
</head>
<body>
	<p>
		<input type="text" name="user_name" id="user_name" value="홍길동">
	</p>
	
	<p>
		<input type="text" name="my_name" id="my_name">
	</p>

</body>
</html>

저작자표시

'Front > JQuery' 카테고리의 다른 글

[JQuery-3.6.0] 이벤트(Event) 처리 (0)	2021.04.29
[JQuery-3.6.0] 요소(속성) 편집 메서드 (0)	2021.04.28
[JQuery-3.6.0] 속성 탐색 선택자 (0)	2021.04.28
[JQuery-3.6.0] 기본 문법과 위치 선택자 사용 (0)	2021.04.27
[JQuery-3.6.0] 제이쿼리의 기본 개념 (0)	2021.04.27