jQuery 강좌 | Methods > .find()

.find()는 원하는 선택자를 찾아서 선택합니다.

단순히 CSS 작업을 위한 선택은 CSS 선택자로 하는 게 편하지만, 사용자가 입력한 값에 따라 선택자가 바뀌는 등 변수를 이용해야 할 때 유용합니다.

문법

.find( selector )

예제 1

http://book.cmsfactory.net/jQuery/V01/Methods/find-01.html

p 요소 안의 ip를 클래스 값으로 가진 span 요소를 선택하여 글자 크기를 크게 하는 예제입니다.

<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>jQuery Method | .find()</title>
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script>
      $( document ).ready( function() {
        $( 'p' ).find( 'span.ip' ).css( 'font-size', '2em');
      } );
    </script>
  </head>
  <body>
    <p>
      <span class="lo">Lorem</span>
      <span class="ip">Ipsum</span>
      <span class="do">Dolor</span>
    </p>
  </body>
</html>

예제 2

http://book.cmsfactory.net/jQuery/V01/Methods/find-02.html

사용자에게 값을 받아 그에 따라 다른 글자가 커지는 예제입니다. lo를 입력하면 Lorem, ip를 입력하면 Ipsum, do를 입력하면 Dolor가 커집니다.

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>jQuery Method | .find()</title>
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script>
      var jb = prompt( 'Input lo or ip or do', '');
      $( document ).ready( function() {
        $( 'p' ).find( 'span.' + jb ).css( 'font-size', '2em');
      } );
    </script>
  </head>
  <body>
    <p>
      <span class="lo">Lorem</span>
      <span class="ip">Ipsum</span>
      <span class="do">Dolor</span>
    </p>
  </body>
</html>

Category

Created on 2014-03-13 14:08 | Updated on 2015-07-17 01:09

이 글을 공유하기

Kakao