jQuery / Method / .get() - 선택한 요소를 배열로 가져오는 메서드

.get()

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

Related Posts

jQuery / Method / .addClass() - 클래스 값을 추가하는 메서드

jQuery / Method / .addClass() - 클래스 값을 추가하는 메서드

.addClass() .addClass()로 선택한 요소에 클래스 값을 추가할 수 있습니다. 문법 .addClass( className ) 클래스 값은 큰 따옴표 또는 작은 따옴표로 감쌉니다. $( 'h1' ).addClass( 'abc' ); 띄어쓰기로 구분하여 여러 개의 값을 추가할 수 있습니다. $( 'h1' ).addClass( 'ab cd ef' ); 페이지가 로드된 상태에서 클래스 값이 추가되는 것이므로, 추가되기 전의 모양에서 추가된 후의 모양으로 변하는 것을 방문자가 볼 ...

jQuery / HTML 문서와 연결하는 방법, 사용하는 방법

jQuery / HTML 문서와 연결하는 방법, 사용하는 방법

HTML 문서와 연결하기 CDN 이용하기 HTML 문서에 다음 코드를 추가합니다. <script src="//code.jquery.com/jquery-3.3.1.min.js"></script> 3.3.1은 버전입니다. 다른 버전을 사용하고 싶다면 숫자를 변경합니다. 다운로드 받아 연결하기 jQuery 다운로드는 여기에서 합니다. 압축된 파일도 있고, 압축되지 않은 파일도 있습니다. 그리고 HTML 문서에 다음 코드를 추가합니다. <script src="path/jquery-3.3.1.min.js"></script> path와 파일 이름은 적절히 변경합니다. jQuery 사용하기 다음은 ID가 jb인 h1 요소의 색을 빨간색으로 바꾸는 예제입니다. <!doctype html> <html lang="ko"> <head> <meta ...

jQuery / 특정 요소를 자식 요소로 갖지 않는 요소 선택하는 방법

jQuery / 특정 요소를 자식 요소로 갖지 않는 요소 선택하는 방법

특정 요소를 자식 요소로 갖는 요소를 선택하는 방법 jQuery의 :has 선택자를 이용해서 특정 요소를 자식 요소로 갖는 요소를 선택할 수 있습니다. 예를 들어 $( 'p:has( span )' ).css( 'color', 'red' ); 는 span 요소를 자식 요소로 갖고 있는 p 요소의 색을 빨간색으로 만듭니다. 특정 요소를 자식 요소로 갖지 않는 요소를 선택하는 방법 특정 요소를 자식 요소로 ...

jQuery / Method / .unwrap() - 선택한 요소의 상위 태그를 제거하는 메서드

jQuery / Method / .unwrap() - 선택한 요소의 상위 태그를 제거하는 메서드

.unwrap() .unwrap()은 선택한 요소의 상위 태그를 제거합니다. 문법 .unwrap() 예를 들어 $( 'h1' ).unwrap(); 은 h1 요소의 바로 상위의 태그를 제거합니다. 예제 1 h1 요소의 상위 태그인 div 태그를 제거합니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <style> div { ...

jQuery / Method / .animate() - 애니메이션 효과 만드는 메서드

jQuery / Method / .animate() - 애니메이션 효과 만드는 메서드

.animate .animate()는 애니메이션 효과를 만듭니다. 문법 .animate( properties ) properties 애니메이션 효과를 줄 속성을 정합니다. 가능한 속성은 다음과 같습니다. backgroundPositionX backgroundPositionY borderBottomWidth borderLeftWidth borderRightWidth borderSpacing borderTopWidth borderWidth bottom fontSize height left letterSpacing lineHeight margin marginBottom marginLeft marginRight marginTop maxHeight maxWidth minHeight minWidth opacity outlineWidth padding paddingBottom paddingLeft paddingRight paddingTop right textIndent top width wordSpacing duration 애니메이션 효과를 완료할 때까지 걸리는 시간입니다. 단위는 1/1000초, 기본값은 400입니다. fast나 slow로 정할 수 있습니다. fast는 200, slow는 600에 해당합니다. easing 애니메이션 효과의 방식을 정합니다. swing과 linear이 가능하며, 기본값은 swing입니다. complete 요소가 사라진 후 ...

jQuery / Method / .hover()

jQuery / Method / .hover()

.hover() .hover()로 선택한 요소에 마우스 포인터를 올렸을 때, 그리고 마우스 포인터가 그 요소를 벗어났을 때 어떤 효과를 넣을 수 있습니다. 문법 .hover( handlerIn(eventObject), handlerOut(eventObject) ) handlerIn(eventObject)에는 요소에 마우스 포인터를 올렸을 때의 효과를, handlerOut(eventObject)에는 마우스 포인터가 요소를 벗어났을 때의 효과를 넣습니다. 예제 span 요소에 마우스 포인터를 올리면 글자가 커지고, 포인터가 벗어나면 다시 원래대로 돌아옵니다. <!doctype html> <html lang="ko"> ...

jQuery / Method / .after() - 선택한 요소 뒤에 새 요소를 추가하거나, 다른 곳에 있는 요소를 이동시키는 메서드

jQuery / Method / .after() - 선택한 요소 뒤에 새 요소를 추가하거나, 다른 곳에 있는 요소를 이동시키는 메서드

.after() .after()는 선택한 요소 뒤에 새 요소를 추가하거나, 다른 곳에 있는 요소를 이동시킬 수 있습니다. 문법 .after( content ) 예를 들어 $( 'h1' ).after( '<p>Hello</p>' ); 는 h1 요소 뒤에 Hello를 내용으로 갖는 p 요소를 추가합니다. $( 'h1.a' ).after( $( 'p.b' ) ); 는 클래스 값으로 a를 갖는 h1 요소 뒤에 클래스 값으로 b를 갖는 ...

jQuery / Plugin / jQuery Smooth Scroll

jQuery / Plugin / jQuery Smooth Scroll

jQuery Smooth Scroll jQuery Smooth Scroll은 HTML 내에서 링크를 클릭하여 이동할 때, 부드럽게 이동하도록 만들어주는 플러그인입니다. GitHub : https://github.com/kswedberg/jquery-smooth-scroll Download : https://github.com/kswedberg/jquery-smooth-scroll/archive/master.zip 기본 사용법 다음처럼 문서 내에서 이동하는 링크를 가진 HTML 문서를 만듭니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <style> body { font-family: Consolas, sans-serif; } a { color: blue; } p { margin-bottom: 800px; } </style> </head> <body> <ul> <li><a href="#ipsum">Ipsum</a></li> <li><a href="#dolor">Dolor</a></li> </ul> <h1>Lorem</h1> <p>Lorem ipsum dolor sit amet, ...

jQuery / Property / .length - 선택한 요소의 개수를 반환하는 속성

jQuery / Property / .length - 선택한 요소의 개수를 반환하는 속성

.length .length는 선택한 요소의 개수를 반환하는 속성입니다. 예를 들어 $( 'div' ).length 는 div 요소의 개수입니다. 예제 버튼을 클릭하면 li 요소의 개수를 출력합니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <script src="//code.jquery.com/jquery-1.11.0.js"></script> <script> $( document ).ready( function() { ...

jQuery / Plugin / 유용한 플러그인 모음

jQuery / Plugin / 유용한 플러그인 모음

Slider bxSlider slick Uncategorized Smooth Scroll : 한 페이지에 있는 링크 사이를 부드럽게 이동하게 해주는 플러그인 jQuery Actual : 보이지 않는 요소의 크기를 가져오는 플러그인 vTicker : 아래에서 위로 스크롤되는 티커