Heim >Web-Frontend >js-Tutorial >Zusammenfassung des jQuery-Mausereignisses_jquery

Zusammenfassung des jQuery-Mausereignisses_jquery

WBOY
WBOYOriginal
2016-05-16 15:41:351095Durchsuche

Mausereignisse werden ausgelöst, wenn der Benutzer den Mauszeiger bewegt oder mit einer beliebigen Maustaste klickt.

1. Klickereignis : Wird ausgelöst, wenn mit der linken Maustaste geklickt wird

 $('p').click(function(){});

Beispiel:

$('p').click(function(){
        alert('click function is running !');
       });

2. dbclick-Ereignis : Wird ausgelöst, wenn zwei Klicks schnell hintereinander ausgeführt werden

 $('p').dbclick(function(){});

Beispiel:

$("button").dblclick(function(){
 $("p").slideToggle();
});

3. Mousedown-Ereignis : Wird ausgelöst, wenn die Maus gedrückt wird

 $('p').mousedown(function(){});

Beispiel

$("button").mousedown(function(){
 $("p").slideToggle();
});

4. Mouseup-Ereignis : Wird ausgelöst, wenn die Maus losgelassen wird

 $('p').mouseup(function(){});

Beispiel:

$("button").mouseup(function(){
 $("p").slideToggle();
});

5. Mouseover-Ereignis : wird ausgelöst, wenn sich die Maus von einem Element zu einem anderen bewegt

 Mouseout-Ereignis: Wird ausgelöst, wenn sich die Maus aus einem Element herausbewegt

 $('p').mouseover(function(){});

$('p').mouseout(function(){});

Beispiel:

$("p").mouseover(function(){
 $("p").css("background-color","yellow");
});
$("p").mouseout(function(){
 $("p").css("background-color","#E9E9E4");
});

6. Mouseenter-Ereignis : Wird ausgelöst, wenn sich die Maus in ein Element bewegt

Mouseleave-Ereignis: Wird ausgelöst, wenn sich die Maus aus einem Element herausbewegt

 $('p').mouseenter(function(){});

$('p').mouseleave(function(){});

Beispiel

$("p").mouseenter(function(){
 $("p").css("background-color","yellow");
});
$("p").mouseleave(function(){
 $("p").css("background-color","#E9E9E4");
});

7. Hover-Ereignis

 $('p').hover(
function(){},
function(){}
);

Beispiel

$(".table_list tr").hover( 
function () { 
$(this).addClass("hover"); 
}, 
function () { 
$(this).removeClass("hover"); 
} 

); 

8. Umschaltereignis : Mausklick-Umschaltereignis

 $('p').toggle(
function(){},
function(){}
);

Beispiel

$("p").toggle(
 function(){
 $("body").css("background-color","green");},
 function(){
 $("body").css("background-color","red");},
 function(){
 $("body").css("background-color","yellow");}
);

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn