jQuery-valitsimet selitetty: luokan valitsimet, tunnuksen valitsimet ja paljon muuta

jQuery-valitsimet

jQuery käyttää CSS-tyylisiä valitsimia HTML-sivun osien tai elementtien valitsemiseen. Sen avulla voit tehdä jotain elementtien kanssa jQuery-menetelmillä tai -toiminnoilla.

Käyttää yhtä näistä valitsimista kirjoittamalla dollarin merkki ja suluissa sen jälkeen: $(). Tämä on lyhenne jQuery()toiminnolle. Lisää sulkeisiin elementti, jonka haluat valita. Voit käyttää joko yhden tai kahden lainausmerkin. Lisää tämän jälkeen piste sulkujen ja käytettävän menetelmän jälkeen.

JQueryssä luokan ja tunnuksen valitsimet ovat kuin CSS: ssä. Katsotaanpa tämä nopeasti ennen kuin jatkamme.

ID-valitsin CSS: ssä

CSS ID -valitsin käyttää tyylejä tiettyyn html-elementtiin. CSS ID -valitsimen on vastattava HTML-elementin ID-määritettä. Toisin kuin luokissa, joita voidaan soveltaa useisiin elementteihin koko sivustolla, tiettyä tunnusta voidaan käyttää vain yhteen yksittäiseen elementtiin sivustossa. CSS-tunnus ohittaa CSS-luokan ominaisuudet. Jos haluat valita elementin, jolla on tietty tunnus, kirjoita hajautusmerkki (#) ja sen jälkeen elementin tunnus.

Syntaksi

#specified_id { /* styles */ }

Voit yhdistää ID-valitsimen muun tyyppisiin valitsimiin tyylin muodostamiseksi hyvin spesifisen elementin.

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

Huomautus tunnuksista

Henkilötunnusta tulisi välttää muotoilussa, jos mahdollista. Koska sillä on suuri spesifisyys ja se voidaan ohittaa vain, jos lisäät tyylit tai lisäät niihin tyylejä . Tunnuksen ohittaa luokan valitsimet ja tyyppivalitsimet.

Muista, että ID-valitsimen on vastattava HTML-elementin ID-määritettä.

Tarkkuus

ID-valitsimilla on korkea spesifisyys, mikä tekee niistä vaikeasti ohitettavia. Luokat ovat paljon alhaisemmat spesifisyydellä, ja ne ovat yleensä ensisijainen tapa elementtien tyyliin spesifisyysongelmien välttämiseksi.

Tässä on esimerkki jQuery-menetelmästä, joka valitsee kaikki kappaleelementit ja lisää niihin luokan "valitut":

This is a paragraph selected by a jQuery method.

This is also a paragraph selected by a jQuery method.

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

Ok, takaisin jQueryyn

JQueryssä luokan ja tunnuksen valitsimet ovat samat kuin CSS: ssä. Jos haluat valita elementtejä, joilla on tietty luokka, käytä pistettä ( .) ja luokan nimeä. Jos haluat valita elementtejä, joilla on tietty tunnus, käytä hash-symbolia ( #) ja tunnuksen nimeä. Huomaa, että HTML ei eroa kirjainkokoja, joten on parasta pitää HTML-merkinnät ja CSS-valitsimet pieninä.

Valinta luokan mukaan:

Paragraph with a class.

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

Valinta tunnuksen mukaan:

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

    Socks

    ");

    Voit myös valita tiettyjä elementtejä sekä niiden luokat ja tunnukset:

    Valinta luokan mukaan

    Jos haluat valita elementtejä, joilla on tietty luokka, käytä pistettä (.) Ja luokan nimeä.

    Paragraph with a class.

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

    Voit myös käyttää luokan valitsinta yhdessä tunnisteen nimen kanssa tarkentamiseksi.

    
        
      My Wish List
    `

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

    Valitaan tunnuksen perusteella

    Jos haluat valita elementtejä, joilla on tietty ID-arvo, käytä hash-symbolia (#) ja tunnuksen nimeä.

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

    Socks

    ");

    Kuten luokan valitsimessa, tätä voidaan käyttää myös yhdessä tagin nimen kanssa.

    News Headline

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

    Suodattimina toimivat valitsimet

    On myös valitsimia, jotka toimivat suodattimina - ne alkavat yleensä kaksoispisteillä. Esimerkiksi :firstvalitsin valitsee elementin, joka on vanhemmansa ensimmäinen lapsi. Tässä on esimerkki järjestämättömästä luettelosta, jossa on joitain luettelokohteita. Luettelon alapuolella oleva jQuery-valitsin valitsee ensimmäisen

  • elementti luettelossa - ”Yksi” -luettelokohde - ja käyttää sitten .csstapaa muuttaa teksti vihreäksi.

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

    Huomaa: Älä unohda, että css: n käyttäminen JavaScriptissä ei ole hyvä käytäntö. Tyylisi tulisi aina ilmoittaa css-tiedostoina.

    Toinen suodatusvalitsin :contains(text), valitsee elementit, joissa on tietty teksti. Aseta vastaava teksti sulkeisiin. Tässä on esimerkki kahdesta kappaleesta. JQuery-valitsin ottaa sanan "Moto" ja vaihtaa värinsä keltaiseksi.

    Hello

    World

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

    Samoin :lastvalitsin valitsee elementin, joka on vanhemman viimeinen lapsi. Alla oleva JQuery-valitsin valitsee viimeisen

  • elementti luettelossa - ”Kolme” -luettelokohde - ja käyttää sitten .cssmenetelmää tekstin muuttamiseksi keltaiseksi.

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

    Huomaa: jQuery-valitsimessaWorldon yksi lainausmerkkejä, koska se on jo kaksoislainausparin sisällä. Käytä aina lainausmerkkejä lainausmerkkien sisällä, jotta merkkijono ei pääty tahattomasti loppuun.

    Useita valitsimia jQueryssä voit käyttää useita valitsimia samojen muutosten tekemiseen useampaan kuin yhteen elementtiin yhdellä koodirivillä. Teet tämän erottamalla eri tunnukset pilkulla. Esimerkiksi, jos haluat asettaa kolmen elementin taustavärin, joiden tunnukset ovat kissa, koira ja rotta, vastaavasti:

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

    Nämä ovat vain muutamia valitsimista, jotka ovat käytettävissä jQueryssä. Katso lisätietoja-osiosta linkki jQuery-verkkosivuston täydelliseen luetteloon.

    Lisää tietoa:

    • Täydellinen luettelo jQuery-valitsimista