Uvod v jQuery dogodke
JQuery je ena izmed najbolj priljubljenih in široko uporabljenih knjižnic javascripta, ki je razvita in zasnovana za poenostavitev arhitekture DOM, ki temelji na HTML-u, tj. Lastnosti predmeta dokumentnega dokumenta, kot so branje, manipulacija in prehajanje dreves. Poenostavljene so tudi druge lastnosti jQueries, kot so upravljanje dogodkov, Ajax, styling in animacija CSS. Gre za odprtokodno in brezplačno knjižnico, ki se običajno uporablja v 73% od pribl. 10 milijonov spletnih strani, ki se uporabljajo danes. Glavne značilnosti Jqueryja vključujejo lastnosti, ki temeljijo na elementih DOM, kot so izbirniki, manipulacije in prehajanje dreves, zaradi česar je delo na JQueryju veliko bolj zanimivo, lažje in priročno.
Uporablja se za zagotavljanje zelo preprostega in preprostega vmesnika, ki ga lahko uporabimo za uporabo različnih vrst neverjetnih učinkov. Te metode omogočajo tudi hitro uporabo in uporabo najpogosteje uporabljenih funkcij ter njihovih učinkov, skupaj z golo do minimalno konfiguracijo. Osnovni ukazi, kot so tisti, ki prikazujejo in skrivajo elemente, so skoraj enaki, ostali pa so tudi v isti kategoriji s tistim, kar bi jih kdo pričakoval. Ukaz show () se v tem primeru uporablja za prikazovanje elementov v popolnoma zaviti, kombinirani ukaz set in hid () pa se uporablja za skrivanje teh funkcij.
Jquery je narejen po meri, ki se uporablja za odzivanje na dogodke na strani HTML. Sami dogodki so različna dejanja obiskovalcev, na katere se lahko odzove spletna stran. Z drugimi besedami, dogodek se uporablja za rahlo predstavljanje natančnega ali natančnega trenutka, še posebej nekaj, kar se je zgodilo. To lahko vključuje scenarije, kot je premikanje miške po elementu, klikanje in izbiranje izbirnega gumba ter klikanje na element. Izraz požari ali izraz odpuščanje se pogosto uporablja skupaj z dogodkom. Na primer, da se dogodek pritiska na tipko sproži ali se bolj popularno imenuje odpuščen, predvsem v trenutku, ko pritisnete tipko. Tu je seznam najpogostejših in najpogosteje uporabljenih dogodkov DOM.
Dogodki z miško, kot so dblclick, mouseleave, mouseenter, click. Obstajajo tudi nekateri drugi dogodki na tipkovnici, kot so na primer tipkovnica, tipkovnica in tipkovnica. Obstajajo tudi druge oblike dogodkov, kot so spremembe, pošiljanje, zameglitev in fokusiranje dogodkov. Obstajajo tudi drugi dogodki, ki so dokumenti ali okna, kot so velikost, nalaganje, pomikanje, odlaganje itd. V Jqueryju večina dogodkov, ki temeljijo na DOM, ima ustrezen način jquery. Če želite dodeliti nov dogodek vsem obstoječim odstavkom na strani, lahko uporabite spodnjo sintakso.
Dogodki in sintaksa jQuery
Tu so naslednji dogodki jQuery s sintakso, ki je navedena spodaj
1. Kliknite ()
Ta dogodek se zgodi vsakič, ko element kliknemo. Ta metoda click () se uporablja za sprožitev klikanega elementa, znanega tudi kot dogodek klika, ki se uporablja za pritrditev na funkcijo, kadar koli se zgodi dogodek, povezan s klikom.
Sintaksa
$(selector).click()
Če želite temu dogodku klika priložiti funkcijo,
$(selector).click(function)
Naslednji korak je vedno skupaj z dejanjem in sprožilom, ki tvorita dejansko delovanje in delovanje funkcije, zato je treba vsakič, ko se dogodek odpusti, na dogodek prenesti funkcijo.
Primer
$("p").click(function()(
// action which is triggered goes here!! ));
2. Dblclick ()
Ta metoda se uporablja za pripis funkcije prilagajalca dogodkov na priloženi element HTML. Ta funkcija se izvaja vsakič, ko uporabnik podvoji klik na določen element HTML.
Sintaksa
$(selector).dblclick()
Primer
$("p").dblclick(function()(
$(this).hide();
));
3. sprememba ()
Ta dogodek se zgodi vsakič, ko se vrednost določenega elementa spremeni, tj. Deluje samo za vhodne, besedilne in izbrane elemente. Metoda change () se uporablja za sprožitev dogodka spremembe ali tistega, ki se priklopi na funkcijo, kadar koli se mora zgoditi dogodek, povezan s spremembo.
Sintaksa
$(selector).change()
Primer
$("input").change(function()(
alert("This text related to this has been changed.");
));
4. zameglitev ()
Ta dogodek, povezan z zamegljenostjo, se zgodi le, ko element izgubi fokus. Metoda zameglitve (), ki se uporablja za sprožitev dogodka zamegljenosti ali tisto, ki se uporablja za pripenjanje funkcije, ki jo je treba zagnati, kadar koli pride do dogodka zamegljenosti. Ta metoda se pogosto uporablja z metodo focus ().
Sintaksa
$(selector).blur()
Primer
$("input").blur(function()(
alert("The field has lost its focus.");
));
5. podatki
Lastnost event.data se uporablja za shranjevanje neobvezno posredovanih podatkov, povezanih z metodo dogodka, ko je izvršilni rokovalnik za tok vezan.
Sintaksa
event.data
Primer
$("p").each(function(i)(
$(this).on("click", (x:i), function(event)(
alert("This index + ". paragraph has data: " + event.data.x);
));
));
6. imenski prostor
Ta lastnost se uporablja za vrnitev prostora po meri po meri, kadar koli se dogodek sproži. Lastnost uporabljajo avtorji vtičnikov, ki jih lahko uporabljate za različne naloge, kar je odvisno od uporabljenega imena. Imenski prostori, ki se začnejo s podčrtajem, so rezervirani prostori za JQuery.
Sintaksa
event.namespace
Primer
$("p").on("custom.someNamespace", function(event)(
alert(event.namespace);
));
7. PageX
To je lastnost vrste strani, ki se uporablja za vrnitev položaja kazalca miške, ki je povezan z levim stranskim robom dokumenta. Tovrstna lastnost se pogosto uporablja pri dogodku. Lastnost PageY.
Sintaksa
event.PageX
Primer
$(document).mousemove(function(event)(
$("span text ").text("X: " + event.pageX);
));
8. PageY
To je lastnost vrste strani, ki se uporablja za vrnitev položaja kazalca miške, ki je povezan z zgornjim robom dokumenta. Tovrstna lastnost se pogosto uporablja pri dogodku. Lastnost PageX.
Sintaksa
event.PageY
Primer
$(document).mousemove(function(event)(
$("span text ").text("Y: " + event.pageY);
));
9. rezultat
Lastnost event.result se uporablja, da vsebuje prejšnjo ali zadnjo vrednost, ki jo vrne upravljavec dogodkov, ki ga specifični dogodek sproži.
Sintaksa
event.result
Primer
$("button").click(function()(
return "Hi there!";
));
10. prevenDefault ()
Ta metoda, povezana z dogodkom.preventDefault (), se uporablja za zaustavitev privzetega dejanja določenega elementa. Primeri tega scenarija vključujejo:
Preprečevanje gumba za oddajo pred oddajo obrazca
Preprečite dostop do določenega URL-ja za povezavo.
Določen dogodek, kot je event.preventDefault (), se uporablja za preverjanje, ali se za klic dogodka uporablja metoda ali funkcija preventiveDefault ().
Sintaksa
event.preventDefault()
Primer
$("a").click(function(event)(
event.preventDefault();
));
11. Event.target ()
Ta lastnost se uporablja za vrnitev elementa DOM, ki ga bo sprožil ta dogodek. Najpogosteje je koristno primerjati ciljni dogodek s tem, da se ugotovi, ali se določen dogodek obravnava zaradi dogodka, imenovanega žuborenje.
Sintaksa
event.target
Primer
$("p, button, h2").click(function(event)(
$("div").html("Hi, triggered is " + event.target.NameNode + " new element.");
));
12. timeStamp
Ta lastnost se uporablja za vrnitev števila milisekund od 1. januarja 1970, kar ustreza prvemu trenutku, ko se je dogodek prvič dejansko sprožil.
Sintaksa
event.TimeStamp
Primer
$("button").click(function(event)(
$("span").text(event.timeStamp);
));
13. vrsta
Uporablja se za spremljanje dogodka in njegove vrste, ki se sproži.
Sintaksa
event.type
Primer:
$("p").on("click dblclick and mouse related events", function(event)(
$("div").html("Event: " + event.type);
));
14. ki ()
Ta lastnost se uporablja za vrnitev tipke tipkovnice ali miške, ki je bila pritisnjena za dogodek.
Sintaksa
event.which
Primer
$("input").keydown(function(event)(
$("div").html("Key: " + event.which);
));
15. fokus ()
Ta lastnost in fokus za ta dogodek se pojavi, ko element uporabimo, da dobimo fokus, ki se pojavi, ko ga izberemo s klikom miške ali s krmarjenjem po njem po zavihku. Metoda focus () se uporablja za sprožitev dogodka ostrenja ali dodajanje funkcije za zagon, kadar pride do dogodka, povezanega s fokusom.
Sintaksa
$(selector).focus()
Primer
$("input").focus(function()(
$("span").css("display", "inline").fadeOut(200);
));
16. kurzor ()
Ta metoda kazalca se uporablja za določitev dveh funkcij, ki se uporabljata za zagon, ko kazalec miške premakne miško nad vse izbrane elemente. Ta metoda sproži tako dogajanje s puščanjem miške kot z miško. Če je določena samo ena funkcija, se bo izvajala tako za dogodke mouseleave kot mouseenter.
Sintaksa
$(selector).hover(inFunction, outFunction)
Primer
$("p").hover(function()(
$(this).css("background-color", "blank");
), function()(
$(this).css("background-color", "yellow");
));
17. tipka ()
Vrstni red dogodkov, ki so povezani z dogodkom, je:
- Tipkovnica: uporablja se, ko je tipka na poti navzdol.
- Pritisnite tipko : To se zgodi, ko pritisnete tipko na tipkovnici
- Tipkovnica: Kot že ime pove, se to uporablja, ko pritisnete tipko navzgor.
Sintaksa
$(selector).keydown()
Primer
$("input").keydown(function()(
$("input").css("background-color", "black");
));
18. pritisk tipke ()
Vrstni red dogodkov, povezanih z dogodkom s pritiskom na tipko, je:
- Tipkovnica: uporablja se, ko je tipka na poti navzdol.
- Pritisnite tipko : To se zgodi, ko pritisnete tipko na tipkovnici
- Tipkovnica: Kot že ime pove, se to uporablja, ko pritisnete tipko navzgor.
Sintaksa
$(selector).keypress()
Primer
$("input").keypress (function()(
$("input").css("background-color", "black");
));
19. tipkovnica ()
Vrstni red dogodkov, ki so povezani z dogodkom tipkovnice, je:
- Tipkovnica: uporablja se, ko je tipka na poti navzdol.
- Pritisnite tipko : To se zgodi, ko pritisnete tipko na tipkovnici
- Tipkovnica: Kot že ime pove, se to uporablja, ko pritisnete tipko navzgor.
Sintaksa
$(selector).keyup()
Primer
$("input").keyup(function()(
$("input").css("background-color", "black");
));
20. V živo ()
Ta metoda (ali funkcija jquery) živi () se uporablja za pripenjanje enega ali več upravljavcev, ki temeljijo na dogodkih, ki se uporabljajo posebej za izbrane sezname elementov in določa tudi funkcijo, ki se bo izvajala tam, kjer se dogodki zgodijo. Vsi obdelovalci dogodkov so priloženi z metodo live (), ki bo delovala tako za trenutne kot PRIHODNE elemente, ki temeljijo na ujemanju izbirnih elementov, ki so lahko kot nov element, ustvarjen s skriptom. Metoda die () lahko uporabimo za uničenje metode live ().
Sintaksa
$(selector).live(event, data, function)
Primer
$("button").live("click", function()(
$("p").slideToggle();
));
21. Naloži ()
Metoda nalaganja se uporablja za pripenjanje obdelovalca dogodkov na dogodek, ki temelji na obremenitvi. Dogodek nalaganja se zgodi vsakič, ko se določi Ta dogodek se zgodi in deluje, kadar so elementi, povezani z URL-jem, kot so slika, okvir, skript, okvir slike in okenski predmet. Dogodek nalaganja se lahko ali ne sproži in je odvisen od brskalnika, tudi če je slika predpomnjena. Obstaja tudi metoda AJAX, ki je metoda jquery, znana kot load (), tista, ki se imenuje, je odvisna od parametrov.
Sintaksa
$(selector).load(function)
Primer
$("img").load(function()(
alert("stuff loaded.");
));
22. Mousedown
Do tega dogodka pride le, če levi gumb kazalca miške pritisnemo nad izbrani seznam elementa. Metoda ali funkcija mousedown () se uporablja za sprožitev tega dogodka, ki pripne funkcijo, in se izvaja, kadar se zgodi dogodek mousedown. Ta metoda se pogosto uporablja skupaj z metodo mouseup ().
Sintaksa
$(selector).mousedown()
Primer
$("div").mousedown(function()(
$(this).after("Down button pressed with mouse.");
));
23. Izklopljeno ()
Ta metoda se uporablja za odstranitev obdelovalca dogodkov, ki je priložen skupaj z metodo on (). Lahko rečemo, da gre za nadomestitev metode unbind (), die () in undelegate (). Ta metoda se uporablja za zagotavljanje veliko doslednosti v API-ju, zato je vedno priporočljivo uporabiti to metodo, saj se ta uporablja za poenostavitev baze kode Jquery.
Sintaksa
$(selector).off(event, selector, function(eventObj), map)
Primer
$("button").click(function()(
$("p").off("click");
));
24. mouseenter ()
Ta dogodek se zgodi vsakič, ko je kazalec miške nad določenim elementom in vnese, ko sproži dogodek miškega centra ali pa se uporablja za pripenjanje funkcije, ki se lahko uporablja za zagon, kadar koli se zgodi dogodek, ki temelji na miškinem centru.
Sintaksa
$(selector).mouseenter()
Primer
$("p").mouseenter(function()(
$("p").css("background-color", "black");
));
25. ličnica ()
Ta dogodek se zgodi vsakič, ko je kazalec miške nad določenim elementom in zapusti, ko sproži dogodek zapusti miško ali pa se uporablja za odstranjevanje funkcije, ki se lahko uporablja za zagon, kadar koli se zgodi dogodek, ki temelji na miškini.
Sintaksa
$(selector).mouseleave()
Primer
$("p").mouseleave(function()(
$("p").css("background-color", "black");
));
Jquery je ena od najbolj uporabljenih knjižnic, ko gre za razvoj sprednjega dela. To zagotavlja edinstvene funkcije in širok spekter funkcij, ki pomagajo, da je življenje razvijalcev in ljudi vsepovsod enostavno in priročno. Upam, da vam je bil naš članek všeč. Spremljajte naš blog za več takšnih.
Priporočeni članki
To je vodnik za jQuery Dogodke. Tukaj razpravljamo o seznamu najpogostejših in pogosto uporabljenih različnih dogodkov jQuery s sintakso in primeri. Za več informacij si lahko ogledate tudi naslednje članke -
- jQuery efekti
- jQuery metode
- Atributi jQuery
- Kako namestiti Jquery?
- 8 najboljših izbirnikov jQuery z implementacijo kode
- Vodnik po primerih JQuery Progress Bar
- Vodnik po različnih JavaScript dogodkih