jQuery / Reference / .addClass()
개요
- .addClass()로 선택한 요소에 클래스 값을 추가할 수 있습니다.
문법
.addClass( className )
- 클래스 값은 큰 따옴표 또는 작은 따옴표로 감쌉니다.
$( 'h1' ).addClass( 'abc' );
- 띄어쓰기로 구분하여 여러 개의 값을 추가할 수 있습니다.
$( 'h1' ).addClass( 'ab cd ef' );
페이지가 로드된 상태에서 클래스 값이 추가되는 것이므로, 추가되기 전의 모양에서 추가된 후의 모양으로 변하는 것을 방문자가 볼 수도 있습니다.
예제
- h1 요소에는 bg 클래스를 추가하여 배경색을 만들고, h2 요소는 bg와 bd 클래스를 추가하여 배경색과 테두리를 만듭니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>jQuery</title>
<style>
.bg { background-color: #eeeeee; }
.bd { border: 1px solid #666666; }
</style>
<script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
$( document ).ready( function() {
$( 'h1' ).addClass( 'bg' );
$( 'h2' ).addClass( 'bg bd' );
});
</script>
</head>
<body>
<h1>Lorem ipsum dolor.</h1>
<h2>Lorem ipsum dolor.</h2>
</body>
</html>
참고
- 클래스 값 삭제는 .removeClass()로 합니다.
jQuery / Reference / .toggleClass()
개요 .toggleClass()로 선택한 요소에 클래스 값을 넣었다 뺐다 할 수 있습니다. 문법 .toggleClass( className ) 예를 들어 다음은 p 요소에 xyz 클래스가 없으면 추가하고, 있으면 제거합니다. $( 'p' ).toggleClass( 'xyz' ); 예제 버튼을 클릭하면 h1 요소에 ab 클래스 값이 추가되어 배경색이 생기고, 다시 버튼을 클릭하면 ab 클래스 값이 제거되어 배경색이 사라집니다. <!doctype html> <html lang="ko"> <head> ...
개요 .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> ...
개요 .find()는 어떤 요소의 하위 요소 중 특정 요소를 찾을 때 사용합니다. 문법 .find( selector ) 예를 들어 다음은 h1 요소의 하위 요소 중 span 요소를 선택합니다. $( 'h1' ).find( 'span' ) 예제 클래스 값으로 b를 갖는 p 요소의 하위 요소 중 클래스 값으로 ip를 갖는 span 요소를 찾아서 글자 크기를 2배로 만듭니다. <!doctype html> <html lang="ko"> <head> ...
jQuery / Reference / .addClass()
개요 .addClass()로 선택한 요소에 클래스 값을 추가할 수 있습니다. 문법 .addClass( className ) 클래스 값은 큰 따옴표 또는 작은 따옴표로 감쌉니다. $( 'h1' ).addClass( 'abc' ); 띄어쓰기로 구분하여 여러 개의 값을 추가할 수 있습니다. $( 'h1' ).addClass( 'ab cd ef' ); 페이지가 로드된 상태에서 클래스 값이 추가되는 것이므로, 추가되기 전의 모양에서 추가된 후의 모양으로 변하는 것을 방문자가 볼 수도 ...
jQuery / Reference / .insertAfter()
개요 .insertAfter()는 특정 요소 뒤에 요소를 추가하거나 이동시킵니다. 문법 .insertAfter( target ) 예제 1 h1 요소 뒤에 <p>World</p>를 추가합니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <style> body { font-family: Consolas, monospace; ...
jQuery / Reference / :contains()
개요 :contains()는 특정 문자열을 포함한 요소를 선택하는 선택자입니다. 문법 $( ':contains( text )' ) 문자열 포함 여부를 따질 때 대소문자를 구분한다는 점에 주의합니다. 예를 들어 다음은 ab 문자열을 포함한 p 요소를 선택합니다. $( 'p:contains( "ab" )' ) 예제 jb를 포함한 p 요소를 선택해서 글자를 빨간색으로 만듭니다. 첫번째 문단은 jb가 없어서, 세번째 문단은 jb가 있지만 대문자여서 선택되지 않습니다. <!doctype html> <html ...
개요 :button은 type이 button인 요소를 선택하는 선택자입니다. 문법 type이 button인 모든 요소를 선택합니다. $( ':button' ) type이 button이면서 class 값으로 xy를 갖는 요소를 선택합니다. $( '.xy:button' ) 예제 type이 button인 요소의 글자 모양을 기울임꼴로 만듭니다. 클래스 값이 ab면서 type이 button인 요소의 글자 색은 빨간색으로 만듭니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> ...
개요 .wrap()은 선택한 요소를 원하는 태그로 감쌉니다. 문법 .wrap( wrappingElement ) 예를 들어 다음과 같이 하면 p 요소를 div로 감쌉니다. $( 'p' ).wrap( '<div></div>' ); class나 id 값을 추가할 수도 있습니다. $( 'p' ).wrap( '<div id="ab" class="cd"></div>' ); 여러 태그로 감쌀 수도 있습니다. $( 'p' ).wrap( '<div><strong></strong></div>' ); 예제 클래스의 값이 a인 p 요소를 blockquote 태그로 감쌉니다. <!doctype html> <html lang="ko"> <head> ...
jQuery / Reference / .append()
개요 .append()는 선택한 요소의 내용의 끝에 콘텐트를 추가합니다. 문법 .append( content ) 예제 1 순서 없는 목록 마지막에 Dolor를 추가합니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <style> body { line-height: ...
jQuery / Reference / .prependTo()
개요 .prependTo()는 선택한 요소를 다른 요소의 시작 태그 뒤로 이동시킵니다. 문법 .prependTo( target ) 예제 abc를 클래스 값으로 가지는 span 요소를 h1 요소의 <h1> 뒤로 이동시킵니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <style> body { ...