속성(attribute)
오라클자바커뮤니티에서 설립한 오엔제이프로그래밍
실무교육센터
(오라클,
SQL기초튜닝, 자바, 스프링3.X, 웹표준, HTML5, Ajax, jQuery,
안드로이드, 아이폰, 닷넷 실무강의)
일치하는 집합에서 첫 번째 엘리먼트에 있는 속성 값을 가져오거나 일치하는 모든 엘리먼트에 있는 속성 값을 설정하는데 사용
$("selector").attr()
attr(name)
선택한 엘리먼트의 name에 해당하는 어트리뷰트의 값을 가져온다.
선택한 엘리먼트의 name에 해당하는 어트리뷰트의 값을 가져온다.
attr(name, value)
선택한 엘리먼트의 name에 해당하는 어트리뷰트의 값을 설정한다.
attr(properties)
선택한 엘리먼트의 속성을 properties의 내용으로 설정합니다.
선택한 엘리먼트의 속성을 properties의 내용으로 설정합니다.
attr(name, single object function)
선택한 엘리먼트의 속성을 function의 내용으로 설정합니다.
선택한 엘리먼트의 속성을 function의 내용으로 설정합니다.
<html>
<head>
<meta charset="utf-8"/>
<script src="/ajaxjquery/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#img1").click(function () {
//img1을 클릭했을때 우선 타이틀을 출력
var title = $("#img1").attr("title");
alert(title);
//이번에는 title을 src 값으로 변경
$("#img1").attr("title", function() {
return $("#img1").attr("src");
});
alert($("#img1").attr("title"));
});
$("#img2").click(function () {
//img2의 title을 '바뀐타이틀1'으로 변경
$("#img2").attr("title", " 바뀐 타이틀1");
var title = $("#img2").attr("title");
alert(title);
//img2의 title을 '바뀐타이틀2'로 바꾸고 border를 '1'로
$("#img2").attr({title: "바뀐 타이틀2", border: "1"});
var title2 = $("#img2").attr("title");
alert(title2);
});
});
</script>
<body>
<div>
<img id="img1" src="http://www.onjprogramming.co.kr/onj/images/new_logo.gif"
title="오엔제이로고"/>
<img id="img2" src="http://www.onjprogramming.co.kr/onj/img/oraclejavacommunity.jpg” title="오라클자바커뮤니티로고"/>
</div></body></html>
댓글 없음:
댓글 쓰기