jQuery Academy · 강의

.not()으로 요소 제외하기

.not() 메서드를 익혀 일치하는 집합에서 특정 요소를 정확하게 제외하고 선택을 세분화하며 일부 요소에 대한 의도하지 않은 작업을 방지합니다.

.not()으로 요소 제외하기은(는) CoddyKit의 무료 jQuery Academy 강의입니다. 이것은 3개 중 3번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 jQuery Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. jQuery Academy 강의에는 총 3개의 강의가 포함되어 있습니다.

.not() 소개

환영합니다! 이번 레슨에서는 jQuery의 강력한 .not() 메서드를 익혀 보겠습니다. 이 메서드는 요소 선택 결과를 다듬는 데 필수적입니다.

.not() 메서드를 사용하면 일치한 요소 집합에서 특정 요소를 제외할 수 있으므로, 작업의 영향을 받을 요소를 정밀하게 제어할 수 있습니다.

선택자 문자열로 제외하기

.not()를 사용하는 가장 일반적인 방법은 CSS 선택자 문자열을 전달하는 것입니다. 그러면 jQuery가 현재 선택 결과에서 새 선택자와 일치하는 요소를 제거합니다.

먼저 넓은 범위로 선택합니다.
그런 다음 .not()를 사용하여 원하지 않는 요소를 걸러냅니다.

'모든 것'을 선택한 다음 '제거할 것'을 지정하는 편이 더 쉬울 때 유용합니다.

클래스 선택자와 함께 사용하는 .not()

다음 예제를 시도해 보세요. 모든 div 요소를 선택한 다음 .not()를 사용하여 클래스 .special이 있는 요소를 제외하겠습니다. 특수하지 않은 div만 스타일이 적용됩니다.

<!DOCTYPE html>
<html>
<head>
<style>
  .red { color: red; }
</style>
</head>
<body>
  <div class="box">Item 1</div>
  <div class="box special">Item 2</div>
  <div class="box">Item 3</div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
  <script>
    $(document).ready(function(){
      // Select all .box divs, then exclude the one with .special
      $('.box').not('.special').addClass('red');
    });
  </script>
</body>
</html>

특정 요소 제외하기

선택자 문자열 외에도 DOM 요소나 jQuery 객체를 .not()에 직접 전달할 수 있습니다.

현재 선택 결과에서 제외하려는 정확한 요소(또는 요소들)에 대한 참조가 이미 있을 때 편리합니다.

요소 참조와 함께 사용하는 .not()

이 예제에서는 모든 목록 항목(<li>)을 선택합니다. 그런 다음 ID(#item2)로 특정 항목을 식별하고 .not()를 사용하여 스타일 적용 작업에서 제외합니다.

<!DOCTYPE html>
<html>
<head>
<style>
  .bold { font-weight: bold; }
</style>
</head>
<body>
  <ul>
    <li>List Item 1</li>
    <li id="item2">List Item 2</li>
    <li>List Item 3</li>
  </ul>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
  <script>
    $(document).ready(function(){
      // Select all <li>, then exclude the specific #item2
      $('li').not($('#item2')).addClass('bold');
    });
  </script>
</body>
</html>

함수를 사용한 사용자 지정 제외

매우 동적이거나 복잡한 제외 논리를 적용하려면 .not()에 함수를 전달할 수 있습니다.

함수는 현재 집합의 각 요소에 대해 실행됩니다.
함수가 true를 반환하면 해당 요소는 제외됩니다.
this는 현재 처리 중인 DOM 요소를 가리킵니다.

함수와 함께 사용하는 .not() 예제

여기서는 'exclude'라는 단어를 포함하는 문단을 제외하고 모든 문단에 스타일을 적용하려고 합니다. 함수가 각 문단의 텍스트 내용을 확인합니다.

<!DOCTYPE html>
<html>
<head>
<style>
  .italic { font-style: italic; }
</style>
</head>
<body>
  <p>This is a normal paragraph.</p>
  <p>This paragraph contains 'exclude'.</p>
  <p>Another normal paragraph here.</p>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
  <script>
    $(document).ready(function(){
      $('p').not(function() {
        // Exclude paragraphs containing 'exclude'
        return $(this).text().includes('exclude');
      }).addClass('italic');
    });
  </script>
</body>
</html>

정밀한 선택을 위한 .not() 연결

여러 .not() 호출을 연결하거나 .not()를 다른 필터링 메서드와 결합하여 매우 정밀하게 선택할 수 있습니다.

각 .not() 호출은 현재 요소 집합을 더욱 다듬어, 진행할수록 더 많은 요소를 제거합니다. 필요하지 않은 요소의 층을 하나씩 벗겨 낸다고 생각해 보세요.

.not()를 사용해야 하는 경우

다음과 같은 상황에서 .not()가 특히 유용합니다.

처음에 넓은 범위로 선택한 후 몇 가지 특정 유형을 제거하려는 경우
직접 참조를 이미 가지고 있는 요소를 제외해야 하는 경우
'이것들을 제외한 모든 것'이라고 표현하는 편이 코드를 더 명확하고 읽기 쉽게 만드는 경우

복잡한 부정 선택자를 처음부터 작성하지 않고도 선택 범위를 우아하게 좁힐 수 있습니다.

.not() 사용 빠른 확인

다음 HTML을 살펴보세요. ID가 "intro"인 요소를 제외하고 모든 <p> 요소를 올바르게 선택하는 jQuery 코드 조각은 무엇인가요?

<div>
  <p>Paragraph 1</p>
  <p id="intro">Introduction</p>
  <p>Paragraph 3</p>
</div>

.not() 완전 정복 복습

jQuery의 .not() 메서드를 성공적으로 익혔습니다!

.not()는 다음 기준에 따라 요소를 제외하여 선택 결과를 다듬는 데 필수적이라는 것을 배웠습니다.

CSS 선택자 문자열(예: .not('.hide'))
특정 DOM 요소 또는 jQuery 객체(예: .not(myElement))
사용자 지정 동적 제외 논리를 위한 함수

계속 연습하여 jQuery 선택을 더 정확하고 효율적으로 만들어 보세요!

자주 묻는 질문

“.not()으로 요소 제외하기” 강의는 무료인가요?

네 — “.not()으로 요소 제외하기” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 jQuery Academy 강의 전체를 잠금 해제할 수 있습니다. jQuery Academy 강의에는 총 3개의 강의가 포함되어 있습니다.

“.not()으로 요소 제외하기”에서 뭘 배우나요?

.not() 메서드를 익혀 일치하는 집합에서 특정 요소를 정확하게 제외하고 선택을 세분화하며 일부 요소에 대한 의도하지 않은 작업을 방지합니다. 브라우저에서 직접 실행하는 실습 코드로 jQuery Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

jQuery Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 jQuery Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 3개 중 3번째 강의입니다.

“.not()으로 요소 제외하기” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 jQuery Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 jQuery Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

← jQuery Academy(으)로 돌아가기