Zdarzenia jQuery

jQuery jest specjalnie zaprojektowany do obsługi zdarzeń.

Funkcje zdarzeń jQuery

Metody obsługi zdarzeń jQuery to główne funkcje w jQuery.

Program obsługi zdarzeń to metoda wywoływana, gdy w HTML występuje pewne zdarzenie. Termin "wyzwalany" (lub "wzniecony") jest często używany.

Zwykle umieszcza się kod jQuery w metodach obsługi zdarzeń w sekcji <head>:

Przykład

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$("document").ready(function(){
  $("button").click(function(){
    $("p").hide();
  });
});
</script>
</head>
<body>
<h2>To jest nagłówek</h2>
<p>To jest akapit.</p>
<p>To jest inny akapit.</p>
<button>Click me</button>
</body>
</html>

Spróbuj sam

W powyższym przykładzie, funkcja jest wywoływana, gdy zdarzenie kliknięcia przycisku jest uruchomione:

$("button").click(function() {  // pewien kod... } )

Ta metoda ukrywa wszystkie elementy <p>:

$("p").hide();

Funkcje w osobnym pliku

Jeśli Twoja strona zawiera wiele stron i chcesz, aby Twoje funkcje jQuery były łatwe do utrzymania, umieść swoje funkcje jQuery w oddzielnym pliku .js.

Kiedy pokazujemy jQuery w naszych tutorialach, dodajemy funkcje bezpośrednio do sekcji <head>. Ale lepiej jest umieścić je w osobnym pliku, tak jak tutaj (odnosi się do pliku za pomocą atrybutu src):

Przykład

<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="my_jquery_functions.js"></script>
</head>

Konflikt nazw jQuery

jQuery używa symbolu $ jako skrótu do jQuery.

Funkcje w niektórych innych bibliotekach JavaScript (np. Prototype) również używają symbolu $.

jQuery używa metody o nazwie noConflict() do rozwiązania tego problemu.

var jq=jQuery.noConflict()pomaga Ci używać własnej nazwy (np. jq) zamiast symbolu $.

Spróbuj sam

Wnioski

Ponieważ jQuery jest specjalnie zaprojektowany do obsługi wydarzeń HTML, jeśli przestrzegasz poniższych zasad, twój kod będzie bardziej odpowiedni i łatwiejszy do utrzymania:

  • Umieść wszystkie kod jQuery w funkcji handlera wydarzenia
  • Umieść wszystkie funkcje obsługi wydarzeń w handlerze wydarzenia gotowości dokumentu
  • Umieść kod jQuery w osobnym pliku .js
  • Jeśli występuje konflikt nazw, zmień nazwę biblioteki jQuery

Zdarzenia jQuery

Poniżej znajdują się kilka przykładów metod wydarzeń w jQuery:

Funkcji wydarzenia Powiąż funkcję do
$(document).ready(function) Powiąż funkcję z wydarzeniem gotowości dokumentu (kiedy dokument jest zakończony ładowanie)
$(selector).click(function) Wywołaj lub powiąż funkcję z wydarzeniem kliknięcia elementu wybranego
$(selector).dblclick(function) Wywołaj lub powiąż funkcję z wydarzeniem podwójnego kliknięcia elementu wybranego
$(selector).focus(function) Wywołaj lub powiąż funkcję z wydarzeniem fokusowania elementu wybranego
$(selector).mouseover(function) Wywołaj lub powiąż funkcję z wydarzeniem myszy nad elementem wybranym

Aby uzyskać pełny podręcznik, odwiedź naszą jQuery Podręcznik do Eventów.