Johdatus jQuery-tapahtumiin
JQuery on yksi suosituimmista ja laajimmin käytetyistä javascript-kirjastoista, joka on kehitetty ja suunniteltu yksinkertaistamaan HTML-pohjaista DOM-arkkitehtuuria, ts. Asiakirjaobjektimallin ominaisuuksia, kuten lukemista, käsittelyä ja puiden läpi kulkemista. Muut jQueries-ominaisuudet, kuten tapahtumien käsittely, Ajax, muotoilu ja CSS-animaatio, ovat myös yksinkertaistettuja. Se on avoimen lähdekoodin ja ilmainen kirjasto, jota käytetään tyypillisesti 73%: ssa noin. 10 miljoonaa verkkosivustoa, joita käytetään tänään. Jqueryn perusominaisuuksiin kuuluvat DOM-elementtipohjaiset ominaisuudet, kuten valitsimet, käsittely ja puiden poikittainen, mikä tekee työskentelystä JQueryllä paljon mielenkiintoisempaa, helpompaa ja mukavampaa.
Sitä käytetään tarjoamaan hyvin yksinkertainen ja selkeä näköinen käyttöliittymä, jota voidaan käyttää monenlaisten uskomattomien tehosteiden soveltamiseen. Nämä menetelmät mahdollistavat myös yleisimmin käytettyjen ominaisuuksien ja niiden vaikutusten nopean käytön ja soveltamisen yhdessä vähimmäiskonfiguraatioiden kanssa. Peruskomennot, kuten elementtien näyttämiseen ja piilottamiseen liittyvät, ovat melko samat ja muutkin maat ovat samassa luokassa sen kanssa, mitä kuka tahansa haluaa nähdä ne odottaa. show () -komentoa käytetään tässä tapauksessa elementtien näyttämiseen kokonaan käärittynä. Yhdistelmä set and hide () -komentoa käytetään näiden ominaisuuksien piilottamiseen.
Jquery on räätälöity, jota käytetään reagoimaan HTML-sivun tarjoamiin tapahtumiin. Tapahtumat sinänsä ovat eri vierailijoiden toimia, joihin verkkosivu voi vastata. Toisin sanoen tapahtumaa käytetään edustamaan hiukan tarkkaa tai tarkkaa hetkeä, erityisesti jotain mitä on tapahtunut. Tähän voi kuulua tilanteita, kuten hiiren siirtäminen elementin päälle, valintanavan napsauttaminen ja valitseminen sekä elementin napsauttaminen. Termi tulipalot tai termi potkut on käytetty monta kertaa tapahtuman mukana. Esimerkiksi näppäinpainalluksen tapahtuma laukaistaan tai yleisemmin kutsutaan potkutuksi, se tapahtuu lähinnä silloin, kun painat näppäintä. Tässä on luettelo yleisimmistä ja usein käytetyistä DOM-tapahtumista.
Hiiretapahtumat, kuten dblclick, mouseleave, mouseenter, click. On joitain muita näppäimistötapahtumia, kuten näppäinpainallukset, näppäinvalinnat ja näppäinvalinnat. On myös muita tapahtumamuotoja, kuten muutos-, lähetys-, hämärtämis- ja keskitystapahtumat. Jqueryssä on myös muita tapahtumia, jotka ovat asiakirja- tai ikkunatapahtumia, kuten koon muuttaminen, lataaminen, vieritys, purkaminen jne., Suurimmalla osalla DOM-pohjaisista tapahtumista on vastaava jquery-menetelmä. Siksi, jotta uusi tapahtuma voidaan määrittää kaikille sivun olemassa oleville kappaleille, alla oleva syntaksi voidaan ottaa käyttöön.
JQueryn tapahtumat ja syntaksi
Tässä on seuraavat jQuery-tapahtumat syntaksilla alla
1. Napsauta ()
Tämä tapahtuma tapahtuu aina, kun elementtiä napsautetaan. Tätä click () -menetelmää käytetään laukaisemaan napsautettu elementti, joka tunnetaan myös nimellä napsautustapahtuma ja jota käytetään liittymään toimintoon aina, kun napsautukseen liittyvä tapahtuma tapahtuu.
Syntaksi
$(selector).click()
Kun haluat liittää toiminnon tähän napsautustapahtumaan,
$(selector).click(function)
Seuraava vaihe tulee aina toiminnan ja liipaisimen mukana, joka muodostaa toiminnon todellisen toiminnan ja toiminnan, ja siksi aina, kun tapahtuma potkaistaan, toiminto tulisi siirtää tapahtumaan.
esimerkki
$("p").click(function()(
// action which is triggered goes here!! ));
2. Dblclick ()
Tätä menetelmää käytetään tapahtumakäsittelytoiminnon liittämiseen mukana toimitettuun HTML-elementtiin. Tämä toiminto suoritetaan aina, kun käyttäjä kaksinkertaisesti napsauttaa annettua HTML-elementtiä.
Syntaksi
$(selector).dblclick()
esimerkki
$("p").dblclick(function()(
$(this).hide();
));
3. muutos ()
Tämä tapahtuma tapahtuu aina, kun tietyn elementin arvoa muutetaan, ts. Se toimii vain sisääntulolle, tekstialueelle ja valituille elementeille. Muutos () -menetelmää käytetään käynnistämään muutostapahtuma tai toimintoon liittyvä tapahtuma aina, kun muutokseen liittyvän tapahtuman on tapahduttava.
Syntaksi
$(selector).change()
esimerkki
$("input").change(function()(
alert("This text related to this has been changed.");
));
4. hämärtää ()
Tämä epätarkkuuteen liittyvä tapahtuma tapahtuu vain, kun elementti menettää tarkennuksen. Sumennus () -menetelmä, jota käytetään epäterävyystapahtuman käynnistämiseen, tai menetelmä, jota käytetään kiinnittämään toiminto, joka suoritetaan, kun epäterävyys tapahtuu. Tätä menetelmää käytetään usein fokus () -menetelmän kanssa.
Syntaksi
$(selector).blur()
esimerkki
$("input").blur(function()(
alert("The field has lost its focus.");
));
5. tiedot
Tätä tapahtuma.data-ominaisuutta käytetään sisältämään valinnainen siirretty data, joka liittyy tapahtumamenetelmään, kun virran suorittava käsittelijä on sidottu.
Syntaksi
event.data
esimerkki
$("p").each(function(i)(
$(this).on("click", (x:i), function(event)(
alert("This index + ". paragraph has data: " + event.data.x);
));
));
6. nimitila
Tätä ominaisuutta käytetään mukautetun nimitilan palauttamiseen aina, kun tapahtuma laukaistaan. Ominaisuuden määrittävät plugin-kirjoittajat, joita voidaan käyttää tehtävien käsittelemiseen hyvin eri tavalla, mikä riippuu käytetystä nimitilasta. Nimitilat, jotka alkavat alaviivalla, ovat JQueryn varatut nimitilat.
Syntaksi
event.namespace
esimerkki
$("p").on("custom.someNamespace", function(event)(
alert(event.namespace);
));
7. SivuX
Tämä on sivutyyppinen ominaisuus, jota käytetään palauttamaan hiiren osoittimen sijainti, joka liittyy asiakirjan vasempaan reunaan. Tällaista omaisuutta käytetään usein tapahtuman yhteydessä. PageY omaisuus.
Syntaksi
event.PageX
esimerkki
$(document).mousemove(function(event)(
$("span text ").text("X: " + event.pageX);
));
8. SivuY
Tämä on sivutyyppinen ominaisuus, jota käytetään palauttamaan hiiren osoittimen sijainti, joka liittyy asiakirjan yläreunaan. Tällaista omaisuutta käytetään usein tapahtuman yhteydessä. PageX-omaisuus.
Syntaksi
event.PageY
esimerkki
$(document).mousemove(function(event)(
$("span text ").text("Y: " + event.pageY);
));
9. tulos
Ominaisuutta event.result käytetään sisältämään edellinen tai viimeinen arvo, jonka tapahtumakäsittelijä palauttaa ja jonka kyseinen tapahtuma nimenomaan laukaisee.
Syntaksi
event.result
esimerkki
$("button").click(function()(
return "Hi there!";
));
10. EstääDefault ()
Tätä tapahtumiin liittyvää event.preventDefault () -menetelmää käytetään estämään tietyn elementin oletustoiminnan toteutuminen. Esimerkkejä tästä skenaariosta ovat:
Lähetä-painikkeen estäminen lomakkeen lähettämisestä
Estää linkkiä pääsemästä tiettyyn URL-osoitteeseen.
Tiettyä tapahtumaa, kuten event.preventDefault (), käytetään tarkistamaan, käytetäänkö prevenDefault () -menetelmää tai -toimintoa tapahtuman kutsumiseen.
Syntaksi
event.preventDefault()
esimerkki
$("a").click(function(event)(
event.preventDefault();
));
11. Tapahtuma.target ()
Tätä ominaisuutta käytetään palauttamaan mikä DOM-elementti käynnistetään tämän tapahtuman avulla. Useimmiten kuin ei ole hyödyllistä verrata tapahtumaa.target tähän, jotta voidaan selvittää, käsitelläänkö tiettyä tapahtumaa kuplivaksi kutsutun tapahtuman takia.
Syntaksi
event.target
esimerkki
$("p, button, h2").click(function(event)(
$("div").html("Hi, triggered is " + event.target.NameNode + " new element.");
));
12. aikaleima
Tätä ominaisuutta käytetään millisekuntien määrän palauttamiseen tammikuun 1. päivästä 1970 lähtien, mikä vastaa ensimmäistä kertaa, kun tapahtuma ensimmäisen kerran todella käynnistettiin.
Syntaksi
event.TimeStamp
esimerkki
$("button").click(function(event)(
$("span").text(event.timeStamp);
));
13. tyyppi
Tätä käytetään seuraamaan tapahtumaa ja sen tyyppiä, joka käynnistyy.
Syntaksi
event.type
Esimerkki:
$("p").on("click dblclick and mouse related events", function(event)(
$("div").html("Event: " + event.type);
));
14. mikä ()
Tätä ominaisuutta käytetään palauttamaan näppäimistön näppäin tai hiiren painike, jota painettiin tapahtuman vuoksi.
Syntaksi
event.which
esimerkki
$("input").keydown(function(event)(
$("div").html("Key: " + event.which);
));
15. keskittyä ()
Tämä ominaisuus ja tämän tapahtuman tarkennus tapahtuvat, kun elementtiä käytetään tarkennuksen saamiseen, joka tapahtuu, kun se valitaan hiiren napsautuksella tai navigoimalla välilehteä siihen. Tarkennus () -menetelmää käytetään tarkennustapahtuman käynnistämiseen tai toiminnon liittämiseen suoritettaviksi, kun tarkennukseen liittyvä tapahtuma tapahtuu.
Syntaksi
$(selector).focus()
esimerkki
$("input").focus(function()(
$("span").css("display", "inline").fadeOut(200);
));
16. vie hiiri ()
Tätä hover-menetelmää käytetään määrittämään kaksi toimintoa, joita käytetään ajamaan, kun hiiren osoitin siirtyy kaikkien valittujen elementtien päälle. Tämä menetelmä laukaisee sekä mouseleave- että hiiren keskeytystapahtumat. Jos määritettyä on vain yksi toiminto, se toimii sekä mouseleave- että hiiren keskeytystapahtumissa.
Syntaksi
$(selector).hover(inFunction, outFunction)
esimerkki
$("p").hover(function()(
$(this).css("background-color", "blank");
), function()(
$(this).css("background-color", "yellow");
));
17. avain ()
Keydown-tapahtumaan liittyvien tapahtumien järjestys on:
- Keydown: Tätä käytetään, kun avain on matkalla alas.
- Näppäimen painallus : Tämä tapahtuu, kun näppäimistön näppäintä painetaan
- Näppäimistö: Kuten nimestä voi päätellä, tätä käytetään, kun ylöspäin osoitettua näppäintä painetaan.
Syntaksi
$(selector).keydown()
esimerkki
$("input").keydown(function()(
$("input").css("background-color", "black");
));
18. näppäinpainike ()
Näppäinpainallukseen liittyvien tapahtumien järjestys on:
- Keydown: Tätä käytetään, kun avain on matkalla alas.
- Näppäimen painallus : Tämä tapahtuu, kun näppäimistön näppäintä painetaan
- Näppäimistö: Kuten nimestä voi päätellä, tätä käytetään, kun ylöspäin osoitettua näppäintä painetaan.
Syntaksi
$(selector).keypress()
esimerkki
$("input").keypress (function()(
$("input").css("background-color", "black");
));
19. näppäimistö ()
Näppäimistötapahtumaan liittyvien tapahtumien järjestys on:
- Keydown: Tätä käytetään, kun avain on matkalla alas.
- Näppäimen painallus : Tämä tapahtuu, kun näppäimistön näppäintä painetaan
- Näppäimistö: Kuten nimestä voi päätellä, tätä käytetään, kun ylöspäin osoitettua näppäintä painetaan.
Syntaksi
$(selector).keyup()
esimerkki
$("input").keyup(function()(
$("input").css("background-color", "black");
));
20. Live ()
Tätä jquery-elintapaa () -menetelmää tai funktiota käytetään liittämään yksi tai useampi tapahtumapohjainen käsittelijä käytettäväksi erityisesti valituille elementtiluetteloille, ja se määrittelee myös toiminnon, jota ajetaan tapahtumien tapahtuessa. Kaikki tapahtumakäsittelijät on liitetty live () -menetelmällä, joka toimii sekä nykyisillä että FUTURE-elementeillä, jotka perustuvat valintaelementtien yhteensovittamiseen, joka voi olla kuin skriptin luoma uusi elementti. Die () -menetelmää voidaan käyttää live () -menetelmän tuhoamiseen.
Syntaksi
$(selector).live(event, data, function)
esimerkki
$("button").live("click", function()(
$("p").slideToggle();
));
21. Kuormitus ()
Latausmenetelmää käytetään tapahtumakäsittelijän liittämiseen kuormituspohjaiseen tapahtumaan. Lataustapahtuma tapahtuu aina, kun määritetty Tämä tapahtuma tapahtuu, ja toimii aina, kun URL-osoitteeseen liittyvät elementit, kuten kuva, kehys, skripti, iframe ja ikkunaobjekti. Lataustapahtuma voi käynnistyä tai ei, ja se riippuu selaimesta, vaikka kuva olisi välimuistissa. On myös AJAX-menetelmä, joka on jquery-menetelmä, joka tunnetaan nimellä load (), jota kutsutaan riippuu parametreista.
Syntaksi
$(selector).load(function)
esimerkki
$("img").load(function()(
alert("stuff loaded.");
));
22. Hiirileikkaus
Tämä tapahtuma tapahtuu vain, kun hiiren vasenta osoitinpainiketta painetaan alas valitun elementtiluettelon päälle. Siirretty () -menetelmää tai -toimintoa käytetään käynnistämään tämä tapahtuma, joka lisää toiminnon, ja se toimii aina, kun siirrettyjä tapahtumia tapahtuu. Tätä menetelmää käytetään usein yhdessä mouseup () -menetelmän kanssa.
Syntaksi
$(selector).mousedown()
esimerkki
$("div").mousedown(function()(
$(this).after("Down button pressed with mouse.");
));
23. Ei käytössä ()
Tätä menetelmää käytetään poistamaan tapahtumakäsittelijä, joka on kiinnitetty päällä () -menetelmän kanssa. Sen voidaan sanoa korvaavan sitoutumattoman () menetelmän, die () menetelmän ja undelegate () menetelmän. Tätä menetelmää käytetään saavuttamaan paljon johdonmukaisuutta sovellusliittymään, ja on aina suositeltavaa käyttää tätä menetelmää, koska sitä käytetään Jquery-koodikannan yksinkertaistamiseen.
Syntaksi
$(selector).off(event, selector, function(eventObj), map)
esimerkki
$("button").click(function()(
$("p").off("click");
));
24. hiiren keskus ()
Tämä tapahtuma tapahtuu aina, kun hiiren osoitin on määritellyn elementin yläpuolella ja tulee, kun se laukaisee hiiren päällekkäisyystapahtuman tai sitä käytetään toiminnon liittämiseen, jota voidaan käyttää suorittamaan aina, kun hiiren osoittimeen perustuva tapahtuma tapahtuu.
Syntaksi
$(selector).mouseenter()
esimerkki
$("p").mouseenter(function()(
$("p").css("background-color", "black");
));
25. mouseleave ()
Tämä tapahtuma tapahtuu aina, kun hiiren osoitin on määritellyn elementin yläpuolella ja poistuu, kun se laukaisee hiiren poistotapahtuman tai sitä käytetään poistamaan toiminto, jota voidaan käyttää ajamaan aina, kun mouseleave-pohjainen tapahtuma tapahtuu.
Syntaksi
$(selector).mouseleave()
esimerkki
$("p").mouseleave(function()(
$("p").css("background-color", "black");
));
Jquery on yksi eniten käytettyjä kirjastoja, kun kyse on käyttöliittymän kehityksestä. Tämä tarjoaa ainutlaatuisia ominaisuuksia ja laajan valikoiman toimintoja, jotka auttavat tekemään kehittäjien ja ihmisten elämästä helppoa ja kätevää. Toivottavasti pidit artikkelistamme. Pysy kuulolla blogiimme saadaksesi enemmän näitä.
Suositellut artikkelit
Tämä on opas jQuery-tapahtumiin. Tässä keskustellaan luettelosta jQueryn yleisimmistä ja usein käytetyistä tapahtumista syntaksin ja esimerkkien kanssa. Saatat myös katsoa seuraavia artikkeleita saadaksesi lisätietoja -
- jQuery-tehosteet
- jQuery-menetelmät
- jQuery-määritteet
- Kuinka asentaa Jquery?
- 8 parasta jQuery-valitsinta koodin toteutuksella
- Opas JQuery-edistymispalkkiesimerkkeihin
- Opas erilaisiin JavaScript-tapahtumiin