jQuery 강좌 | Selectors > :contains()

:contains()는 특정 텍스트를 포함한 요소를 선택해주는 jQuery 선택자입니다.

문법

jQuery( ':contains(text)' )

텍스트 포함 여부를 따질 때 대소문자를 구분한다는 점에 주의합니다.

예제

http://book.cmsfactory.net/jQuery/V01/Selectors/contains-01.html

jb를 포함한 요소를 선택해서 글자를 빨간색으로 만드는 예제입니다.

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>jQuery Selectors | :contains()</title>
    <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
    <script>
      $( document ).ready( function() {
        $( 'p:contains("jb")' ).css( 'color', 'red' );
      } );
    </script>
  </head>
  <body>
    <p>Lorem ipsum dolor sit amet.</p>
    <p>Aenean nec mollis jb nulla.</p>
    <p>Phasellus JB lacinia tempus mauris eu laoreet.</p>
    <p>Proin gravida velit dictum jbdui consequat.</p>
  </body>
</html>

첫번째 문단은 jb가 없어서, 세번째 문단은 jb가 있지만 대문자여서 선택되지 않습니다.

Category

Created on 2014-04-19 17:24 | Updated on 2015-07-17 00:45

이 글을 공유하기

Kakao