jQuery Event Methods
jQuery is tailor-made to handle HTML/DOM events.
jQuery Event Methods
Event handlers are methods that are called when "something happens" in HTML.
The term "triggered (or "fired") by an event" is often used.
It is common to put jQuery code into event handler methods in the <head> section.
In the example below, a function is called when the click event for the button is triggered:
Example
<!DOCTYPE html>
<html>
<head>
<script src="jquery.js">
</script>
<script> $(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>
Functions In a Separate File
If your website contains a lot of pages, and you want your jQuery functions to be easy to maintain, you can put your jQuery functions in a separate .js file.
When we demonstrate jQuery in this tutorial, the functions are added directly into the <head> section. However, sometimes it is preferable to place them in a separate file, like this (use the src attribute to refer to the .js file):
Example
<head>
<script src="jquery.js">
</script>
<script src="my_jquery_functions.js">
</script>
</head>
Some jQuery Event Methods
Here are some examples of event methods in jQuery:
Event Method Description
$(document).ready(function) Specifies a function to execute when the DOM is fully loaded
$(selector).click(function) Binds/Triggers the click event
$(selector).dblclick(function) Binds/Triggers the double click event
$(selector).focus(function) Binds/Triggers the focus event
$(selector).mouseover(function) Binds/Triggers the mouseover event
jQuery is tailor-made to handle HTML/DOM events.
jQuery Event Methods
Event handlers are methods that are called when "something happens" in HTML.
The term "triggered (or "fired") by an event" is often used.
It is common to put jQuery code into event handler methods in the <head> section.
In the example below, a function is called when the click event for the button is triggered:
Example
<!DOCTYPE html>
<html>
<head>
<script src="jquery.js">
</script>
<script> $(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>
Functions In a Separate File
If your website contains a lot of pages, and you want your jQuery functions to be easy to maintain, you can put your jQuery functions in a separate .js file.
When we demonstrate jQuery in this tutorial, the functions are added directly into the <head> section. However, sometimes it is preferable to place them in a separate file, like this (use the src attribute to refer to the .js file):
Example
<head>
<script src="jquery.js">
</script>
<script src="my_jquery_functions.js">
</script>
</head>
Some jQuery Event Methods
Here are some examples of event methods in jQuery:
Event Method Description
$(document).ready(function) Specifies a function to execute when the DOM is fully loaded
$(selector).click(function) Binds/Triggers the click event
$(selector).dblclick(function) Binds/Triggers the double click event
$(selector).focus(function) Binds/Triggers the focus event
$(selector).mouseover(function) Binds/Triggers the mouseover event
0 comments :