공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday

티스토리 뷰

■ 프론트엔드 ■/jQuery

attr(), 속성제어

serpiko 2013. 10. 13. 22:15

.attr()

 

인자에 따라 2가지사용.

 

하나일경우 - 속성값 가져오기

 

두개일경우 - 속성값을 요소에 부여함.

var btn = $(".main_btn0" + i + "_off");
btn.attr({"num":i});
var index = btn.attr("num");
console.log(index); //0,1,2,3

 

Example: Find the title attribute of the first <em> in the page.

 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
 
<!DOCTYPE html>
<html>
<head>
  <style>
  em { color:blue; font-weight:bold; }
  div { color:red; }
</style>
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<p>
  Once there was a <em title="huge, gigantic">large</em> dinosaur...
</p>
  The title of the emphasis is:<div></div>
<script>
var title = $("em").attr("title");
  $("div").text(title);
</script>
</body>
</html>
 

 

 

결과)

 

 

 

 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
 
<!DOCTYPE html>
<html>
<head>
  <style>
  p { margin: 20px 0 0 }
  b { color: blue; }
</style>
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>

<body>
<input id="check1" type="checkbox" checked="checked">
<label for="check1">Check me</label>
<p></p>

<script>
$("input").change(function() {
  var $input = $(this);
  $("p").html(".attr('checked'): <b>" + $input.attr('checked') + "</b><br>"
              + ".prop('checked'): <b>" + $input.prop('checked') + "</b><br>"
              + ".is(':checked'): <b>" + $input.is(':checked') ) + "</b>";
}).change();
</script>
</body>
</html>

 

결과) 

 

 

 

저작자표시 비영리 변경금지

'■ 프론트엔드 ■ > jQuery' 카테고리의 다른 글

.css - 속성제어  (0) 2013.10.13
click - 클릭  (0) 2013.10.13
id, class, style - 속성제어 3가지방법  (0) 2013.10.13
구글 제이쿼리 라이브러리  (0) 2013.10.13
addClass(), 클래스 추가하기  (0) 2013.10.13
댓글