Introduction
jQuery is an intuitive way to realize common JavaScript tasks consistently across major browsers. It makes it really easy to select elements with CSS-style selectors, animate, use event listeners, and update the DOM.
// this function lets you find elements on the page
jQuery()
// a typical shorthand used for the jQuery object is
$()
/*
this function creates a jQuery object, selecting
all list items with a class of 'cool'
*/
$('li.cool');
// we can toggle additional classes on and off like so
$('li.cool').toggleClass('done');
jQuery's cross-browser capabilities allow users to avoid the need for writing fallback code to support older browsers.
Element Functionality
jQuery Method: .blur()
Blur events occur when an element loses focus. This event can work for all element types. An element may lose its focus by a mouse click on a different element on the page, or if the user is traversing the page with keyboard commands (such as pressing the Tab key to move to the next element).
/*
.blur( [eventData ], handler )
- eventData: data object that will be passed to the event handler
- handler: function to be executed every time the event is triggered
here we turn the color of the input field the user just left
black, and send a message to the console
*/
$(document).ready(() => {
$("input").blur(function(){
$(this).css("background-color", "#000000");
console.log(`Until next time, friend!`);
});
});
Element Animation
jQuery Method: .fadeOut()
fadeOut() fades out all matching elements from opaque to invisible
/*
.fadeOut( [duration ] [, complete ] )
- duration: (default: 400) optional number or string designating
how long the animation takes to complete
- complete: optional callback function to call after
animation completes
fades out all list items with a class of cool
*/
$("button").click(() => {
$("li.cool").fadeOut();
});
.fadeOut also includes additional easing options to control the speed of the animation
/*
.fadeOut( options )
- options: object to pass additional options to the method
+ easing: (default: swing) string indicating which easing function
to use for the transition. swing goes slow in the beginning, speeds
up, then slows down again at the end, whereas linear has a
constant speed throughout.
*/
$("button").click(() => {
$("div").fadeOut(200);
});
Server Communication
jQuery Method: AJAX $.get()
The REST acronym stands for REpresentational State Transfer. REST APIs allows you to interact with servers Get requests and attempts to retrieve data from a specified server.
/*
$.get(url [, callback]);
- url: specifies the URL of the server you intend to request
- callback: optionally name a function to call if successful
here we take input from the user and request the server for a JSON
file containing information pertaining to that user's account, and
display it on the page
*/
$(document).ready(function(){
$("button").click(function(){
let username = $("#input").val();
$.get("profile.json", {user: username} , function(data){
$("#profile").html(data);
});
});
});
jQuery Method: AJAX $.post()
Submits data to a specified server.
/*
$.( url [, data ] [, success ] [, dataType ] );
- url: specifies the URL of the server you intend to send data to
- data: optionally specify data to send with the request
- callback: optionally name a function to call if successful
- dataType: the type of data expected from the server
here we ask the server the price of an item on the page
*/
$(document).ready(function(){
$("button").click(function(){
$.post('http://example.com/form.php,
{category:'client', type:'premium'},(data) => {
console.log(`data retrieved`);
$("#pricetag").html(data.amount);
});
});
});
Using REST API, we can submit authentication keys with our AJAX requests so that the server will talk to us. Here is a more complex example using REST API headers in our postSettings object being submitted in our $.ajax call to authenticate the connection with the server
const postSettings = {
"url": "http://server.location.com/inbox",
"method": "POST",
"timeout": 0,
"headers": {
"X-Parse-Application-id": "writeKeyid",
"X-Parse-REST-API-Key": "writeAPIkey"
"Content-Type": "application/json",
},
};
$.ajax(postSettings).done(data => console.log(data));
Conclusion
jQuery is an invaluable and powerful tool for achieving otherwise cumbersome JavaScript tasks swiftly and efficiently. We can perform functionality such as blur, animations such as fadeOut, and interact with servers using jQuery AJAX methods. With browser-compatibility operating under the hood so you can focus more on creating and less on worrying about users who haven't updated their browsers in years, we can use jQuery to increase accessibility of our websites.
In closing, I highly recommend this impressively useful cheatsheet Oscarotero has put out for jQuery.
Top comments (1)
I'm curious -- and I hope you understand that I'm not condescending -- but is jquery still widely used in industry nowadays?