jQuery Academy · Lekcja

Wykluczanie elementów za pomocą .not()

Proszę opanować metodę .not(), aby precyzyjnie wykluczać określone elementy z dopasowanego zbioru, udoskonalać selekcję i zapobiegać niezamierzonym operacjom na wybranych elementach.

Wykluczanie elementów za pomocą .not() to bezpłatna lekcja jQuery Academy na CoddyKit. To lekcja 3 z 3. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej jQuery Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs jQuery Academy zawiera 3 lekcji w sumie.

Wprowadzenie do .not()

Witaj! W tej lekcji opanujesz zaawansowaną metodę jQuery .not(). Jest ona niezbędna do doprecyzowywania wyboru elementów.

Metoda .not() pozwala wykluczać określone elementy ze zbioru dopasowanych elementów, zapewniając precyzyjną kontrolę nad tym, na które elementy wpływają wykonywane operacje.

Wykluczanie za pomocą ciągu selektora

Najczęściej używa się .not(), przekazując ciąg selektora CSS. jQuery usunie wtedy z bieżącego wyboru wszystkie elementy pasujące do tego nowego selektora.

Najpierw wybierz elementy szeroko.
Następnie użyj .not(), aby odfiltrować niepożądane elementy.

Jest to przydatne, gdy łatwiej jest wybrać „wszystko”, a następnie określić, co należy „usunąć”.

.not() z selektorem klasy

Wypróbuj ten przykład. Wybierzemy wszystkie elementy div, a następnie użyjemy .not(), aby wykluczyć te z klasą .special. Styl zostanie zastosowany tylko do elementów div bez tej klasy.

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

Wykluczanie określonych elementów

Oprócz ciągu selektora można również bezpośrednio przekazać do .not() element DOM lub obiekt jQuery.

Jest to przydatne, gdy mają już Państwo odwołanie do dokładnie tego elementu (lub elementów), który chcą wykluczyć z bieżącego wyboru.

.not() z odwołaniem do elementu

W tym przykładzie wybieramy wszystkie elementy listy (<li>). Następnie identyfikujemy konkretny element na podstawie jego identyfikatora (#item2) i używamy .not(), aby wykluczyć go z operacji stylowania.

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

Niestandardowe wykluczanie za pomocą funkcji

W przypadku bardzo dynamicznej lub złożonej logiki wykluczania można przekazać do .not() funkcję.

Funkcja jest uruchamiana dla każdego elementu w bieżącym zbiorze.
Jeśli funkcja zwróci true, element zostanie wykluczony.
this wskazuje bieżący przetwarzany element DOM.

.not() z funkcją — przykład

Chcemy tutaj zastosować styl do wszystkich akapitów z wyjątkiem tych, które zawierają słowo „exclude”. Funkcja sprawdza zawartość tekstową każdego akapitu.

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

Łączenie .not() w celu uzyskania precyzji

Można łączyć wiele wywołań .not() lub zestawiać .not() z innymi metodami filtrowania, aby tworzyć bardzo precyzyjne wybory.

Każde wywołanie .not() dodatkowo uściśla bieżący zbiór elementów, usuwając kolejne z nich. Można myśleć o tym jak o stopniowym zdejmowaniu warstw elementów, których nie potrzebują Państwo w wyborze.

Kiedy używać .not()

.not() jest niezwykle przydatne w sytuacjach, gdy:

Mają Państwo szeroki wybór początkowy i chcą usunąć kilka określonych typów elementów.
Muszą Państwo wykluczyć element, do którego mają już bezpośrednie odwołanie.
Wyrażenie „wszystkie oprócz tych” sprawia, że kod jest jaśniejszy i czytelniejszy.

To elegancki sposób na zawężenie wyboru bez konieczności wcześniejszego zapisywania złożonych selektorów negujących.

Szybkie sprawdzenie: używanie .not()

Rozważ poniższy kod HTML. Który fragment kodu jQuery poprawnie wybierze wszystkie elementy <p> z wyjątkiem tego o identyfikatorze "intro"?

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

Podsumowanie: opanowanie .not()

Opanowali już Państwo metodę jQuery .not()!

Dowiedzieli się Państwo, że .not() ma kluczowe znaczenie dla uściślania wyboru przez wykluczanie elementów na podstawie:

ciągu selektora CSS (np. .not('.hide')),
konkretnego elementu DOM lub obiektu jQuery (np. .not(myElement)),
funkcji implementującej niestandardową, dynamiczną logikę wykluczania.

Ćwicz dalej, aby wybierać elementy jQuery jeszcze precyzyjniej i wydajniej!

Często zadawane pytania

Czy lekcja „Wykluczanie elementów za pomocą .not()” jest bezpłatna?

Tak — pełny tekst „Wykluczanie elementów za pomocą .not()” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu jQuery Academy, przejdź na CoddyKit PRO. Kurs jQuery Academy zawiera 3 lekcji w sumie.

Co nauczysz się w „Wykluczanie elementów za pomocą .not()”?

Proszę opanować metodę .not(), aby precyzyjnie wykluczać określone elementy z dopasowanego zbioru, udoskonalać selekcję i zapobiegać niezamierzonym operacjom na wybranych elementach. Ćwiczysz jQuery Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć jQuery Academy?

Nie wymagamy żadnego doświadczenia. jQuery Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 3 z 3.

Ile czasu zajmuje lekcja „Wykluczanie elementów za pomocą .not()”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji jQuery Academy?

Tak. Każda lekcja jQuery Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

Tworzenie niestandardowych pseudoselektorów
Zaawansowane filtrowanie za pomocą .filter()
Wykluczanie elementów za pomocą .not()

← Powrót do jQuery Academy