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

jQuery

1 .attr()
2 문법 1 - 속성의 값 가져오기
3 문법 2 - 속성 추가하기
4 예제 1 - 속성의 값 가져오기
5 예제 2 - 속성 추가하기
6 참고

.attr()

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

문법 1 - 속성의 값 가져오기

선택한 요소의 속성의 값을 가져온다.

.attr( attributeName )

예를 들어 아래는 div 요소의 class 속성의 값을 가져온다.

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

문법 2 - 속성 추가하기

선택한 요소에 속성을 추가한다.

.attr( attributeName, value )

예를 들어 아래는 h1 요소에 title 속성을 추가하고 속성의 값은 Hello로 한다.

$( 'h1' ).attr( '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()는 자바스크립트 입장에서의 속성값을 가져오거나 추가한다.

jQuery / meta 태그의 값 가져오기

jQuery로 원하는 meta 태그를 선택하여 값을 가져오는 방법은 다음과 같습니다. $( 'meta' ).attr( 'content' ); meta 태그 중 name이 xxx인 것을 선택하고, content 속성의 값을 가져오라는 뜻입니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <meta name="author" content="JB"> <meta property="og:image" content="abc.png"> ...

jQuery / Plugin / jQuery Smooth Scroll

jQuery Smooth Scroll jQuery Smooth Scroll은 HTML 내에서 링크를 클릭하여 이동할 때, 부드럽게 이동하도록 만들어주는 플러그인입니다. GitHub : https://github.com/kswedberg/jquery-smooth-scroll Download : https://github.com/kswedberg/jquery-smooth-scroll/archive/master.zip 기본 사용법 다음처럼 문서 내에서 이동하는 링크를 가진 HTML 문서를 만듭니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <style> body { font-family: Consolas, sans-serif; } a { color: blue; } p { margin-bottom: 800px; } </style> </head> <body> <ul> <li><a href="#ipsum">Ipsum</a></li> <li><a href="#dolor">Dolor</a></li> </ul> <h1>Lorem</h1> <p>Lorem ipsum dolor sit amet, ...

jQuery / 스크롤해도 상단에 고정되는 메뉴 만들기

상단 고정 메뉴 웹페이지의 내용이 많으면 아래로 스크롤해서 보게 됩니다. 그러면 페이지에 있는 모든 내용이 움직이고 상단에 있는 메뉴도 위로 사라지게 됩니다. 이렇게 되면 페이지의 내용을 다 보고 다른 메뉴로 이동하려 할 때 다시 문서의 위로 스크롤해서 올라가야 하는 불편이 있습니다. 모바일 기기에서라면 더욱 불편합니다. 이 불편을 해소하는 방법 중의 하나가 메뉴를 고정시키는 ...

jQuery / Method / .hide() - 선택한 요소를 사라지게 하는 메서드

.hide() .hide()는 선택한 요소를 사라지게 합니다. 문법 1 .hide() 선택한 요소를 즉시 사라지게 합니다. 문법 2 .hide( duration ) duration : 사라지는 데 걸리는 시간입니다. slow, fast, 숫자를 넣을 수 있습니다. 숫자의 단위는 1000분의 1초입니다. 기본값은 400입니다. easing : 사라지는 방식입니다. swing과 linear가 가능합니다. 기본값은 swing입니다. complete : 사라진 다음 실행할 함수를 넣을 ...

jQuery / Method / .removeAttr() - 선택한 요소의 특정 속성을 제거하는 메서드

.removeAttr() .removeAttr()은 선택한 요소의 특정 속성을 제거한다. 문법 attributeName 속성을 제거한다. .removeAttr( attributeName ) 예를 들어 아래는 h1 요소에서 title 속성을 제거한다. $( 'h1' ).removeAttr( 'title' ); 예제 input 요소의 placeholder 속성을 제거한다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <style> input { font-size: ...

jQuery / Method / .slice() - 일치하는 요소의 일부분만 선택하는 메서드

.slice() .slice()는 일치하는 요소의 일부분만 선택합니다. 문법 .slice( start ) 예를 들어 $( 'li' ).slice( 2 ).css( 'color', 'red' ); 는 li 요소 중 3번째부터 빨간색으로 만듭니다. $( 'li' ).slice( 2, 5 ).css( 'color', 'red' ); 는 li 요소 중 3번째부터 5번째까지 빨간색으로 만듭니다. $( 'li' ).slice( -4, -2 ).css( 'color', 'red' ); 는 li 요소 중 ...

jQuery / 자식 요소의 개수를 기준으로 부모 요소 선택하기

자식 요소의 개수를 기준으로 부모 요소을 선택하기 위해서는 스크립트를 이용해야 합니다. 다음은 jQuery를 이용한 간단한 예제입니다. li 요소를 3개 이상 가진 ol 요소를 선택해서 글자를 빨간색으로 만듭니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <style> .a ...

jQuery / Method / .delay() - 실행 중인 함수를 정해진 시간만큼 중지(연기) 시키는 메서드

.delay() .delay()는 실행 중인 함수를 정해진 시간만큼 중지(연기) 시킵니다. 문법 .delay( duration ) duration에는 중지할 시간이 들어갑니다. 숫자로 정할 때의 단위는 1/1000초이고, slow 또는 fast로 정할 수 있습니다. slow는 600, fast는 200에 해당합니다. 예제 버튼을 클릭하면 문단이 위로 사라졌다가 1초 뒤에 아래로 내려옵니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> ...

jQuery / Method / jQuery.inArray()

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

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

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

CODING FACTORY