jQuery händelser

jQuery är särskilt utvecklad för händelsehantering.

jQuery-händelsesfunktioner

jQuery-händelsehanteringsmetoder är kärnfunktioner i jQuery.

En händelsehanterare är en metod som anropas när vissa händelser inträffar i HTML. Termer som "utlösas" (eller "utlöser") används ofta.

Vanligtvis placeras jQuery-kod i <head>-delens händelsehanteringsmetoder:

Exempel

<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>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button>
</body>
</html>

Prova själv

I det ovanstående exemplet anropas en funktion när knappens klickhändelse aktiveras:

$("button").click(function() {  // some code... } )

Denna metod döljer alla <p>-element:

$("p").hide();

Funktioner i en enskild fil

Om din webbplats innehåller många sidor och du vill att dina jQuery-funktioner ska vara lätt att underhålla, placera dina jQuery-funktioner i en separat .js-fil.

När vi demonstrerar jQuery i vår handledning lägger vi direkt till funktioner i <head>-sektionen. Men det är bättre att placera dem i en separat fil, så här (genom att använda src-egenskapen för att hänvisa till filen):

Exempel

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

jQuery-namnkonflikt

jQuery använder $-symbolen som en introduktion till jQuery.

Funktioner i vissa andra JavaScript-bibliotek (t.ex. Prototype) använder också $-symbolen.

jQuery använder metoden noConflict() för att lösa detta problem.

var jq=jQuery.noConflict()，hjälper dig att använda ditt eget namn (t.ex. jq) för att ersätta $-symbolen.

Prova själv

Slutsats

Eftersom jQuery är särskilt utvecklad för att hantera HTML-händelser, kommer din kod att vara mer lämplig och lättare att underhålla om du följer följande principer:

  • Placera alla jQuery-kod i eventhanteringsfunktioner
  • Placera alla eventhanteringsfunktioner i dokumentets klara eventhanterare
  • Placera jQuery-koden i ett separat .js-fil
  • Om det finns namnkonflikter, byt namn på jQuery-biblioteket

jQuery händelser

Här är några exempel på jQuery-händelsemetoder:

Event-funktioner Bind funktion till
$(document).ready(function) Bind funktion till dokumentets klara event (när dokumentet har laddats klart)
$(selector).click(function) Utlös eller bind funktion till klicksevent på valt element
$(selector).dblclick(function) Utlös eller bind funktion till dubbelklicksevent på valt element
$(selector).focus(function) Utlös eller bind funktion till fokuseringsevent på valt element
$(selector).mouseover(function) Utlös eller bind funktion till musepeksändelse på vald element

För en fullständig referenshandbok, besök vår jQuery händelsesreferenshandbok。