1. 화면 로드시 다중 속성 지정(이미지를 이용해서 예를 들어 본다.)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html;" charset="utf-8" >
<title> jquery </title>
<script src="http://code.jquery.com/jquery-1.7.2.js"></script>
<script>
$(document).ready(function (){
//맵(컬렉션)으로 다중 속성 지정
$("#com").attr({
src:"http://img.naver.net/static/www/up/2013/0419/mat_163915602c.jpg",
alt:"여자",
title:"커피마실려고하는 여자"
});
});
</script>
</head>
<body>
<div id="product">
<img id="com" />
</div>
</body>
</html>
2. 버튼 클릭시 특정 속성 제거
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html;" charset="utf-8" >
<title> 특정속성 지우기 </title>
<script src="http://code.jquery.com/jquery-1.7.2.js"></script>
<script>
$(document).ready(function (){
//버튼 클릭시 특성/속성/attribute삭제
$('#btnRemove').click(function(){
$('img:first').removeAttr("src"); //src속성 삭제
});
});
</script>
</head>
<body>
<input type="button" id="btnRemove" value="src삭제" />
<img src="http://icon.daumcdn.net/w/c/13/04/24457545542405703.jpeg" alt="가격에 따른 메뉴차이" />
<img src="http://icon.daumcdn.net/w/c/13/04/24457545542405703.jpeg" alt="가격에 따른 메뉴차이" />
</body>
</html>
3. dom요소의 Text가져오기 설정
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html;" charset="utf-8" >
<title> 특정속성 지우기 및 셋팅 </title>
<script src="http://code.jquery.com/jquery-1.7.2.js"></script>
<script>
$(document).ready(function (){
//get
var text = $('b').text();
alert(text);
//set
$('p:first').html("<b>낼</b> 봐요.");
$('p:last').text("<b>낼</b> 봐요.");
//get
alert($('p:first').html());
});
</script>
</head>
<body>
<div>
안녕하세요<b>jQuery</b><br />
반갑습니다.<b>javascript</b><br />
<p>또 만나요</p>
<p>언제요</p>
</div>
</body>
</html>
'강좌 > jQuery' 카테고리의 다른 글
| 제이쿼리(jQuery) Traversing (0) | 2013.04.23 |
|---|---|
| 제이쿼리(jQuery) - 폼 요소의 값 가져오기 및 설정 (0) | 2013.04.22 |
| jQuery Attributes(jQuery로 요소의 속성 변경하기) - 2 (0) | 2013.04.22 |
| jQuery Attributes(jQuery로 요소의 속성 변경하기) - 1 (0) | 2013.04.22 |
| 제이쿼리(jQuery) - jQuery 선택기 설명 2 (패스워드 일치) (0) | 2013.04.22 |
