ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • jQuery - .get()
    jQuery 2020. 6. 23. 16:08

    .get()

     

     - 선택한 요소를 배열(Array)로 가져온다.

     

    문법

    .get()

    선택한 모든 요소를 가져온다.

    .get(index)

    선택한 요소 중 특정한 인덱스만 가져온다.

     


    예제1

     

     - 모든 li 요소를 jb배열로 가져온 후, 각 요소의 내용을 출력

    <!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() {
          
            var jb = $( 'li' ).get();
            
            for ( var i = 0; i < jb.length; i++) {
            
              $( 'div' ).append( '<p>' + jb[i].innerHTML + '</p>' );
              
            }
            
          } );
          
        </script>
        
      </head>
      
      <body>
      
        <ul>
        
          <li>Lorem</li>
          
          <li>Ipsum</li>
          
        </ul>
        
        <div></div>
        
      </body>
      
    </html>

     

    예제2

     

     - li 요소 중 첫번째만 가져와서 내용을 출력

    <!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() {
          
            var jb = $( 'li' ).get( 0 );
            
            $( 'ul' ).after( '<p>' + jb.innerHTML + '</p>' );
            
          } );
          
        </script>
        
      </head>
      
      <body>
      
        <ul>
        
          <li>Lorem</li>
          
          <li>Ipsum</li>
        </ul>
      </body>
    </html>

     

    'jQuery' 카테고리의 다른 글

    jQuery - .hide()  (0) 2020.06.23
    jQuery - .has()  (0) 2020.06.23
    jQuery - .find()  (0) 2020.06.23
    jQuery - .fadeToggle()  (0) 2020.06.23
    jQuery - .fadeOut()  (0) 2020.06.23

    댓글

Designed by Tistory.