jQuery 강좌 | Methods > .attr()

.attr()은 두가지 일을 합니다. 하나는 속성값을 가져오는 것이고, 또하나는 속성을 추가하는 것입니다.

문법

속성값을 가져올 때의 문법은 다음과 같습니다.

.attr( attributeName )

예를 들어

$( 'div' ).attr( 'class' );

는 div 요소의 class 속성값을 가져옵니다.

속성을 추가할 때의 문법은 다음과 같습니다.

.attr( attributeName, value )

예를 들어

$( 'h1' ).attr( 'title', 'Hello' );

는 h1 요소에 title 속성을 추가하고 속성값은 Hello로 합니다. 즉

<h1 title="Hello">...</h1>

와 같이 만듭니다.

예제 1

http://book.cmsfactory.net/jQuery/V01/Methods/attr-01.html

h1 요소의 class 값을 가져와서 출력하는 예제입니다.

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>jQuery Method | .attr()</title>
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script>
      $( document ).ready( function() {
        var hClass = $( 'h1' ).attr( 'class' );
        $( 'span' ).text( hClass );
      } );
    </script>
  </head>
  <body>
    <h1 class="hello">Lorem ipsum dolor.</h1>
    <p>h1 class value is : <span></span></p>
  </body>
</html>

예제 2

http://book.cmsfactory.net/jQuery/V01/Methods/attr-02.html

input에 placeholder 속성을 추가하는 예제입니다.

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>jQuery Method | .attr()</title>
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script>
      $( document ).ready( function() {
        $( 'input' ).attr( 'placeholder', 'Input your address' );
      } );
    </script>
  </head>
  <body>
    <input type="text" name="address">
  </body>
</html>

Category

Created on 2014-02-27 19:11 | Updated on 2015-07-17 01:03

이 글을 공유하기

Kakao