JQuery sündmuste sissejuhatus
JQuery on üks populaarsemaid ja laialdasemalt kasutatavaid javascripti teegid, mis on välja töötatud ja kavandatud HTML-põhise DOM-i arhitektuuri lihtsustamiseks, st dokumendiobjekti mudeli omaduste, näiteks lugemise, manipuleerimise ja puu liikumise jaoks. Lihtsustatud on ka muud jQueries atribuudid, nagu sündmuste käsitlemine, Ajax, stiil ja CSS-animatsioon. See on avatud lähtekoodiga ja tasuta raamatukogu, mida kasutatakse tavaliselt 73% -l umbes. 10 miljonit veebisaiti, mida täna kasutatakse. Jquery põhifunktsioonide hulka kuuluvad DOM-i elemendil põhinevad omadused, nagu selektorid, manipuleerimine ja puu liikumine, mis muudab JQuery-ga töötamise palju huvitavamaks, lihtsamaks ja mugavamaks.
Seda kasutatakse väga lihtsa ja ilusa liidese pakkumiseks, mida saab kasutada mitmesuguste hämmastavate efektide rakendamiseks. Need meetodid võimaldavad ka kõige sagedamini kasutatavate funktsioonide ja nende efektide kiiret kasutamist ja rakendamist koos minimaalsete konfiguratsioonidega. Põhikäsklused, nagu näiteks elementide kuvamine ja peitmine, on peaaegu samad ja ülejäänud ülejäänud asuvad samas kategoorias sellega, mida keegi neid näha soovivalt oodata võib. käsku show () kasutatakse sel juhul elementide kuvamiseks täielikult mähituna ning nende funktsioonide peitmiseks kasutatakse kombineeritud käsku set and hide ().
Jquery on kohandatud, mida kasutatakse HTML-lehel pakutavatele sündmustele reageerimiseks. Sündmused iseenesest on erinevad külastajate toimingud, millele veebileht reageerib. Teisisõnu kasutatakse sündmust täpse või täpse hetke teatavaks tähistamiseks, eriti juhtunuks. See võib hõlmata stsenaariume, nagu näiteks hiire liigutamine elemendi kohal, raadionupu klõpsamine ja valimine ning ka elemendi klõpsamine. Mõistet "tulekahjud" või "vallandatud" kasutatakse sündmuse ajal palju. Näiteks klahvivajutuse sündmus käivitatakse või rahvapäraselt nimetatakse seda vallandatuks, see toimub peamiselt siis, kui vajutate klahvi. Siin on kõige tavalisemate ja sagedamini kasutatavate DOM-i sündmuste loend.
Hiiresündmused, näiteks dblclick, mouseleave, mouseenter, click. On ka teisi klaviatuurisündmusi, näiteks klahvivajutus, klaviatuur ja klahvivajutus. On ka teisi sündmuste vorme, nagu muutuste, esitamise, hägustamise ja sündmuste fookuse suurendamine. Jquerys on ka muid sündmusi, mis on dokumendi- või aknasündmused, näiteks suuruse muutmine, laadimine, kerimine, mahalaadimine jne. Enamikul DOM-i põhistel sündmustel on vastav jquery-meetod. Seetõttu saab alljärgneva süntaksi kasutusele võtta, et määrata lehe kõikidele olemasolevatele lõikudele uus sündmus.
Sündmused ja jQuery süntaks
Siin on järgmised jQuery süntaksiga sündmused, mis on toodud allpool
1. Klõpsake ()
See sündmus toimub igal elemendil klõpsamisel. Seda klõpsamise () meetodit kasutatakse klõpsatud elemendi käivitamiseks, mida nimetatakse ka klõpsündmuseks ja mida kasutatakse funktsiooni lisamiseks klõpsuga seotud sündmuse toimumisel.
Süntaks
$(selector).click()
Kui soovite sellele klõpsamissündmusele funktsiooni lisada,
$(selector).click(function)
Järgmine samm tuleb alati koos toimingu ja päästikuga, mis moodustab funktsiooni tegeliku toimimise ja toimimise, ning seetõttu tuleks iga sündmus vallandada iga sündmuse toimingule.
Näide
$("p").click(function()(
// action which is triggered goes here!! ));
2. Dblclick ()
Seda meetodit kasutatakse sündmuste käitleja funktsiooni lisamiseks pakutavale HTML-elemendile. Seda funktsiooni täidetakse iga kord, kui kasutaja kaks korda sellel HTML-elemendil klõpsab.
Süntaks
$(selector).dblclick()
Näide
$("p").dblclick(function()(
$(this).hide();
));
3. muuda ()
See sündmus toimub alati, kui konkreetse elemendi väärtust muudetakse, st see töötab ainult sisendi, tekstiala ja valitud elementide puhul. Muudatuse () meetodit kasutatakse muutussündmuse käivitamiseks või seda, mis funktsioonile kinnitatakse, alati, kui muudatusega seotud sündmus peab aset leidma.
Süntaks
$(selector).change()
Näide
$("input").change(function()(
alert("This text related to this has been changed.");
));
4. hägusus ()
See hägustumisega seotud sündmus toimub ainult siis, kui element kaotab fookuse. Hägususe () meetod, mida kasutatakse hägususe sündmuse käivitamiseks, või meetod, mida kasutatakse funktsiooni lisamiseks, mida tuleb kasutada iga hägususe korral. Seda meetodit kasutatakse sageli koos fookuse () meetodiga.
Süntaks
$(selector).blur()
Näide
$("input").blur(function()(
alert("The field has lost its focus.");
));
5. andmed
Seda omadust event.data kasutatakse sündmuse meetodiga seotud valikuliste edastatud andmete sisaldamiseks, kui praegune käitleja on seotud.
Süntaks
event.data
Näide
$("p").each(function(i)(
$(this).on("click", (x:i), function(event)(
alert("This index + ". paragraph has data: " + event.data.x);
));
));
6. nimeruum
Seda atribuuti kasutatakse kohandatud nimeruumi tagastamiseks, kui sündmus käivitatakse. Atribuuti määravad pluginate autorid, mida saab kasutada ülesannete väga erinevaks käsitlemiseks, sõltuvalt kasutatavast nimeruumist. Nimed, mis algavad alajoonega, on JQuery jaoks reserveeritud nimeruumid.
Süntaks
event.namespace
Näide
$("p").on("custom.someNamespace", function(event)(
alert(event.namespace);
));
7. LehtX
See on lehe tüübi atribuut, mida kasutatakse hiirekursori asukoha tagastamiseks, mis on seotud dokumendi vasakpoolse servaga. Sellist vara kasutatakse ürituse ajal sageli. PageY vara.
Süntaks
event.PageX
Näide
$(document).mousemove(function(event)(
$("span text ").text("X: " + event.pageX);
));
8. LehtY
See on lehe tüübi atribuut, mida kasutatakse hiirekursori asukoha tagastamiseks, mis on seotud dokumendi ülemise servaga. Sellist vara kasutatakse ürituse ajal sageli. PageX vara.
Süntaks
event.PageY
Näide
$(document).mousemove(function(event)(
$("span text ").text("Y: " + event.pageY);
));
9. tulemus
Omadust event.result kasutatakse eelmise või viimase väärtuse sisaldamiseks, mille sündmusekäitleja tagastab ja mille konkreetne sündmus konkreetselt käivitab.
Süntaks
event.result
Näide
$("button").click(function()(
return "Hi there!";
));
10. vältima vaikimisi ()
Seda sündmusega seotud sündmuse.preventDefault () meetodit kasutatakse konkreetse elemendi vaikimisi toimingu peatamiseks. Selle stsenaariumi näited hõlmavad järgmist:
Esitamise nupu vormistamise takistamine
Keelake lingil juurdepääs konkreetsele URL-ile.
Konkreetse sündmuse, näiteks event.preventDefault () abil kontrollitakse, kas sündmuse kutsumiseks kasutatakse meetodit prevenDefault () või funktsiooni.
Süntaks
event.preventDefault()
Näide
$("a").click(function(event)(
event.preventDefault();
));
11. Event.target ()
Seda omadust kasutatakse selle DOM-elemendi tagastamiseks, mille see sündmus käivitab. Enamasti pole kasulik võrrelda sündmust.target sellega, et teha kindlaks, kas konkreetset sündmust käsitletakse mullitava sündmuse tõttu.
Süntaks
event.target
Näide
$("p, button, h2").click(function(event)(
$("div").html("Hi, triggered is " + event.target.NameNode + " new element.");
));
12. timeStamp
Seda omadust kasutatakse millisekundite arvu tagastamiseks alates 1. jaanuarist 1970, mis vastab sündmuse esmakordse käivitamise esmakordsele ajale.
Süntaks
event.TimeStamp
Näide
$("button").click(function(event)(
$("span").text(event.timeStamp);
));
13. tüüp
Seda kasutatakse sündmuse ja selle tüübi jälgimiseks, mis käivitatakse.
Süntaks
event.type
Näide:
$("p").on("click dblclick and mouse related events", function(event)(
$("div").html("Event: " + event.type);
));
14. mis ()
Seda omadust kasutatakse sündmuse ajal vajutatud klaviatuuri või hiire nupu tagastamiseks.
Süntaks
event.which
Näide
$("input").keydown(function(event)(
$("div").html("Key: " + event.which);
));
15. fookus ()
See omadus ja selle sündmuse fookus ilmneb siis, kui elementi kasutatakse fookuse saamiseks, mis ilmneb siis, kui see on valitud hiireklõpsuga või navigeerides sellel vahekaarti. Fookuse () meetodit kasutatakse fookusesündmuse käivitamiseks või funktsiooni lisamiseks käivitamiseks, kui toimub fookusega seotud sündmus.
Süntaks
$(selector).focus()
Näide
$("input").focus(function()(
$("span").css("display", "inline").fadeOut(200);
));
16. hõljutage kursorit ()
Selle hõljumismeetodi abil määratletakse kaks funktsiooni, mida kasutatakse käitamiseks, kui hiirekursor hõljub kõigi valitud elementide kohal. See meetod käivitab nii moelevisiooni kui ka hiirekeskuse sündmused. Kui täpsustatud on ainult üks funktsioon, töötab see nii moelevendamise kui ka hiirekeskuse sündmuste korral.
Süntaks
$(selector).hover(inFunction, outFunction)
Näide
$("p").hover(function()(
$(this).css("background-color", "blank");
), function()(
$(this).css("background-color", "yellow");
));
17. klahvivajutus ()
Keydown-sündmusega seotud sündmuste järjekord on järgmine:
- Keydown: Seda kasutatakse siis, kui võti on alla suunatud.
- Klahvivajutus: see ilmub klaviatuuri klahvi vajutamisel
- Klaviatuur: nagu nimigi ütleb, kasutatakse seda siis, kui vajutatakse ülespoole suunatud klahvi.
Süntaks
$(selector).keydown()
Näide
$("input").keydown(function()(
$("input").css("background-color", "black");
));
18. klahvivajutus ()
Klahvivajutusega sündmuste järjekord on järgmine:
- Keydown: Seda kasutatakse siis, kui võti on alla suunatud.
- Klahvivajutus: see ilmub klaviatuuri klahvi vajutamisel
- Klaviatuur: nagu nimigi ütleb, kasutatakse seda siis, kui vajutatakse ülespoole suunatud klahvi.
Süntaks
$(selector).keypress()
Näide
$("input").keypress (function()(
$("input").css("background-color", "black");
));
19. klaviatuur ()
Klaviatuurisündmusega seotud sündmuste järjekord on järgmine:
- Keydown: Seda kasutatakse siis, kui võti on alla suunatud.
- Klahvivajutus: see ilmub klaviatuuri klahvi vajutamisel
- Klaviatuur: nagu nimigi ütleb, kasutatakse seda siis, kui vajutatakse ülespoole suunatud klahvi.
Süntaks
$(selector).keyup()
Näide
$("input").keyup(function()(
$("input").css("background-color", "black");
));
20. Otseülekanne ()
Seda päringu () meetodit või funktsiooni kasutatakse ühe või mitme sündmuspõhise käitleja lisamiseks, mida kasutatakse eriti valitud elementide loendite jaoks, ning see täpsustab ka sündmuse toimumise ajal käitatava funktsiooni. Kõik sündmuste töötlejad on ühendatud live () meetodil, mis töötab nii praeguste kui ka FUTURE elementide puhul, mis põhinevad selektorielementide sobitamisel, mis võib olla nagu skripti loodud uus element. Die () meetodit saab kasutada live () meetodi hävitamiseks.
Süntaks
$(selector).live(event, data, function)
Näide
$("button").live("click", function()(
$("p").slideToggle();
));
21. Koormus ()
Laadimismeetodit kasutatakse sündmuse käitleja kinnitamiseks laadimispõhisele sündmusele. Laadimisüritus toimub alati, kui määratud on. See sündmus toimub ja töötab siis, kui URL-iga seotud elemendid, näiteks pilt, raam, skript, iframe ja aknaobjekt. Laadimisüritus võib käivituda või mitte ning see sõltub brauserist, isegi kui pilt on vahemällu salvestatud. Samuti on AJAX-meetod, mis on jquery-meetod, mida tuntakse kui load (), see, mida nimetatakse, sõltub parameetritest.
Süntaks
$(selector).load(function)
Näide
$("img").load(function()(
alert("stuff loaded.");
));
22. Mousedown
See sündmus toimub ainult siis, kui hiire vasak hiirekursor vajutatakse elemendi valitud loendi kohal. Peidetud () meetodit või funktsiooni kasutatakse selle sündmuse käivitamiseks, mis lisab funktsiooni ja see töötab alati, kui peidetud sündmus juhtub. Seda meetodit kasutatakse sageli koos mouseup () meetodiga.
Süntaks
$(selector).mousedown()
Näide
$("div").mousedown(function()(
$(this).after("Down button pressed with mouse.");
));
23. väljas ()
Seda meetodit kasutatakse sündmuse käitleja eemaldamiseks, mis on ühendatud meetodiga on (). Võib öelda, et see asendab meetodit unbind (), die () ja undelegate (). Seda meetodit kasutatakse API-le suure järjepidevuse saavutamiseks ja alati on soovitatav seda meetodit kasutada, kuna seda kasutatakse Jquery koodi aluse lihtsustamiseks.
Süntaks
$(selector).off(event, selector, function(eventObj), map)
Näide
$("button").click(function()(
$("p").off("click");
));
24. hiirekeskus ()
See sündmus toimub siis, kui hiirekursor on üle määratud elemendi ja siseneb, kui see käivitab hiirekeskuse sündmuse või kui seda kasutatakse funktsiooni manustamiseks, mida saab kasutada iga kord, kui toimub hiirekeskuse sündmus.
Süntaks
$(selector).mouseenter()
Näide
$("p").mouseenter(function()(
$("p").css("background-color", "black");
));
25. mouseleave ()
See sündmus toimub alati, kui hiirekursor on üle määratud elemendi ja lahkub, kuna see käivitab hiire lahkumise sündmuse või seda kasutatakse funktsiooni lahtiühendamiseks, mida saab kasutada iga kord, kui toimub mouseleave põhinev sündmus.
Süntaks
$(selector).mouseleave()
Näide
$("p").mouseleave(function()(
$("p").css("background-color", "black");
));
Jquery on üks enim kasutatud raamatukogusid, kui tegemist on esiotsa arendamisega. See pakub unikaalseid funktsioone ja laia valikut funktsioone, mis aitab muuta arendajate ja kõigi inimeste elu lihtsaks ja mugavaks. Loodetavasti teile meeldis meie artikkel. Olge meie blogiga kursis, et näha rohkem selliseid.
Soovitatavad artiklid
See on jQuery sündmuste juhend. Siin käsitleme jQuery kõige sagedamini kasutatavate ja sagedamini kasutatavate sündmuste loetelu koos süntaksi ja näidetega. Võite lisateabe saamiseks vaadata ka järgmisi artikleid -
- jQuery efektid
- jQuery meetodid
- jQuery atribuudid
- Kuidas installida Jquery?
- 8 parimat koodirakendusega jQuery valijat
- JQuery edenemisriba näidete juhend
- Erinevate JavaScripti sündmuste juhend