27.jQuery - Attributes ( 03.Attributes - 01.Attr )
- html() : 요소의 HTML을 읽어(get)온다.
- html(val) : 요소에 HTML을 설정(set)한다.
- text() : 일치하는 모든 요소의 텍스트를 붙여서 읽어(get)온다.
- text(val) : 요소에 텍스트를 설정(set)한다.
Attr() 메서드 속성으로 접근한 마우스오버,마우스 아웃 예제입니다.
| 01.Attr.htm |
|
<html xmlns="http://www.w3.org/1999/xhtml"> <head>
<title>DOM요소의
attributee 읽어오기</title>
<script src="../jQuery/jquery-1.3.2-vsdoc2.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function()
{ //[1] Get alert($('a').attr('href'));
//동적으로 //[2] set
: img에 마우스 오버시 이미지 변경//세팅(설정) $('img').mouseover(function() { $(this).attr("src", "http://www.dotnetkorea.com/Website/Portals/0/dotnetkorealogo.gif"); }); /* //[2-1] img 전체에 적용되는데 첫번째 이미지에만 적용하고자 할 때 $('img:first').mouseover(function() { $(this).attr("src",
"http://www.dotnetkorea.com/Website/Portals/0/dotnetkorealogo.gif"); }); */ //[3] 마우스 오버/아웃시 다른 이미지 표시 $('#copy').mouseover(function() { $(this).attr("src", "../images/j1.jpg"); }); $('#copy').mouseout(function() { $(this).attr("src", "../images/j2.jpg"); });
});
</script> </head> <body>
<a href="http://www.dotnetkorea.com">닷넷코리아</a>
<img src="../images/j1.jpg" alt="마우스 오버~"/>
<img src="../images/j2.jpg" alt="마우스 아웃~"/> </body> </html> |
| 결과화면 |
[그림27-1] |
01.Attr.htm