.has()

1 개요
2 문법
3 예제

개요

.has()로 특정 요소를 가지고 있는 요소를 선택할 수 있습니다.

문법

.has( selector )

예를 들어 다음은 span 요소를 가지고 있는 h1 요소를 를 선택합니다.

$( 'h1' ).has( 'span' )

예제

span 요소를 포함하고 있는 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>
      $( document ).ready( function() {
        $( 'h1' ).has( 'span' ).css( 'color', 'red' );
      } );
    </script>
  </head>
  <body>
    <h1>Lorem Ipsum Dolor</h1>
    <h1>Lorem <span>Ipsum</span> Dolor</h1>
  </body>
</html>

jQuery / Reference / :button

:button은 type이 button인 요소를 선택하는 선택자입니다.

jQuery / Reference / .css()

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

jQuery / Reference / .width()

.width()는 선택한 요소의 가로 크기를 반환하거나, 가로 크기를 변경합니다.

jQuery / Reference / .addBack()

개요 .addBack()은 현재 선택한 요소와 함께 이전에 선택한 요소도 선택하게 합니다. 문법 .addBack( ) 예를 들어 다음은 ul의 하위 요소 중 li를 선택하고, 추가적으로 처음 선택했던 ul을 선택합니다. $( 'ul' ).find( 'li' ).addBack() 예제 div 요소 안에서 클래스 값이 ip인 p 요소를 찾아 선택을 하고, 추가로 div 요소도 선택하여 테두리를 만듭니다. <!doctype html> <html lang="ko"> <head> ...

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

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

jQuery / Reference / .appendTo()

개요 .appendTo()는 선택한 요소를 다른 요소의 종료 태그 앞으로 이동시킵니다. 문법 .appendTo( target ) 예제 abc를 클래스 값으로 가지는 span 요소를 h1 요소의 </h1> 앞으로 이동시킵니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <style> body { ...

jQuery / Reference / .slideUp()

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