jQuery Gebeurtenis Metodes
jQuery is pasgemaak om te reageer op gebeure in 'n HTML-bladsy.
Wat is gebeure?
Al die verskillende besoekers se handelinge waarop 'n webblad kan reageer, word gebeurtenisse genoem.
'n Gebeurtenis verteenwoordig die presiese oomblik wanneer iets gebeur.
Voorbeelde:
- beweeg 'n muis oor 'n element
- kies 'n radioknoppie
- klik op 'n element
Die term "brande/vuur" word dikwels met gebeurtenisse gebruik. Voorbeeld: "Die sleuteldrukgebeurtenis word afgevuur, die oomblik wat jy 'n sleutel druk".
Hier is 'n paar algemene DOM-geleenthede:
Mouse Events | Keyboard Events | Form Events | Document/Window Events |
---|---|---|---|
click | keypress | submit | load |
dblclick | keydown | change | resize |
mouseenter | keyup | focus | scroll |
mouseleave | blur | unload |
jQuery-sintaksis vir gebeurtenismetodes
In jQuery het die meeste DOM-gebeurtenisse 'n ekwivalente jQuery-metode.
Om 'n klikgebeurtenis aan alle paragrawe op 'n bladsy toe te ken, kan jy dit doen:
$("p").click();
Die volgende stap is om te definieer wat moet gebeur wanneer die gebeurtenis brand. Jy moet 'n funksie na die geleentheid deurgee:
$("p").click(function(){
// action goes here!!
});
Algemeen gebruikte jQuery-gebeurtenismetodes
$(document).ready()
Die $(document).ready()
metode stel ons in staat om 'n funksie uit te voer wanneer die dokument volledig gelaai is. Hierdie gebeurtenis word reeds in die
jQuery Sintaksis hoofstuk verduidelik.
klik ()
Die click()
metode heg 'n gebeurtenis hanteerder funksie aan 'n HTML element.
Die funksie word uitgevoer wanneer die gebruiker op die HTML-element klik.
Die volgende voorbeeld sê: Wanneer 'n klikgebeurtenis op 'n <p>
element brand; versteek die huidige <p>
element:
Voorbeeld
$("p").click(function(){
$(this).hide();
});
dblclick()
Die dblclick()
metode heg 'n gebeurtenis hanteerder funksie aan 'n HTML element.
Die funksie word uitgevoer wanneer die gebruiker op die HTML-element dubbelklik:
Voorbeeld
$("p").dblclick(function(){
$(this).hide();
});
muisinvoer()
Die mouseenter()
metode heg 'n gebeurtenis hanteerder funksie aan 'n HTML element.
Die funksie word uitgevoer wanneer die muiswyser die HTML-element ingaan:
Voorbeeld
$("#p1").mouseenter(function(){
alert("You entered p1!");
});
muisleaf()
Die mouseleave()
metode heg 'n gebeurtenis hanteerder funksie aan 'n HTML element.
Die funksie word uitgevoer wanneer die muiswyser die HTML-element verlaat:
Voorbeeld
$("#p1").mouseleave(function(){
alert("Bye! You now leave p1!");
});
muisaf()
Die mousedown()
metode heg 'n gebeurtenis hanteerder funksie aan 'n HTML element.
Die funksie word uitgevoer wanneer die linker-, middel- of regtermuisknoppie afgedruk word, terwyl die muis oor die HTML-element is:
Voorbeeld
$("#p1").mousedown(function(){
alert("Mouse down over p1!");
});
muisop()
Die mouseup()
metode heg 'n gebeurtenis hanteerder funksie aan 'n HTML element.
Die funksie word uitgevoer wanneer die linker-, middel- of regtermuisknoppie vrygestel word, terwyl die muis oor die HTML-element is:
Voorbeeld
$("#p1").mouseup(function(){
alert("Mouse up over p1!");
});
sweef()
Die hover()
metode neem twee funksies en is 'n kombinasie van die mouseenter()
en mouseleave()
metodes.
Die eerste funksie word uitgevoer wanneer die muis die HTML-element binnegaan, en die tweede funksie word uitgevoer wanneer die muis die HTML-element verlaat:
Voorbeeld
$("#p1").hover(function(){
alert("You entered p1!");
},
function(){
alert("Bye! You now leave p1!");
});
fokus()
Die focus()
metode heg 'n gebeurtenis hanteerder funksie aan 'n HTML vorm veld.
Die funksie word uitgevoer wanneer die vormveld fokus kry:
Voorbeeld
$("input").focus(function(){
$(this).css("background-color", "#cccccc");
});
vervaag ()
Die blur()
metode heg 'n gebeurtenis hanteerder funksie aan 'n HTML vorm veld.
Die funksie word uitgevoer wanneer die vormveld fokus verloor:
Voorbeeld
$("input").blur(function(){
$(this).css("background-color", "#ffffff");
});
Die on() metode
Die on()
metode heg een of meer gebeurtenishanteerders vir die geselekteerde elemente aan.
Heg 'n klikgeleentheid aan 'n <p>
element:
Voorbeeld
$("p").on("click", function(){
$(this).hide();
});
Heg veelvuldige gebeurtenishanteerders aan 'n <p>
element:
Voorbeeld
$("p").on({
mouseenter: function(){
$(this).css("background-color", "lightgray");
},
mouseleave: function(){
$(this).css("background-color", "lightblue");
},
click: function(){
$(this).css("background-color", "yellow");
}
});
jQuery Oefeninge
jQuery Gebeurtenis Metodes
Vir 'n volledige jQuery-gebeurtenisverwysing, gaan asseblief na ons jQuery Events Reference .