jQuery selektorid selgitused: klassi valijad, ID valijad ja palju muud

jQuery valijad

jQuery kasutab CSS-stiilis valijaid HTML-lehe osade või elementide valimiseks. Seejärel võimaldab see elementidega midagi teha, kasutades jQuery meetodeid või funktsioone.

Et kasutada ühte neist valijad, kirjutage dollari märk ja sulgudes pärast: $(). See on jQuery()funktsiooni lühikirjeldus . Sulgudes lisage element, mille soovite valida. Võite kasutada kas ühe- või topelt jutumärke. Pärast seda lisage sulgude järele punkt ja meetod, mida soovite kasutada.

JQuery's on klassi ja ID valijad sarnased CSS-is. Enne jätkamist vaatame selle kiiresti üle.

ID-valija CSS-is

CSS ID valija rakendab stiilid konkreetsele HTML-elemendile. CSS ID valija peab vastama HTML elemendi atribuudile. Erinevalt klassidest, mida saab kogu saidil rakendada mitmele elemendile, võib konkreetset ID-d rakendada saidil ainult ühele üksikule elemendile. CSS ID alistab CSS-klassi atribuudid. Kindla ID-ga elemendi valimiseks kirjutage hash (#) märk, millele järgneb elemendi ID.

Süntaks

#specified_id { /* styles */ }

Väga konkreetse elemendi kujundamiseks võite ID-valija kombineerida muud tüüpi valijatega.

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

Märkus ID-de kohta

Võimalusel tuleks stiili kujundamisel vältida isikutunnistust. Kuna sellel on kõrge spetsiifilisus ja seda saab tühistada ainult siis, kui sisestate stiilid või lisate neile stiilid . ID alistab klassi valijad ja tüübi valijad.

Pidage meeles, et ID-valija peab vastama HTML-elemendi ID-atribuudile.

Konkreetsus

ID-valijatel on kõrge spetsiifilisus, mis muudab nende alistamise keeruliseks. Klassidel on palju madalam spetsiifilisus ja need on spetsiifiliste probleemide vältimiseks üldiselt stiilielementide eelistatav viis.

Siin on jQuery meetodi näide, mis valib kõik lõiguelemendid ja lisab neile klassi "valitud":

This is a paragraph selected by a jQuery method.

This is also a paragraph selected by a jQuery method.

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

Ok, tagasi jQuery juurde

JQuery's on klassi ja ID valijad samad, mis CSS-is. Kui soovite valida kindla klassiga elemente, kasutage punkti ( .) ja klassi nime. Kui soovite valida kindla ID-ga elemente, kasutage räsi sümbolit ( #) ja ID-nime. Pange tähele, et HTML ei ole tõstutundlik, seetõttu on parim tava hoida HTML-märgistus ja CSS-valijad väiketähtedega.

Kursuse järgi valimine:

Paragraph with a class.

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

Valimine ID järgi:

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

    Socks

    ");

    Samuti saate valida teatud elemendid koos nende klasside ja ID-dega.

    Valimine klassi järgi

    Kui soovite valida kindla klassiga elemente, kasutage punkti (.) Ja klassi nime.

    Paragraph with a class.

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

    Täpsemaks saate kasutada ka klassi valijat koos sildi nimega.

    
        
      My Wish List
    `

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

    Valimine ID järgi

    Kui soovite valida kindla ID-väärtusega elemendid, kasutage räsi sümbolit (#) ja ID-nime.

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

    Socks

    ");

    Nagu klassi valija puhul, saab seda kasutada ka koos sildi nimega.

    News Headline

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

    Selektorid, mis toimivad filtritena

    On ka valijaid, mis toimivad filtritena - need algavad tavaliselt koolonitega. Näiteks :firstvalib valija elemendi, mis on tema vanema esimene laps. Siin on näide tellimata loendist, kus on mõned loendi üksused. Loendi all olev jQuery valija valib esimese

  • loendis olev element - loendiüksus „Üks” - ja seejärel kasutab .cssmeetod teksti roheliseks muutmiseks.

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

    Märkus. Ärge unustage, et css-i rakendamine JavaScriptis pole hea tava. Oma stiilid tuleks alati anda css-failidena.

    Teine filtreerimisvalija :contains(text), valib elemendid, millel on kindel tekst. Asetage sulgudesse tekst, mille soovite sobitada. Siin on näide kahe lõikega. Valija jQuery võtab sõna “Moto” ja muudab selle värvi kollaseks.

    Hello

    World

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

    Samamoodi :lastvalib valija elemendi, mis on tema vanema viimane laps. Allpool olev JQuery valija valib viimase

  • loendis olev element - loendiüksus „Kolm“ - ja seejärel kasutab .cssmeetod teksti kollaseks muutmiseks.

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

    Märkus . JQuery valijasWorldon üks jutumärkides, sest see on juba paar jutumärkide sees. Stringi tahtmatu lõpetamise vältimiseks kasutage topelt jutumärkides alati üks jutumärke.

    Mitu valijat JQuery's saate kasutada mitut valijat, et rakendada samu muudatusi mitmele elemendile, kasutades ühte koodirida. Seda tehes eraldate erinevad id id komaga. Näiteks kui soovite seada kolme elemendi taustavärvi vastavalt kassi, koera ja roti ID-dega punaseks, tehke lihtsalt järgmist.

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

    Need on vaid mõned valijatest, mida saab jQuery's kasutada. JQuery veebisaidi täieliku loendi linki leiate jaotisest Lisateave.

    Rohkem informatsiooni:

    • JQuery valijate täielik loetelu