Objašnjeni jQuery selektori: Selektori razreda, ID Selektori i Više

Izbornici jQuery

jQuery koristi birače u stilu CSS-a za odabir dijelova ili elemenata HTML stranice. Tada vam omogućuje da učinite nešto s elementima pomoću jQuery metoda ili funkcija.

Koristiti jedan od tih selektora, upišite znak za dolar i zagrade nakon nje: $(). Ovo je skraćenica za jQuery()funkciju. Unutar zagrada dodajte element koji želite odabrati. Možete koristiti jednostruke ili dvostruke navodnike. Nakon toga dodajte točku nakon zagrada i metode koju želite koristiti.

U jQueryju, odabiri klase i ID-a slični su onima u CSS-u. Idemo na brz pregled toga prije nego što nastavimo.

Selektor ID-a u CSS-u

Selektor CSS ID primjenjuje stilove na određeni html element. Birač CSS ID-a mora se podudarati s atributom ID HTML elementa. Za razliku od klasa, koje se mogu primijeniti na više elemenata na web mjestu, određeni ID može se primijeniti samo na jedan pojedinačni element na web mjestu. CSS ID nadjačat će svojstva klase CSS. Da biste odabrali element s određenim id-om, napišite znak za raspršivanje (#), a zatim id elementa.

Sintaksa

#specified_id { /* styles */ }

Možete kombinirati selektor ID-a s drugim vrstama selektora kako biste oblikovali vrlo određeni element.

section#about:hover { color: blue; } div.classname#specified_id { color: green; }

Napomena o osobnim iskaznicama

Treba izbjegavati ID prilikom oblikovanja, ako je moguće. Budući da ima visoku specifičnost i može se nadjačati samo ako umetnete stilove ili dodate stilove . Težina ID-a prevladava birače klasa i selektore tipova.

Zapamtite, selektor ID mora se podudarati s atributom ID HTML elementa.

Specifičnost

Izbornici ID-a imaju visoku specifičnost zbog čega ih je teško nadjačati. Predavanja imaju puno nižu specifičnost i općenito su preferirani način oblikovanja elemenata kako bi se izbjegli problemi sa specifičnostima.

Evo primjera jQuery metode koja odabire sve elemente odlomka i dodaje im klasu "selected":

This is a paragraph selected by a jQuery method.

This is also a paragraph selected by a jQuery method.

$("p").addClass("selected");

Ok, natrag na jQuery

U jQueryju su birači klase i ID-a isti kao u CSS-u. Ako želite odabrati elemente s određenom klasom, upotrijebite točku ( .) i naziv klase. Ako želite odabrati elemente s određenim ID-om, upotrijebite simbol za raspršivanje ( #) i naziv ID-a. Imajte na umu da HTML ne razlikuje velika i mala slova, stoga je najbolja praksa da HTML oznake i CSS birači budu mala.

Odabir po razredu:

Paragraph with a class.

$(".p-with-class").css("color", "blue"); // colors the text blue

Odabir prema ID-u:

  • List item with an ID.
  • $("#li-with-id").replaceWith("

    Socks

    ");

    Također možete odabrati određene elemente zajedno s njihovim klasama i ID-ovima:

    Odabir po razredu

    Ako želite odabrati elemente s određenom klasom, upotrijebite točku (.) I naziv klase.

    Paragraph with a class.

    $(".pWithClass").css("color", "blue"); // colors the text blue

    Također možete koristiti selektor klase u kombinaciji s nazivom oznake da biste bili precizniji.

    
        
      My Wish List
    `

    $("ul.wishList").append("
  • New blender
  • ");

    Odabir prema ID-u

    Ako želite odabrati elemente s određenom vrijednošću ID-a, upotrijebite hash simbol (#) i naziv ID-a.

  • List item with an ID.
  • $("#liWithID").replaceWith("

    Socks

    ");

    Kao i kod odabira klase, to se također može koristiti u kombinaciji s nazivom oznake.

    News Headline

    $("h1#headline").css("font-size", "2em");

    Selektori koji djeluju kao filtri

    Postoje i selektori koji djeluju kao filtri - obično započinju dvotočkama. Na primjer, :firstselektor odabire element koji je prvo dijete njegovog roditelja. Evo primjera neuređenog popisa s nekim stavkama popisa. Selektor jQuery ispod popisa odabire prvog

  • element na popisu - stavka popisa „Jedan“ - a zatim koristi .cssmetodu za pretvaranje teksta u zeleno.

    
         
    • One
    • Two
    • Three
    $("li:first").css("color", "green");

    Napomena: Ne zaboravite da primjena css-a u JavaScript-u nije dobra praksa. Uvijek biste trebali dati svoje stilove u css datotekama.

    Drugi izbornik filtriranja :contains(text), odabire elemente koji imaju određeni tekst. Tekst koji želite podudarati stavite u zagrade. Evo primjera s dva odlomka. Izbornik jQuery uzima riječ "Moto" i mijenja boju u žutu.

    Hello

    World

    $("p:contains('World')").css("color", "yellow");

    Slično tome, :lastselektor odabire element koji je posljednje dijete njegovog roditelja. JQuery selektor u nastavku odabire zadnji

  • element na popisu - stavka popisa "Tri" - a zatim koristi .cssmetodu kako bi tekst pretvorio u žuto.

    $("li:last").css("color", "yellow");

    Napomena: U jQuery selektoruWorldnalazi se u navodnicima jer je već unutar para dvostrukih navodnika. Uvijek koristite jednostruke navodnike unutar dvostrukih navodnika kako biste izbjegli nenamjerno završavanje niza.

    Višestruki selektori U jQueryju možete koristiti više selektora da primijenite iste promjene na više elemenata, koristeći jedan redak koda. To radite odvajanjem različitih ID-ova zarezom. Na primjer, ako želite postaviti boju pozadine tri elementa s ID-ovima mačka, pas i štakor na crvenu, jednostavno učinite:

    $("#cat,#dog,#rat").css("background-color","red");

    Ovo je samo nekoliko selektora dostupnih za upotrebu u jQueryju. Pogledajte odjeljak Više informacija za vezu do cjelovitog popisa na web mjestu jQuery.

    Više informacija:

    • Cjelovit popis jQuery selektora