Lekcja 2: Selektory jQuery

Jedną z najpotężniejszych funkcji jQuery jest możliwość łatwego wybierania elementów HTML na stronie za pomocą selektorów. jQuery wykorzystuje składnię selektorów CSS, którą już możesz znać, co czyni proces wybierania elementów bardzo intuicyjnym. Po wybraniu elementów możesz na nich wykonywać różne operacje (metody jQuery).

Podstawowe Selektory

jQuery obsługuje większość popularnych selektorów CSS:

• Selektor elementu (tagu): Wybiera wszystkie elementy o danym tagu HTML.

  $("p") // Wybiera wszystkie paragrafy (<p>)
  $("div") // Wybiera wszystkie elementy <div>
  $("h2") // Wybiera wszystkie nagłówki <h2>

• Selektor ID: Wybiera pojedynczy element o określonym atrybucie id. Pamiętaj, że ID powinno być unikalne na stronie.

  $("#przycisk-glowny") // Wybiera element z id="przycisk-glowny"
  $("#kontener") // Wybiera element z id="kontener"

• Selektor klasy: Wybiera wszystkie elementy posiadające określoną klasę CSS.

  $(".wiadomosc") // Wybiera wszystkie elementy z class="wiadomosc"
  $(".produkt.promocja") // Wybiera elementy mające obie klasy: "produkt" i "promocja"

• Selektor uniwersalny: Wybiera wszystkie elementy na stronie.

  $("*") // Wybiera wszystkie elementy

• Selektor wielokrotny: Pozwala wybrać elementy pasujące do któregokolwiek z podanych selektorów, oddzielonych przecinkiem.

  $("h1, h2, p") // Wybiera wszystkie nagłówki h1, h2 oraz paragrafy
  $("#naglowek, .stopka") // Wybiera element z id="naglowek" oraz wszystkie elementy z class="stopka"

Selektory Atrybutów

Możesz wybierać elementy na podstawie ich atrybutów:

• [atrybut]: Wybiera elementy posiadające dany atrybut.

  $("[href]") // Wybiera wszystkie elementy z atrybutem href (np. <a>, <link>)
  $("[disabled]") // Wybiera wszystkie elementy z atrybutem disabled

• [atrybut=wartosc]: Wybiera elementy, których dany atrybut ma dokładnie określoną wartość.

  $("[type=\'text\']") // Wybiera inputy tekstowe
  $("a[target=\'_blank\']") // Wybiera linki otwierane w nowej karcie

• [atrybut!=wartosc]: Wybiera elementy, których dany atrybut nie ma określonej wartości (lub nie ma go wcale).

  $("input[type!=\'button\']") // Wybiera inputy, które nie są przyciskami

• [atrybut^=wartosc]: Wybiera elementy, których wartość atrybutu zaczyna się od podanej wartości.

  $("a[href^=\'https\']") // Wybiera linki zaczynające się od "https"

• [atrybut$=wartosc]: Wybiera elementy, których wartość atrybutu kończy się na podaną wartość.

  $("img[src$=\'.jpg\']") // Wybiera obrazki z rozszerzeniem .jpg

• [atrybut*=wartosc]: Wybiera elementy, których wartość atrybutu zawiera podaną wartość.

  $("a[href*=\'google.com\']") // Wybiera linki zawierające "google.com"

Selektory Hierarchiczne (Relacyjne)

Pozwalają wybierać elementy na podstawie ich relacji z innymi elementami w drzewie DOM:

• Potomek (przodek potomek): Wybiera wszystkie elementy potomek, które znajdują się wewnątrz elementów przodek (na dowolnym poziomie zagnieżdżenia).

  $("div p") // Wybiera wszystkie paragrafy (<p>) wewnątrz jakiegokolwiek <div>
  $("ul li a") // Wybiera wszystkie linki (<a>) wewnątrz elementów listy (<li>), które są wewnątrz listy nieuporządkowanej (<ul>)

• Dziecko (rodzic > dziecko): Wybiera wszystkie elementy dziecko, które są bezpośrednimi dziećmi elementów rodzic.

  $("ul > li") // Wybiera tylko te elementy <li>, które są bezpośrednimi dziećmi <ul>
  $("div > p") // Wybiera paragrafy będące bezpośrednimi dziećmi <div>

• Następny sąsiad (poprzednik + nastepnik): Wybiera element nastepnik, który jest bezpośrednio po elemencie poprzednik i ma tego samego rodzica.

  $("h2 + p") // Wybiera paragraf bezpośrednio po nagłówku h2
  $("li + li") // Wybiera elementy listy, które są bezpośrednio po innym elemencie listy

• Wszyscy następni sąsiedzi (poprzednik ~ sasiedzi): Wybiera wszystkie elementy sasiedzi, które występują po elemencie poprzednik i mają tego samego rodzica.

  $("h2 ~ p") // Wybiera wszystkie paragrafy występujące po nagłówku h2 (na tym samym poziomie)

Filtry jQuery

jQuery dodaje własne filtry (pseudo-klasy), które rozszerzają możliwości selektorów CSS. Zaczynają się one od dwukropka (:).

Podstawowe Filtry

• :first: Wybiera pierwszy pasujący element.

  $("li:first") // Wybiera pierwszy element <li> na stronie

• :last: Wybiera ostatni pasujący element.

  $("p:last") // Wybiera ostatni paragraf na stronie

• :even: Wybiera elementy o parzystych indeksach (licząc od 0).

  $("tr:even") // Wybiera parzyste wiersze tabeli (pierwszy, trzeci, itd.)

• :odd: Wybiera elementy o nieparzystych indeksach.

  $("tr:odd") // Wybiera nieparzyste wiersze tabeli (drugi, czwarty, itd.)

• :eq(index): Wybiera element o określonym indeksie (licząc od 0).

  $("li:eq(2)") // Wybiera trzeci element <li> (indeks 2)

• :gt(index): Wybiera elementy o indeksie większym niż podany.

  $("li:gt(1)") // Wybiera elementy <li> od trzeciego wzwyż (indeksy 2, 3, ...)

• :lt(index): Wybiera elementy o indeksie mniejszym niż podany.

  $("li:lt(3)") // Wybiera pierwsze trzy elementy <li> (indeksy 0, 1, 2)

• :not(selektor): Wybiera elementy, które nie pasują do podanego selektora.

  $("input:not(:checked)") // Wybiera inputy (checkbox/radio), które nie są zaznaczone
  $("p:not(.specjalny)") // Wybiera paragrafy, które nie mają klasy "specjalny"

• :header: Wybiera wszystkie elementy nagłówkowe (h1, h2, ..., h6).

  $(":header") // Wybiera wszystkie nagłówki

• :animated: Wybiera elementy, które są aktualnie animowane przez jQuery.
• :focus: Wybiera element, który aktualnie ma fokus.

Filtry Treści

• :contains(tekst): Wybiera elementy, które zawierają podany tekst (wielkość liter ma znaczenie).

  $("p:contains(\'Witaj\')") // Wybiera paragrafy zawierające słowo "Witaj"

• :empty: Wybiera elementy, które nie mają dzieci (ani tekstu).

  $("td:empty") // Wybiera puste komórki tabeli

• :has(selektor): Wybiera elementy, które zawierają przynajmniej jeden element pasujący do podanego selektora.

  $("div:has(p)") // Wybiera divy, które zawierają jakikolwiek paragraf

• :parent: Wybiera elementy, które mają przynajmniej jedno dziecko (element lub tekst). Jest to przeciwieństwo :empty.

Filtry Widoczności

• :visible: Wybiera elementy, które są widoczne.
• :hidden: Wybiera elementy, które są ukryte (np. mają display: none;, visibility: hidden;, są inputami typu hidden, lub mają szerokość/wysokość 0).

Filtry Formularzy

• :input: Wybiera wszystkie elementy <input>, <textarea>, <select> i <button>.
• :text, :password, :radio, :checkbox, :submit, :reset, :button, :image, :file: Wybierają inputy określonego typu.
• :enabled, :disabled: Wybierają elementy formularza, które są włączone/wyłączone.
• :checked: Wybiera zaznaczone checkboxy i radio buttony.
• :selected: Wybiera zaznaczone opcje w elemencie <select>.

<!DOCTYPE html>
<html>
<head>
    <title>Test Selektorów jQuery</title>
    <style>
        .widoczny { border: 1px solid green; padding: 5px; }
    </style>
</head>
<body>
    <h1>Testowanie Selektorów</h1>
    <ul>
        <li>Element 1</li>
        <li class="specjalny">Element 2 (specjalny)</li>
        <li>Element 3</li>
        <li class="specjalny">Element 4 (specjalny)</li>
        <li>Element 5</li>
    </ul>

    <p>To jest pierwszy paragraf.</p>
    <p style="display: none;">To jest ukryty paragraf.</p>
    <p>To jest drugi paragraf.</p>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script>
        $(function() {
            // 1. Zmień kolor wszystkich li na niebieski
            $("li").css(\'color\', \'blue\');
            console.log("Zmieniono kolor li na niebieski.");

            // 2. Pogrub elementy li z klasą "specjalny"
            $("li.specjalny").css(\'font-weight\', \'bold\');
            // lub $(".specjalny").css(\'font-weight\', \'bold\'); jeśli klasa jest tylko na li
            console.log("Pogrubiono specjalne li.");

            // 3. Zmień tekst trzeciego elementu li (indeks 2)
            $("li:eq(2)").text(\'Zmieniony element\');
            console.log("Zmieniono tekst trzeciego li.");

            // 4. Dodaj klasę "widoczny" do widocznych paragrafów
            $("p:visible").addClass(\'widoczny\');
            console.log("Dodano klasę \'widoczny\' do widocznych paragrafów.");
        });
    </script>
</body>
</html>