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>
    <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)의 색을 빨간색으로 만듭니다.

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

jQuery / Reference / .slideDown()

개요 .slideDown()은 선택한 요소를 아래쪽으로 서서히 나타나게 합니다. 문법 .slideDown( ) duration 요소가 나타날 때까지 걸리는 시간입니다. 단위는 1/1000초, 기본값은 400입니다. fast나 slow로 정할 수 있습니다. fast는 200, slow는 600에 해당합니다. easing 요소가 나타나는 방식을 정합니다. swing과 linear가 가능하며, 기본값은 swing입니다. complete 요소가 나타난 후 수행할 작업을 정합니다. 예제 1 버튼을 클릭하면 파란색 배경의 div ...

jQuery / Reference / .wrap()

jQuery / Reference / .wrap()

개요 .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 / .slideToggle()

jQuery / Reference / .slideToggle()

개요 .slideToggle()은 보이지 않는 요소는 아래쪽으로 서서히 나타나게 하고, 보이는 요소는 위쪽으로 서서히 사라지게 합니다. 문법 .slideToggle( ) duration 요소가 나타나거나 사라질 때까지 걸리는 시간입니다. 단위는 1/1000초, 기본값은 400입니다. fast나 slow로 정할 수 있습니다. fast는 200, slow는 600에 해당합니다. easing 요소가 나타나거나 사라지는 방식을 정합니다. swing과 linear가 가능하며, 기본값은 swing입니다. complete 요소가 나타나거나 ...

jQuery / Reference / .prepend()

jQuery / Reference / .prepend()

개요 .prepend()는 선택한 요소의 내용의 앞에 콘텐트를 추가합니다. 문법 .prepend( content ) 예제 1 순서 없는 목록 처음에 Dolor를 추가합니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <style> body { line-height: ...

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

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

jQuery / Reference / .wrapAll()

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

jQuery / Reference / .empty()

개요 .empty()는 선택한 요소의 내용을 지웁니다. 내용만 지울 뿐 태그는 남아있다는 것에 주의합니다. 문법 .empty() 예를 들어 다음과 같은 h1 요소가 있을 때 <h1>Lorem</h1> 다음과 같이 하면 $( 'h1' ).empty() 다음처럼 바뀝니다. <h1></h1> 예제 버튼을 클릭하면 p 요소의 내용이 지워집니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <style> ...

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

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