T
Tutorials
  • Introduction
  • What is jQuery?
  • Why jQuery?
  • How to add jQuery to web pages
  • jQuery Syntax
  • What is the Document Ready Event
  • jQuery Selectors
  • Functions In a Separate File
  • What are Events?
  • jQuery Syntax For Event Methods
  • Commonly Used jQuery Event Methods
  • Hide and Show effects
  • jQuery Toggle
  • jQuery Fading
  • jQuery Sliding Methods
  • animate() Method
  • jQuery stop() Method
  • jQuery Callback Functions
  • jQuery Method Chaining
jQuery Tutorial
Computer Science
FREE
JS Developer
Liked course tutorial 24, Oct. 2023
Computer Science

$(document).ready()

The $(document).ready() method allows us to execute a function when the document is fully loaded.

click()

The click() method attaches an event handler function to an HTML element.

The function is executed when the user clicks on the HTML element.

The following example says: When a click event fires on a <p> element; hide the current <p> element:

$("p").click(function(){
  $(this).hide();
});


dblclick()

The dblclick() method attaches an event handler function to an HTML element.

The function is executed when the user double-clicks on the HTML element.


mouseenter()

The mouseenter() method attaches an event handler function to an HTML element.

The function is executed when the mouse pointer enters the HTML element.


mouseleave()

The mouseleave() method attaches an event handler function to an HTML element.

The function is executed when the mouse pointer leaves the HTML element.


mousedown()

The mousedown() method attaches an event handler function to an HTML element.

The function is executed, when the left, middle or right mouse button is pressed down, while the mouse is over the HTML element.


mouseup()

The mouseup() method attaches an event handler function to an HTML element.

The function is executed, when the left, middle or right mouse button is released, while the mouse is over the HTML element.


hover()

The hover() method takes two functions and is a combination of the mouseenter() and mouseleave() methods.

The first function is executed when the mouse enters the HTML element, and the second function is executed when the mouse leaves the HTML element.


focus()

The focus() method attaches an event handler function to an HTML form field.

The function is executed when the form field gets focus.


blur()

The blur() method attaches an event handler function to an HTML form field.

The function is executed when the form field loses focus.


The on() Method

The on() method attaches one or more event handlers for the selected elements.

JS Developer
Liked course tutorial 24, Oct. 2023
Computer Science

In jQuery, most DOM events have an equivalent jQuery method.

To assign a click event to all paragraphs on a page, you can do this:

$("p").click();

The next step is to define what should happen when the event fires. You must pass a function to the event:

$("p").click(function(){
  // action goes here!!

});

JS Developer
Liked course tutorial 24, Oct. 2023
Computer Science
jQuery is tailor-made to respond to events in an HTML page.

All the different visitors' actions that a web page can respond to are called events.

An event represents the precise moment when something happens.

Examples:

  • moving a mouse over an element
  • selecting a radio button
  • clicking on an element

The term "fires/fired" is often used with events. Example: "The keypress event is fired, the moment you press a key".

Here are some common DOM events:

Mouse EventsKeyboard EventsForm EventsDocument/Window Events
clickkeypresssubmitload
dblclickkeydownchangeresize
mouseenterkeyupfocusscroll
mouseleave blurunload
JS Developer
Liked course tutorial 24, Oct. 2023
Computer Science

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):

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script src="my_jquery_functions.js"></script>
</head>

JS Developer
Liked course tutorial 24, Oct. 2023
Computer Science
$(document).ready(function(){

  // jQuery methods go here...

});

This is to prevent any jQuery code from running before the document is finished loading (is ready).

It is good practice to wait for the document to be fully loaded and ready before working with it. This also allows you to have your JavaScript code before the body of your document, in the head section.

Here are some examples of actions that can fail if methods are run before the document is fully loaded:

  • Trying to hide an element that is not created yet
  • Trying to get the size of an image that is not loaded yet
The jQuery team has also created an even shorter method for the document ready event:

$(function(){

  // jQuery methods go here...

});

Use the syntax you prefer.