jQuery / Reference / .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의 속성값을 가져오거나 추가하고 싶다면 .css()를 사용합니다.
개요 .add()는 어떤 요소를 추가로 선택할 때 사용합니다. 문법 .add( selector ) 예를 들어 다음은 ul 요소를 선택하고, 추가로 p 요소를 선택합니다. $( 'ul' ).add( 'p' ) 예제 1 li 요소를 선택하고, 추가로 p 요소를 선택한 후 색을 빨간색으로 만듭니다. <!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> ...
.width()는 선택한 요소의 가로 크기를 반환하거나, 가로 크기를 변경합니다.
개요 .after()는 선택한 요소 뒤에 새 요소를 추가하거나, 다른 곳에 있는 요소를 이동시킵니다. 문법 .after( content ) 예제 1 h1 요소 뒤에 Hello World!를 내용으로 갖는 p 요소를 추가합니다. <!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 / Reference / .unwrap()
개요 .unwrap()은 선택한 요소의 상위 태그를 제거합니다. 문법 .unwrap() 예를 들어 다음은 h1 요소의 바로 상위의 태그를 제거합니다. $( 'h1' ).unwrap(); 예제 버튼을 크릭하면 h1 요소의 상위 태그인 div 태그를 제거합니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <style> div { ...
개요 .css()로 선택한 요소의 css 속성값을 가져오거나 style 속성을 추가할 수 있습니다. 문법 1 - 속성의 값 가져오기 .css( propertyName ) propertyName의 속성값을 가져옵니다. 예를 들어 다음은 h1 요소의 스타일 중 color 속성의 값을 가져옵니다. $( "h1" ).css( "color" ); 문법 2 - 속성 추가하기 .css( propertyName, value ) style 속성을 추가합니다. 예를 들어 다음은 h1 요소에 style 속성을 ...
jQuery / Reference / .before()
개요 .before()는 선택한 요소 앞에 새 요소를 추가하거나, 다른 곳에 있는 요소를 이동시킵니다. 문법 .before( content ) 예제 1 p 요소 앞에 Lorem Ipsum Dolor를 내용으로 갖는 h1 요소를 추가합니다. <!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> ...
개요 .attr()은 요소(element)의 속성(attribute)의 값을 가져오거나 속성을 추가합니다. 문법 1 - 속성의 값 가져오기 .attr( attributeName ) 예를 들어 아래는 div 요소의 class 속성의 값을 가져옵니다. $( 'div' ).attr( 'class' ); 문법 2 - 속성 추가하기 .attr( attributeName, value ) 예를 들어 아래는 h1 요소에 title 속성을 추가하고 속성의 값은 Hello로 합니다. $( 'h1' ).attr( 'title', 'Hello' ); 예제 1 ...
jQuery / Reference / .wrapAll()
개요 .wrapAll()은 선택한 요소 모두를 새로운 태그로 감쌉니다. 문법 .wrapAll( wrappingElement ) 예를 들어 다음은 모든 p 요소를 모아서 div 태그로 감쌉니다. $( 'p' ).wrap( '<div></div>' ); 예제 1 .wrap()은 선택한 요소에 각각 적용됩니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <style> div ...
jQuery / Reference / .removeClass()
개요 .removeClass()로 선택한 요소에서 클래스 값을 제거할 수 있습니다. 문법 .removeClass( className ) 클래스 값은 큰 따옴표 또는 작은 따옴표로 감쌉니다. $( 'h1' ).removeClass( 'abc' ); 띄어쓰기로 구분하여 여러 개의 값을 제거할 수 있습니다. $( 'h1' ).removeClass( 'ab cd ef' ); 페이지가 로드된 상태에서 클래스 값이 제거되는 것이므로, 제거되기 전의 모양에서 제거된 후의 모양으로 변하는 것을 방문자가 볼 수도 ...
jQuery / Reference / .addClass()
개요 .addClass()로 선택한 요소에 클래스 값을 추가할 수 있습니다. 문법 .addClass( className ) 클래스 값은 큰 따옴표 또는 작은 따옴표로 감쌉니다. $( 'h1' ).addClass( 'abc' ); 띄어쓰기로 구분하여 여러 개의 값을 추가할 수 있습니다. $( 'h1' ).addClass( 'ab cd ef' ); 페이지가 로드된 상태에서 클래스 값이 추가되는 것이므로, 추가되기 전의 모양에서 추가된 후의 모양으로 변하는 것을 방문자가 볼 수도 ...