[jQuery] 요소 조작 메서드

728x90

jQuery는 문서 내부의 요소를 변경하는 여러가지 메서드를 사용할 수 있습니다.

(1) addClass()

요소에 클래스 속성을 추가합니다.

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="utf-8">
	<title></title>
	<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
	<script>
		$(function () {
			$('div').find('span').each(function (index) {
				$(this).addClass('myclass');
			});
		});
	</script>
</head>
<body>
	<div>
		<span>자동차</span>
		<span>자전거</span>
		<span>비행기</span>
		<span>배</span>
		<span>오토바이</span>
	</div>
</body>
</html>

문자열 형태의 값을 지정하는것 이외에 매개변수로 함수를 지정할 수도 있습니다. 이는 이후에서 살펴보는 대부분의 메서드에 동일하게 적용됩니다.

$(function () {
	$('div').find('span').each(function (index) {
		$(this).addClass(function (index){
			return 'myclass';
		});
	});
});

(2) removeClass()

클래스 속성을 제거합니다.

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="utf-8">
	<title></title>
	<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
	<script>
		$(function () {
			$('div').find('span').each(function (index) {
				$(this).removeClass();
			});
		});
	</script>
</head>
<body>
	<div>
		<span class="myclass">자동차</span>
		<span>자전거</span>
		<span>비행기</span>
		<span>배</span>
		<span>오토바이</span>
	</div>
</body>
</html>

만약 요소에 여러 클래스가 지정되어 있는경우 특정 클래스만 제거하고자 한다면 제거할 클래스명을 넣어주면 됩니다.

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="utf-8">
	<title></title>
	<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
	<script>
		$(function () {
			$('div').find('span').each(function (index) {
				$(this).removeClass('myclass2');
			});
		});
	</script>
</head>
<body>
	<div>
		<span class="myclass1 myclass2">자동차</span>
		<span>자전거</span>
		<span>비행기</span>
		<span>배</span>
		<span>오토바이</span>
	</div>
</body>
</html>

(3) toggleClass()

요소에 지정한 클래스가 존재하는 경우 클래스를 제거하고 없으면 추가합니다.

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="utf-8">
	<title></title>
	<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
	<script>
		$(function () {
			$('div').find('span').each(function (index) {
				$(this).toggleClass('myclass2');
			});
		});
	</script>
</head>
<body>
	<div>
		<span class="myclass1">자동차</span>
		<span>자전거</span>
		<span>비행기</span>
		<span>배</span>
		<span>오토바이</span>
	</div>
</body>
</html>

(4) attr()

요소의 속성과 관련된 메서드며 여러가지 목적으로 사용할 수 있습니다. 다음 예제는 img요소에서 src속성의 값을 확인하고 있습니다.

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="utf-8">
	<title></title>
	<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
	<script>
		$(function () {
			alert($('img').attr('src'));
		});
	</script>
</head>
<body>
	<div>
		<img src='test/abc.jpg' />
		<img src='test/abc.png' />

		<span>자동차</span>
		<span>자전거</span>
		<span>비행기</span>
		<span>배</span>
		<span>오토바이</span>
	</div>
</body>
</html>

또한 원하는 속성을 자유롭게 추가할 수도 있습니다. 아래 에제는 attr() 메서드를 통해서 속성을 추가하는 방법을 보여주고 있습니다. 간단하게는 단순문자열을 통해 추가할 수 있으며

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="utf-8">
	<title></title>
	<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
	<script>
		$(function () {
			$('span').attr('data-myd', 'car');
		});
	</script>
</head>
<body>
	<div>
		<span>자동차</span>
		<span>자전거</span>
		<span>비행기</span>
		<span>배</span>
		<span>오토바이</span>
	</div>
</body>
</html>

함수를 통한 속성 추가와

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="utf-8">
	<title></title>
	<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
	<script>
		$(function () {
			$('span').attr('data-number', function(index){
				return 'data-' + index;
			});
		});
	</script>
</head>
<body>
	<div>
		<span>자동차</span>
		<span>자전거</span>
		<span>비행기</span>
		<span>배</span>
		<span>오토바이</span>
	</div>
</body>
</html>

객체를 통해 속성을 추가하는 것도 가능합니다.

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="utf-8">
	<title></title>
	<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
	<script>
		$(function () {
			$('span').attr({
				id: function (index) {
					return 'span' + index;
				},
				width: 100
			});
		});
	</script>
</head>
<body>
	<div>
		<span>자동차</span>
		<span>자전거</span>
		<span>비행기</span>
		<span>배</span>
		<span>오토바이</span>
	</div>
</body>
</html>

참고로 함수사용시 두번째 매개변수를 지정하면 본래 요소가 가지고 있던 값을 가져오게 됩니다.

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="utf-8">
	<title></title>
	<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
	<script>
		$(function () {
			$('span').attr('data-number', function(index, data){
				return data + '-' + index;
			});
		});
	</script>
</head>
<body>
	<div>
		<span data-number="data">자동차</span>
		<span data-number="data">자전거</span>
		<span data-number="data">비행기</span>
		<span data-number="data">배</span>
		<span data-number="data">오토바이</span>
	</div>
</body>
</html>

이런 방법은 대부분의 메서드에서 사용가능하니 참고하시기 바랍니다.

(5) removeAttr()

속성을 제거합니다.

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="utf-8">
	<title></title>
	<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
	<script>
		$(function () {
			$('span').removeAttr('id');
		});
	</script>
</head>
<body>
	<div>
		<span id="span0">자동차</span>
		<span id="span1">자전거</span>
		<span id="span2">비행기</span>
		<span id="span3">배</span>
		<span id="span4">오토바이</span>
	</div>
</body>
</html>

(6) css()

css메서드는 요소의 스타일관련 기능을 수행하며 아래 예제를 통해 스타일을 추가해 보았습니다.

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="utf-8">
	<title></title>
	<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
	<script>
		$(function () {
			$('span').css('background', 'red');
		});
	</script>
</head>
<body>
	<div>
		<span id="span0">자동차</span>
		<span id="span1">자전거</span>
		<span id="span2">비행기</span>
		<span id="span3">배</span>
		<span id="span4">오토바이</span>
	</div>
</body>
</html>

다른 메서드와 마찬가지로 함수와

$(function () {
	var colors = ['red', 'blue', 'yellow', 'green', 'black'];

	$('span').css('background', function(index){
		return colors[index];
	});
});

객체를 통한 메서드사용이 가능합니다.

$(function () {
	var colors = ['red', 'blue', 'yellow', 'green', 'black'];

	$('span').css({
		background: function (index) {
			return colors[index];
		}
	});
});

물론 두번째 매개변수에 값을 지정하지 않으면 해당 스타일의 값을 가져오게 됩니다.

$(function () {
	alert($('#span0').css('background'));
});

(7) html() / text()

html과 text메서드는 요소내부의 문자열에 관한 기능을 수행합니다.

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="utf-8">
	<title></title>
	<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
	<script>
		$(function () {
			$('span').html('<b>테스트</b>');
		});
	</script>
</head>
<body>
	<div>
		<span id="span0">자동차</span>
		<span id="span1">자전거</span>
		<span id="span2">비행기</span>
		<span id="span3">배</span>
		<span id="span4">오토바이</span>
	</div>
</body>
</html>

html과 text와의 차이점은 html태그의 인식여부 뿐이며 사용방법은 동일합니다.

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="utf-8">
	<title></title>
	<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
	<script>
		$(function () {
			$('span').text(function(index){
				return '<b>테스트</b>';
			});
		});
	</script>
</head>
<body>
	<div>
		<span id="span0">자동차</span>
		<span id="span1">자전거</span>
		<span id="span2">비행기</span>
		<span id="span3">배</span>
		<span id="span4">오토바이</span>
	</div>
</body>
</html>

물론 이 메서드도 값을 지정하지 않으면 요소내부의 문자열을 가져오게 되지만

$(function () {
	alert($('span').html());
});

html은 선택자에 해당하는 첫번째 요소의 값만을 가져오고 text는 선택자에 해당하는 모든 요소의 값을 가져오는 차이가 있으므로 주의해 주세요.

(8) empty()

지정된 요소의 내부를 제거합니다.

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="utf-8">
	<title></title>
	<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
	<script>
		$(function () {
			$('#span0').empty();
		});
	</script>
</head>
<body>
	<div>
		<span id="span0">자동차</span>
		<span id="span1">자전거</span>
		<span id="span2">비행기</span>
		<span id="span3">배</span>
		<span id="span4">오토바이</span>
	</div>
</body>
</html>

(9) remove()

지정된 요소 자체를 삭제합니다.

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="utf-8">
	<title></title>
	<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
	<script>
		$(function () {
			$('#span0').remove();
		});
	</script>
</head>
<body>
	<div>
		<span id="span0">자동차</span>
		<span id="span1">자전거</span>
		<span id="span2">비행기</span>
		<span id="span3">배</span>
		<span id="span4">오토바이</span>
	</div>
</body>
</html>

(10) $()

새로운 요소를 생성합니다. 다음 예제는 span요소를 생성하고 div내부에 추가합니다.

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="utf-8">
	<title></title>
	<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
	<script>
		$(function () {
			$('<span>자동차</span>').appendTo('div');
		});
	</script>
</head>
<body>
	<div>
		
	</div>
</body>
</html>

생성한 요소도 하나의 요소이므로 사용가능한 모든 메서드를 사용할 수 있습니다. 아래 예제는 span요소를 생성하고 내부에 '자동차'라는 내용을 추가하며

$(function () {
	$('<span></span>').text('자동차').appendTo('div');
});

다음과 같이 객체형태로 특정속성등 기타 필요한 내용을 지정할 수 있습니다.

$(function () {
	$('<span></span>', {
		backgroundColor: 'red',
		width: 200
	}).text('자동차').appendTo('div');
});

(11) append() / prepend() / after() / before()

요소를 추가하는 메서드입니다. append는 지정한 요소의 뒤에, prepend는 지정한 요소의 앞에, after는 맨뒤에, before는 맨앞에 요소를 추가합니다.

다음은 div내부에 span요소를 추가하는 예제입니다.

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="utf-8">
	<title></title>
	<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
	<script>
		$(function () {
			$('div').append('<span>자동차</span>', '<span>자전거</span>');
		});
	</script>
</head>
<body>
	<div>
		
	</div>
</body>
</html>

위에서 처럼 메서드는 필요한 만큼 여러개의 요소를 포함할 수 있습니다. 다음은 함수를 통해 추가하는 방법입니다.

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="utf-8">
	<title></title>
	<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
	<script>
		$(function () {
			$('div').append(function (index){
				return '<span>순서' + index + '</span>';
			});
		});
	</script>
</head>
<body>
	<div></div>
	<div></div>
	<div></div>
</body>
</html>

(12) appendTo() / prependTo() / insertAfter() / insertBefore()

11번과 동일하게 요소를 추가하지만 11번과 반대로 동작합니다. 'A.메서드(B)'형태일때 appendTo는 A를 B의 뒤에, prependTo는 A를 B의 앞에, insertAfter은 A를 B의 맨뒤에, Before를 B의 맨앞에 추가합니다.

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="utf-8">
	<title></title>
	<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
	<script>
		$(function () {
			$('<span>자동차</span>').appendTo('div');
		});
	</script>
</head>
<body>
	<div></div>
</body>
</html>

(13) clone()

요소를 복제합니다. 아래 예제는 이미 존재하는 span요소에 clone메서드를 사용했으므로 span을 복제한 요소를 div에 추가하게 됩니다.

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="utf-8">
	<title></title>
	<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
	<script>
		$(function () {
			$('div').append($('span').clone());
		});
	</script>
</head>
<body>
	<span>자동차</span>
	<div></div>
</body>
</html>

728x90

저작자표시 비영리 변경금지

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

[jQuery] 효과 (0)	2020.06.16
[jQuery] 이벤트 다루기 (0)	2020.06.11
[jQuery] 요소 탐색 메서드 (0)	2020.06.03
[jQuery] 객체 합치기 ($.extend) (0)	2020.06.02
[jQuery] 배열처리 (0)	2020.06.02

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

티스토리툴바