티스토리 뷰

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>
반응형

'WEB > jQuery' 카테고리의 다른 글

[jQuery] attr()의 다중 속성 제어  (0) 2021.06.07
[jQuery] attr() 를 이용한 이미지 출력  (0) 2021.06.07
[jQuery] 함수를 이용한 폰트의 크기 조절  (0) 2021.06.02
[jQuery] 이벤트를 최초 한번만 실행하는 one()  (0) 2021.06.02
[jQuery] hover()  (0) 2021.06.02
공유하기 링크
Comments
Related Articles more