jQuery / Method / .attr() - 속성(attribute)의 값을 가져오거나 속성을 추가하는 메서드

.attr()

.attr()은 요소(element)의 속성(attribute)의 값을 가져오거나 속성을 추가합니다.

문법 1

.attr( attributeName )

선택한 요소의 속성의 값을 가져옵니다. 예를 들어

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

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

문법 2

.attr( attributeName, value )

선택한 요소에 속성을 추가합니다. 예를 들어

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

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

예제 1

h1 요소의 class 속성의 값을 가져와서 출력합니다.

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>jQuery</title>
    <script src="//code.jquery.com/jquery-3.3.1.min.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

input 요소에 Input your address를 값으로 하는 placeholder 속성을 추가합니다.

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>jQuery</title>
    <style>
      input { font-size: 30px; }
    </style>
    <script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
    <script>
      $( document ).ready( function() {
        $( 'input' ).attr( 'placeholder', 'Input your address' );
      } );
    </script>
  </head>
  <body>
    <input type="text">
  </body>
</html>

참고

  • 속성(attribute)을 제거하고 싶다면 .removeAttr()을 사용합니다.
  • 선택한 요소의 css 속성값을 가져오거나 style 속성을 추가할 때는 .css()를 사용합니다.
  • .prop()는 자바스크립트 입장에서의 속성값을 가져오거나 추가합니다.

Related Posts

jQuery / Method / .find() - 어떤 요소의 하위 요소 중 특정 요소를 찾는 메서드

jQuery / Method / .find() - 어떤 요소의 하위 요소 중 특정 요소를 찾는 메서드

.find() .find()는 어떤 요소의 하위 요소 중 특정 요소를 찾을 때 사용합니다. 문법 .find( selector ) 예를 들어 $( 'h1' ).find( 'span' ) 은 h1 요소의 하위 요소 중 span 요소를 선택합니다. 예제 클래스 값으로 b를 갖는 p 요소의 하위 요소 중 클래스 값으로 ip를 갖는 span 요소를 찾아서 글자 크기를 2배로 만듭니다. <!doctype html> <html lang="ko"> <head> ...

jQuery / Method / .scrollTop() - 선택한 요소의 스크롤바 수직 위치를 반환하거나 스크롤바 수직 위치를 정하는 메서드

jQuery / Method / .scrollTop() - 선택한 요소의 스크롤바 수직 위치를 반환하거나 스크롤바 수직 위치를 정하는 메서드

.scrollTop() .scrollTop()은 선택한 요소의 스크롤바 수직 위치를 반환하거나 스크롤바 수직 위치를 정합니다. 문법 1 .scrollTop() 스크롤바 수직 위치를 가져옵니다. 예를 들어 $( 'div' ).scrollTop(); 는 div 요소의 스크롤바 수직 위치를 가져옵니다. 문법 2 .scrollTop( value ) 스크롤바 수직 위치를 정합니다. 예를 들어 $( 'div' ).scrollTop( 300 ); 은 div 요소의 스크롤바 위치를 위에서 300px로 정합니다. 예제 1 버튼을 클릭하면 div 요소의 스크롤바 위치를 ...

jQuery / Property / .length - 선택한 요소의 개수를 반환하는 속성

jQuery / Property / .length - 선택한 요소의 개수를 반환하는 속성

.length .length는 선택한 요소의 개수를 반환하는 속성입니다. 예를 들어 $( 'div' ).length 는 div 요소의 개수입니다. 예제 버튼을 클릭하면 li 요소의 개수를 출력합니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <script src="//code.jquery.com/jquery-1.11.0.js"></script> <script> $( document ).ready( function() { ...

jQuery / Method / .attr() - 속성(attribute)의 값을 가져오거나 속성을 추가하는 메서드

jQuery / Method / .attr() - 속성(attribute)의 값을 가져오거나 속성을 추가하는 메서드

.attr() .attr()은 요소(element)의 속성(attribute)의 값을 가져오거나 속성을 추가합니다. 문법 1 .attr( attributeName ) 선택한 요소의 속성의 값을 가져옵니다. 예를 들어 $( 'div' ).attr( 'class' ); 는 div 요소의 class 속성의 값을 가져옵니다. 문법 2 .attr( attributeName, value ) 선택한 요소에 속성을 추가합니다. 예를 들어 $( 'h1' ).attr( 'title', 'Hello' ); 는 h1 요소에 title 속성을 추가하고 속성의 값은 Hello로 합니다. 예제 1 h1 요소의 ...

jQuery / Method / jQuery.inArray()

jQuery / Method / jQuery.inArray()

jQuery.inArray() jQuery.inArray()로 배열에 특정 값이 있는지 알아낼 수 있습니다. 문법 jQuery.inArray( value, array ) value : 검색하고자 하는 값을 입력합니다. array : 배열의 이름을 입력합니다. fromIndex : 선택사항으로 몇 번째 배열 값부터 검색할지를 정합니다. 입력하지 않았을 때의 기본값은 0으로, 첫 번째 배열 값부터 검색합니다. 예를 들어 jQuery.inArray( 'as', jbAry ) 는 jbAry라는 배열에 as라는 값이 있는지 ...

jQuery / Method / .offset() - 선택한 요소의 좌표를 가져오거나 특정 좌표로 이동시키는 메서드

jQuery / Method / .offset() - 선택한 요소의 좌표를 가져오거나 특정 좌표로 이동시키는 메서드

.offset() .offset()은 선택한 요소의 좌표를 가져오거나 특정 좌표로 이동시킵니다. 문법 1 .offset() 선택한 요소의 좌표를 가져옵니다. 예를 들어 var jb = $( 'h1' ).offset(); 는 h1 요소의 좌표를 변수 jb에 저장합니다. 문법 2 .offset( coordinates ) 선택한 요소를 특정 위치로 이동시킵니다. 예를 들어 $( 'h1' ).offset( { left: 100, top: 50 } ); 은 h1 요소를 왼쪽에서 100px, 위에서 50px 위치로 ...

jQuery / 선택한 요소의 가로 크기 가져오기 - width, innerWidth, outerWidth

jQuery / 선택한 요소의 가로 크기 가져오기 - width, innerWidth, outerWidth

jQuery의 width, innerWidth, outerWidth로 특정 요소의 가로 크기를 가져올 수 있습니다. width - padding 안쪽 크기 innerWidth - border 안쪽 크기 outerWidth - border 포함 크기 다음은 padding과 margin을 추가하면서 각 값이 어떻게 변하는지 알아보는 예제입니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <style> ...

jQuery / Method / .width() - 선택한 요소의 가로 크기를 반환하거나, 가로 크기를 변경하는 메서드

jQuery / Method / .width() - 선택한 요소의 가로 크기를 반환하거나, 가로 크기를 변경하는 메서드

.width() .width()는 선택한 요소의 가로 크기를 반환하거나, 가로 크기를 변경합니다. 문법 1 .width() 선택한 요소의 가로 크기를 반환합니다. 예를 들어 var jbVar = $( 'p' ).width(); 는 p 요소의 가로 크기를 변수 jbVar에 저장합니다. 문법 2 .width( value ) 선택한 요소의 가로 크기를 변경합니다. 예를 들어 $( 'h1' ).width( '100px' ); 는 h1 요소의 가로 크기를 100px로 만듭니다. 예제 1 선택한 요소의 가로 ...

jQuery / Selector / :odd - 홀수 인덱스 요소를 선택하는 선택자

jQuery / Selector / :odd - 홀수 인덱스 요소를 선택하는 선택자

:odd :odd은 홀수 인덱스 요소를 선택하는 선택자입니다. 문법 $( ':odd' ) 예를 들어 $( 'p:odd' ) 는 홀수 인덱스인 p 요소를 선택합니다. 주의할 점은 인덱스가 0부터 시작한다는 것입니다. 예제 <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <script src="//code.jquery.com/jquery-3.3.1.min.js"></script> <script> $( ...

jQuery / Method / .fadeIn() - 선택한 요소를 서서히 나타나게 하는 메서드

jQuery / Method / .fadeIn() - 선택한 요소를 서서히 나타나게 하는 메서드

.fadeIn() .fadeIn()은 선택한 요소를 서서히 나타나게 합니다. 문법 .fadeIn( ) duration duration에는 완전히 나타날 때까지의 시간이 들어갑니다. fast, slow로 정하거나 400 같은 숫자로 정할 수 있습니다. 숫자일 경우 단위는 1000분의 1초이며, fast는 200, slow는 600에 해당합니다. 아무것도 입력하지 않으면 기본값 400으로 설정됩니다. 문자로 시간을 정할 때는 따옴표 안에 ...

jQuery 강좌