close

jQueryn perussyntaksi- valinta, manipulointi ja tehosteet

jQueryn perussyntaksi sisältää valitsimen(CSS-tyylinen valitsin) ja menetelmien käyttämisen valittujen elementtien käsittelemiseen. Tässä on joitain jQueryn perussyntaksiesimerkkejä:

 

Elementtien valinta

  • Valitse elementit HTML-tunnisteen nimen mukaan: $("tagname") Esimerkki: $("p") valitsee kaikki <p> elementit sivulla.

  • Valitse elementit CSS-luokan mukaan: $(".classname") Esimerkki: $(".myClass") valitsee kaikki elementit, joiden luokka on "myClass".

  • Valitse elementit tunnuksella: $("#idname") Esimerkki: $("#myElement") valitsee elementin, jonka tunnus on "myElement".

  • Valitse elementit attribuutin mukaan: $("[attribute='value']") Esimerkki: $("[data-type='button']") valitsee elementit, joiden attribuutti data-type on "button".

  • Yhdistämällä valintoja: $("tagname.classname"), $("#idname .classname"), ...

 

Valittujen elementtien käsittely

  • Elementin sisällön muuttaminen: .html(), .text() Esimerkki: $("#myElement").html("New content") asettaa elementin HTML-sisällön tunnuksella "myElement".

  • Elementin attribuuttien muokkaaminen: .attr(), .prop() Esimerkki: $("img").attr("src", "newimage.jpg") muuttaa src kaikkien <img> elementtien attribuutteja.

  • Elementin CSS-luokkien manipulointi: .addClass(), .removeClass(), .toggleClass() Esimerkki: $("#myElement").addClass("highlight") lisää luokan "highlight" elementtiin, jonka tunnus on "myElement".

  • Elementtien piilottaminen/näyttö: .hide(), .show(), .toggle() Esimerkki: $(".myClass").hide() piilottaa kaikki elementit, joiden luokka on "myClass".

  • Tapahtumien käsittely elementeissä: .click(), .hover(), .submit(), ... Esimerkki: $("button").click(function() { ... }) rekisteröi napsautustapahtumakäsittelijän

 

Työskentely elementtikokoelmien kanssa

  • Iterointi kokoelman läpi: .each() Esimerkki: $("li").each(function() { ... }) iteroidaan jokaisen <li> sivun elementin yli.

  • Kokoelman suodattaminen: .filter() Esimerkki .not(): $("div").filter(".myClass") suodattaa <div> elementit ja valitsee ne, joiden luokka on "myClass".

  • Elementtien lisääminen kokoelmaan: .append(), .prepend(), .after(), .before() Esimerkki: $("#myElement").append("<p>New paragraph</p>") lisää uuden <p> elementin elementtiin, jonka tunnus on "myElement".

 

Tehosteet ja animaatiot

  • FadeIn/fadeOut-tehosteiden suorittaminen: .fadeIn(), .fadeOut() Esimerkki: $("#myElement").fadeIn(1000) häivytetään elementissä, jonka tunnus on "myElement" 1 sekunnin ajan.

  • Suoritetaan slideUp/slideDown tehosteita: .slideUp(), .slideDown() Esimerkki: $(".myClass").slideUp(500) liukuu ylös kaikki elementit, joiden luokka on "myClass" 0,5 sekunnin ajan.

  • Mukautettujen animaatioiden suorittaminen: .animate() Esimerkki: $("#myElement").animate({ left: '250px', opacity: '0.5' }) animoi elementin, jonka tunnus on "myElement", muuttamalla sen vasenta sijaintia ja peittävyyttä.

 

Nämä esimerkit osoittavat, kuinka jQueryn perussyntaksin eri näkökohtia käytetään elementtien valitsemiseen, niiden ominaisuuksien muokkaamiseen ja tehosteiden tai animaatioiden käyttämiseen. jQuery tarjoaa runsaasti menetelmiä ja toimintoja web-kehitystehtävien yksinkertaistamiseksi ja parantamiseksi.