jQuery / Method / .slice() - 일치하는 요소의 일부분만 선택하는 메서드

.slice()

.slice()는 일치하는 요소의 일부분만 선택합니다.

문법

.slice( start [, end ] )

예를 들어

$( 'li' ).slice( 2 ).css( 'color', 'red' );

는 li 요소 중 3번째부터 빨간색으로 만듭니다.

$( 'li' ).slice( 2, 5 ).css( 'color', 'red' );

는 li 요소 중 3번째부터 5번째까지 빨간색으로 만듭니다.

$( 'li' ).slice( -4, -2 ).css( 'color', 'red' );

는 li 요소 중 뒤에서 4번째부터 뒤에서 3번째까지 빨간색으로 만듭니다.

예제

<!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>
      jQuery( document ).ready( function() {
        $( 'ol.a li' ).slice( 2, 4 ).css( 'color', 'red' );
        $( 'ol.b li' ).slice( -4, -2 ).css( 'color', 'red' );
      } );
    </script>
  </head>
  <body>
    <ol class="a">
      <li>One</li>
      <li>Two</li>
      <li>Three</li>
      <li>Four</li>
      <li>Five</li>
    </ol>
    <ol class="b">
      <li>One</li>
      <li>Two</li>
      <li>Three</li>
      <li>Four</li>
      <li>Five</li>
    </ol>
  </body>
</html>

Related Posts

jQuery / Method / .offset() - 선택한 요소의 좌표를 가져오거나 특정 좌표로 이동시키는 메서드

jQuery / Method / .offset() - 선택한 요소의 좌표를 가져오거나 특정 좌표로 이동시키는 메서드

.offset() .offset()은 선택한 요소의 좌표를 가져오거나 특정 좌표로 이동시킵니다. 문법 1 .offset() 선택한 요소의 좌표를 가져옵니다. 예를 들어 var jb = $( 'h1' ).offset(); 는 h1 요소의 좌표를 변수 jb에 저장합니다. 문법 2 .offset( coordinates ) 선택한 요소를 특정 위치로 이동시킵니다. 예를 들어 $( 'h1' ).offset( { left: 100, top: 50 } ); 은 h1 요소를 왼쪽에서 100px, 위에서 50px 위치로 ...

jQuery / Method / .hide() - 선택한 요소를 사라지게 하는 메서드

jQuery / Method / .hide() - 선택한 요소를 사라지게 하는 메서드

.hide() .hide()는 선택한 요소를 사라지게 합니다. 문법 1 .hide() 선택한 요소를 즉시 사라지게 합니다. 문법 2 .hide( duration ) duration : 사라지는 데 걸리는 시간입니다. slow, fast, 숫자를 넣을 수 있습니다. 숫자의 단위는 1000분의 1초입니다. 기본값은 400입니다. easing : 사라지는 방식입니다. swing과 linear가 가능합니다. 기본값은 swing입니다. complete : 사라진 다음 실행할 함수를 넣을 ...

jQuery / Plugin / jquery.toc / H 태그로 목차 만드는 플러그인

jQuery / Plugin / jquery.toc / H 태그로 목차 만드는 플러그인

jquery.toc jquery.toc는 HTML 문서에 있는 h1, h2 등 h 태그를 이용하여 자동으로 목차를 만들어주는 플러그인입니다. GitHub : https://github.com/ndabas/toc Download : http://ndabas.github.com/toc/assets/jquery.toc.zip 목차 클릭 시 부드럽게 이동하는 효과를 주고 싶다면 다른 플러그인을 사용하세요. 기본 사용법 h 태그가 많은 다음과 같은 HTML 문서를 만듭니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <style> body { font-family: Consolas, sans-serif; } a { color: blue; } </style> </head> <body> <h1>Lorem</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing ...

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 / Method / .remove() - 선택한 요소를 제거하는 메서드

jQuery / Method / .remove() - 선택한 요소를 제거하는 메서드

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

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 / Selector / :odd - 홀수 인덱스 요소를 선택하는 선택자

jQuery / Selector / :odd - 홀수 인덱스 요소를 선택하는 선택자

:odd :odd은 홀수 인덱스 요소를 선택하는 선택자입니다. 문법 $( ':odd' ) 예를 들어 $( 'p:odd' ) 는 홀수 인덱스인 p 요소를 선택합니다. 주의할 점은 인덱스가 0부터 시작한다는 것입니다. 예제 <!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> $( ...

jQuery / 요소가 순서대로 나타나게 하는 방법

jQuery / 요소가 순서대로 나타나게 하는 방법

.animate()로 요소를 나타내기 다음과 같이 간단한 예제를 만듭니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <style> body { box-sizing: border-box; margin: 0px; } .jb { height: 200px; padding: 20px; text-align: center; color: ...

jQuery / Plugin / AOS / 스크롤하면 애니메이션 효과와 함께 나타나는 요소 만드는 라이브러리

jQuery / Plugin / AOS / 스크롤하면 애니메이션 효과와 함께 나타나는 요소 만드는 라이브러리

AOS 세로로 긴 웹 페이지가 있습니다. 화면을 벗어나는 경우 스크롤하면 밑에 있는 콘텐츠를 볼 수 있습니다. 그 보여지는 콘텐츠에 애니메이션 효과를 주는 라이브러리가 AOS(Animate on scroll library)입니다. 나타나기, 회전하기, 확대하기 등 다양한 효과를 제공합니다. Fade animations fade, fade-up, fade-down, fade-left, fade-right, fade-up-right, fade-up-left, fade-down-right, fade-down-left Flip animations flip-up, flip-down, flip-left, flip-right Slide animations slide-up, slide-down, slide-left, slide-right Zoom animations zoom-in, ...

jQuery / Method / .slideDown() - 요소를 아래쪽으로 나타나게 하는 메서드

jQuery / Method / .slideDown() - 요소를 아래쪽으로 나타나게 하는 메서드

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