jQuery
Updated:
✒ Reference: jQuery tutorial from W3 schools
What is jQuery?
jQuery is a JavaScript library that simplifies the usage of JavaScript. It contains features like:
- HTML/DOM manipulation
- CSS manipulation
- HTML event methods
- Effects and animations
- AJAX
- Utilities
Using jQuery
To use jQuery, you can (1) download it from jQuery.com, place the file in the same directory as the pages where you want to use it, and reference it with a <script> tag inside the <head> section:
<head>
<script src="jquery-3.5.1.min.js"></script>
</head>
or (2) include it from a CDN (Content Delivery Network). Using the hosted jQuery from Google CDN leads to faster loading time, since
- (a) jQuery from Google is already downloaded when visiting another site and loaded from cache when visiting your site
- and (b) most CDNs serve the requested file from the server closest to the user.
jQuery functions can be placed in a separate file, then referred to as a script source.
// Google CDN
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="my_jquery_functions.js"></script>
</head>
jQuery Syntax
jQuery uses CSS syntax to select HTML elements and perform some action on the element(s).
The basic syntax is: $(selector).action()
- A
$sign to define/access jQuery - A
(selector)to “query (or find)” HTML elements - A jQuery
action()to be performed on the element(s)
The Document Ready Event
Running jQuery methods before the document is fully loaded may cause problems like accessing components that are not created or loaded yet. To prevent this from happening, all jQuery methods are inside a document ready event.
$(document).ready(function(){
// jQuery methods go here...
});
$(function(){
// A shorter version
});
Selectors
jQuery selectors are used to “find” and “select” HTML elements based on their name, id, classes, types, attributes, values of attributes, and much more. It is based on the existing CSS Selectors, and also has some own custom selectors.
- The element selector:
$("p")
// When a user clicks on a button, all <p> elements will be hidden:
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
- The #id selector:
$("#test")
// When a user clicks on a button, the element with id="test" will be hidden:
$(document).ready(function(){
$("button").click(function(){
$("#test").hide();
});
});
- The .class selector:
$(".test")
// When a user clicks on a button, the elements with class="test" will be hidden:
$(document).ready(function(){
$("button").click(function(){
$(".test").hide();
});
});
The complete reference of all the jQuery selectors is available in jQuery documentation or w3schools reference documentation.
Events
All the different visitor’s actions that a web page can respond to are called events. The term “fires/fired” is often used. (i.e. “The keypress event is fired, the moment you press a key.)
Most DOM events have an equivalent jQuery method. You must pass a function to the event to define what should happen when the event is fired.
Methods attach the given event handler function to an HTML event, and execute the function according to user’s “actions”.
| Method | When is the event handler function executed? |
|---|---|
click() |
When the user clicks on the HTML event |
dblclick() |
When the user double-clicks on the HTML element |
mouseenter() |
When the mouse pointer enters the HTML element |
mouseleave() |
When the mouse pointer leaves the HTML element |
mousedown() |
When the left, middle or right mouse button is pressed down, while the mouse is over the HTML element |
mouseup() |
When the left, middle or right mouse button is released, while the mouse is over the HTML element |
hover() |
Combination of the mouseenter() and mouseleave()*. |
focus() |
When the form field gets focus |
blur() |
When the form field loses foucs |
Events - Examples
hover()takes two functions, where the first function is executed atmouseenter()and the second is executed atmouseleave().
$("#p1").hover(function(){
alert("You entered p1!");
},
function(){
alert("Bye! You now leave p1!");
});
focus()andblur()handles form fields.
$("input").focus(function(){
$(this).css("background-color", "#cccccc");
});
$("input").blur(function(){
$(this).css("background-color", "#ffffff");
});
on()method attaches one or more event handlers for the selected elements.
// Attach multiple event hanlders to a <p> element:
$("p").on({
mouseenter: function(){
$(this).css("background-color", "lightgray");
},
mouseleave: function(){
$(this).css("background-color", "lightblue");
},
click: function(){
$(this).css("background-color", "yellow");
}
});
Leave a comment