-
jQuery - .attr()jQuery 2020. 6. 23. 15:06
.attr()
- 요소(element)의 속성(atrribute)의 값을 가져오거나 속성을 추가한다.
문법1
.attr('atrributeName')선택한 요소의 속성을 가져온다 예를 들어
$('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()는 javascript 입장에서의 속성값을 가져오거나 추가.
'jQuery' 카테고리의 다른 글
jQuery - .children() (0) 2020.06.23 jQuery - before() (0) 2020.06.23 jQuery - .append() (0) 2020.06.23 JQuery - .animate() (0) 2020.06.23 jQuery( .after() ) (0) 2020.06.23