jQuery / Reference / .add()

개요

  • .add()는 어떤 요소를 추가로 선택할 때 사용합니다.

문법

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
.add( selector )
.add( selector )
.add( selector )
  • 예를 들어 다음은 ul 요소를 선택하고, 추가로 p 요소를 선택합니다.
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
$( 'ul' ).add( 'p' )
$( 'ul' ).add( 'p' )
$( 'ul' ).add( 'p' )

예제 1

  • li 요소를 선택하고, 추가로 p 요소를 선택한 후 색을 빨간색으로 만듭니다.
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<!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() {
$( 'li' ).add( 'p' ).css( 'color', 'red' );
} );
</script>
</head>
<body>
<ul>
<li>Lorem</li>
<li>Ipsum</li>
</ul>
<p>Dolor</p>
</body>
</html>
<!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() { $( 'li' ).add( 'p' ).css( 'color', 'red' ); } ); </script> </head> <body> <ul> <li>Lorem</li> <li>Ipsum</li> </ul> <p>Dolor</p> </body> </html>
<!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() {
        $( 'li' ).add( 'p' ).css( 'color', 'red' );
      } );
    </script>
  </head>
  <body>
    <ul>
      <li>Lorem</li>
      <li>Ipsum</li>
    </ul>
    <p>Dolor</p>
  </body>
</html>

예제 2

첫번째 li 요소(Lorem)에 마우스를 올리면, 첫번째 li 요소(Lorem)와 문단(Dolor)의 색을 빨간색으로 만듭니다.

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>jQuery</title>
<style>
li { cursor: pointer; }
</style>
<script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
$( document ).ready( function() {
$( 'li.la' ).hover( function() {
$( this ).add( 'p' ).css( 'color', 'red' );
}, function () {
$( this ).add( 'p' ).css( 'color', 'black' );
} );
} );
</script>
</head>
<body>
<ul>
<li class="la">Lorem</li>
<li class="lb">Ipsum</li>
</ul>
<p>Dolor</p>
</body>
</html>
<!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <style> li { cursor: pointer; } </style> <script src="//code.jquery.com/jquery-3.3.1.min.js"></script> <script> $( document ).ready( function() { $( 'li.la' ).hover( function() { $( this ).add( 'p' ).css( 'color', 'red' ); }, function () { $( this ).add( 'p' ).css( 'color', 'black' ); } ); } ); </script> </head> <body> <ul> <li class="la">Lorem</li> <li class="lb">Ipsum</li> </ul> <p>Dolor</p> </body> </html>
<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>jQuery</title>
    <style>
      li { cursor: pointer; }
    </style>
    <script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
    <script>
      $( document ).ready( function() {
        $( 'li.la' ).hover( function() {
          $( this ).add( 'p' ).css( 'color', 'red' );
        }, function () {
          $( this ).add( 'p' ).css( 'color', 'black' );
        } );
      } );
    </script>
  </head>
  <body>
    <ul>
      <li class="la">Lorem</li>
      <li class="lb">Ipsum</li>
    </ul>
    <p>Dolor</p>
  </body>
</html>

참고

  • 현재 선택한 요소와 함께 이전에 선택한 요소도 선택하려면 .addBack()을 사용합니다.
같은 카테고리의 다른 글
jQuery / Reference / .append()

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 / .removeClass()

jQuery / Reference / .removeClass()

개요 .removeClass()로 선택한 요소에서 클래스 값을 제거할 수 있습니다. 문법 .removeClass( className ) 클래스 값은 큰 따옴표 또는 작은 따옴표로 감쌉니다. $( 'h1' ).removeClass( 'abc' ); 띄어쓰기로 구분하여 여러 개의 값을 제거할 수 있습니다. $( 'h1' ).removeClass( 'ab cd ef' ); 페이지가 로드된 상태에서 클래스 값이 제거되는 것이므로, 제거되기 전의 모양에서 제거된 후의 모양으로 변하는 것을 방문자가 볼 수도 ...

jQuery / Reference / .prependTo()

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 { ...

jQuery / Reference / .remove()

jQuery / Reference / .remove()

개요 .remove()는 선택한 요소를 HTML 문서에서 제거합니다. 문법 .remove( ) 특정 선택자를 가진 요소를 제거할 때는 괄호 안에 선택자를 넣습니다. 예를 들어 다음은 클래스 값으로 rm을 가진 p 요소를 제거합니다. $( 'p' ).remove( '.rm' ); 다음과 같이 해도 결과는 같습니다. $( 'p.rm' ).remove(); 예제 버튼을 클릭하면 rm을 클래스 값으로 가지는 h1 요소를 제거합니다. <!doctype html> <html lang="ko"> <head> ...

jQuery / Reference / .addClass()

jQuery / Reference / .addClass()

개요 .addClass()로 선택한 요소에 클래스 값을 추가할 수 있습니다. 문법 .addClass( className ) 클래스 값은 큰 따옴표 또는 작은 따옴표로 감쌉니다. $( 'h1' ).addClass( 'abc' ); 띄어쓰기로 구분하여 여러 개의 값을 추가할 수 있습니다. $( 'h1' ).addClass( 'ab cd ef' ); 페이지가 로드된 상태에서 클래스 값이 추가되는 것이므로, 추가되기 전의 모양에서 추가된 후의 모양으로 변하는 것을 방문자가 볼 수도 ...

jQuery / Reference / .attr()

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 ...

jQuery / Reference / .has()

jQuery / Reference / .has()

개요 .has()로 특정 요소를 가지고 있는 요소를 선택할 수 있습니다. 문법 .has( selector ) 예를 들어 다음은 span 요소를 가지고 있는 h1 요소를 를 선택합니다. $( 'h1' ).has( 'span' ) 예제 span 요소를 포함하고 있는 h1 요소의 글자색을 빨간색으로 만듭니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <script ...

jQuery / Reference / .add()

jQuery / Reference / .add()

개요 .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> ...

jQuery / Reference / .css()

jQuery / Reference / .css()

개요 .css()로 선택한 요소의 css 속성값을 가져오거나 style 속성을 추가할 수 있습니다. 문법 1 - 속성의 값 가져오기 .css( propertyName ) propertyName의 속성값을 가져옵니다. 예를 들어 다음은 h1 요소의 스타일 중 color 속성의 값을 가져옵니다. $( "h1" ).css( "color" ); 문법 2 - 속성 추가하기 .css( propertyName, value ) style 속성을 추가합니다. 예를 들어 다음은 h1 요소에 style 속성을 ...

jQuery / Reference / .before()

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> ...