메뉴 건너뛰기

검색창 닫기

HEUKMYO

program1

140806 -[jquery] attr

2014.09.22 00:00 read.122

$("선택자").attr("엘리먼트 속성");

엘리먼트 속성의 값을 불러온다.

ex)

$('img').attr("src");


$("선택자").attr("엘리먼트 속성","속성값");

엘리먼트 속성에 속성값을 넣는다.

ex)

$('img').attr("src","images/img_02.jpg");

예제1

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ko" xml:lang="ko">
	<head>
		<meta http-equiv="content-type" content="text/html;charset=utf-8" />
		<title> new document </title>
		<style type="text/css">
			.a{outline:5px solid red}
			p span{display:inline-block;margin-left:2px;width:80px;height:30px;background:#aaa;line-height:30px;text-align:center;}
		</style>
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" type="text/javascript"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				$('button').click(function(){
					$('img').attr("src","images/img_02.jpg");
				});
			});
		</script>
	</head>
	<body>
		<img src="images/img_01.jpg" alt="신세계" id="a" class="b" />
		<button>OK</button>
	</body>
</html>

미리보기

jq_attr_1.gif


예제2

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ko" xml:lang="ko">
	<head>
		<meta http-equiv="content-type" content="text/html;charset=utf-8" />
		<title> new document </title>
		<style type="text/css">
			.a{outline:5px solid red}
			p span{display:inline-block;margin-left:2px;width:80px;height:30px;background:#aaa;line-height:30px;text-align:center;}
		</style>
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" type="text/javascript"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				$('button').click(function(){
					$('img').attr("class","a");
				});
			});
		</script>
	</head>
	<body>
		<img src="images/img_01.jpg" alt="신세계" class="b" />
		<button>OK</button>
	</body>
</html>

미리보기

jq_attr_2.gif


예제3

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ko" xml:lang="ko">
	<head>
		<meta http-equiv="content-type" content="text/html;charset=utf-8" />
		<title> new document </title>
		<style type="text/css">
			.a{outline:5px solid red}
			p span{display:inline-block;margin-left:2px;width:80px;height:30px;background:#aaa;line-height:30px;text-align:center;}
		</style>
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" type="text/javascript"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				$('button').click(function(){
					var str=$('img').attr("class");//img의 class를 가져옴
					alert(str);
					var str1=$('img').attr("alt");//img의 alt를 가져옴
					alert(str1);
				});
			});
		</script>
	</head>
	<body>
		<img src="images/img_01.jpg" alt="신세계" class="b" />
		<button>OK</button>
	</body>
</html>

미리보기

jq_attr_3.gif


예제4

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ko" xml:lang="ko">
	<head>
		<meta http-equiv="content-type" content="text/html;charset=utf-8" />
		<title> new document </title>
		<style type="text/css">
			.a{outline:5px solid red}
			p span{display:inline-block;margin-left:2px;width:80px;height:30px;background:#aaa;line-height:30px;text-align:center;}
		</style>
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" type="text/javascript"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				$('img').click(function(){
					 var str=$('#a1').attr("src");
					 var str1=$('#a1').attr("alt");
					 $('#b1').attr("src",str);
					 $('#b1').attr("alt",str1);
				 });
			});
		</script>
	</head>
	<body>
		<img src="images/img_01.jpg" alt="신세계" id="a1" />
		<img src="" alt="" id="b1" />
	</body>
</html>


미리보기

jq_attr_4.gif


예제5

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ko" xml:lang="ko">
	<head>
		<meta http-equiv="content-type" content="text/html;charset=utf-8" />
		<title> new document </title>
		<style type="text/css">
			.a{outline:5px solid red}
			p span{display:inline-block;margin-left:2px;width:80px;height:30px;background:#aaa;line-height:30px;text-align:center;cursor:pointer;}
		</style>
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" type="text/javascript"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				$('#t1').click(function(){
					 var url1=$('#t1').attr("title");
					 $('a').attr("href",url1);
				 });
				 $('#t2').click(function(){
					 var url2=$('#t2').attr("title");
					 $('a').attr("href",url2);
				 });
				 $('#t3').click(function(){
					 var url3=$('#t3').attr("title");
					 $('a').attr("href",url3);
				 });
			});
		</script>
	</head>
	<body>
		<p><span title="http://www.naver.com" id="t1">네이버</span><span title="http://www.daum.net" id="t2">다음</span><span title="http://www.nate.com" id="t3">네이트</span></p>
		<p><a href="">링크</a></p>
	</body>
</html>


if문을 써서 하는 방법

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ko" xml:lang="ko">
	<head>
		<meta http-equiv="content-type" content="text/html;charset=utf-8" />
		<title> new document </title>
		<style type="text/css">
			.a{outline:5px solid red}
			p span{display:inline-block;margin-left:2px;width:80px;height:30px;background:#aaa;line-height:30px;text-align:center;cursor:pointer;}
		</style>
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" type="text/javascript"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				$('button').click(function(){
					if($(this).attr("id"=="bt1")){
						$('a').attr("href","http://www.naver.com");
					}else if($(this).attr("id"=="bt2")){
						$('a').attr("href","http://www.daum.net");
					}else{
						$('a').attr("href","http://www.nate.com");
					}
				});
				
			});
		</script>
	</head>
	<body>
		<button id="bt1">네이버</button><button id="bt2">다음</button><button id="bt3">네이트</button>
		<a href="#">링크</a>
	</body>
</html>

미리보기

jq_attr_5.gif


,

추가메뉴 목록
위로