WEB/jQuery

[jQuery] Attr 제어 <기본>

춘햄 2021. 6. 7. 10:03

jQuery는  JS와 마찬가지로 HTML 태그의 속성 값을 변경하거나 지우는 등 제어할 수 있다. 

이번 포스팅에서는 간단하게 Attribute 를 get, set하는 방법을 다루려 한다.

attr() : html 요소의 속성을 다루는 함수


1. get: attr('속성명')

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>DOM요소의 attribute 읽어오기</title>

<script src="jquery-1.6.2.js" type="text/javascript"></script>

<script type="text/javascript">
	$(document).ready(function() {
    
		alert($('a').attr('href'));

		});
</script>

</head>

<body>

	<a href="http://www.dotnetkorea.com/">닷넷코리아</a>
	<img id="logo" src="dotnetkorealogo.gif" alt="닷넷코리아로고" />
	<img id="copy" src="icon_copy.gif" />

</body>

</html>


2. set: attr('속성명', '속성값')

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>DOM요소의 attribute 읽어오기</title>

<script src="jquery-1.6.2.js" type="text/javascript"></script>

<script type="text/javascript">
	$(document).ready(function() {
    
		$('#logo').mouseover(function() {
			$(this).attr('src', 'icon_home.gif');
		})
		
		$('#copy').mouseover(function() {
			$(this).attr('src', 'ico_go_up_s.gif');
			})
			
		$('#copy').mouseout(function() {
			$(this).attr('src', 'ico_go_down_s.gif');
			})
            
		});
</script>

</head>

<body>

	<a href="http://www.dotnetkorea.com/">닷넷코리아</a>
	<img id="logo" src="dotnetkorealogo.gif" alt="닷넷코리아로고" />
	<img id="copy" src="icon_copy.gif" />

</body>

</html>
반응형