In a Hurry, Try jQuery
These days the native JavaScript API can do almost anything, but still interested in saving a little time? Get your hands dirty with the jQuery
jQuery was created back in 2006 when the internet was a much different space. It is a JavaScript library that greatly simplifies programming with JavaScript and it's pretty easy to use. It is used in the vast majority of websites and provides a simple API making DOM manipulation, animations, AJAX, and cross-browser compatibility a breeze. However, in 2021 native JavaScript and front-end frameworks like React and Vue can easily replace the necessity for jQuery in your application. On the other hand, as it's bundled with every WordPress installation, and WordPress websites make up about 20% of all self-hosted sites in 2020, so it's still a valuable tool when working with this CMS giant.
To get started you will need to download the jQuery library from jQuery.com and place a script tag in the head of your html document pointing to it.
<head>
<script src="jquery-3.5.1.min.js"></script>
</head>Conversely, you can include it from a Content Delivery Network.
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>The basic syntax for a jQuery action is $(selector).action(). The $ sign accesses the jQuery library, the selector is a CSS selector that finds an HTML element and the action() is the method to be used on the element.
To make sure the DOM has loaded and prevented code from running on a yet to exists document. Do this….
$(document).ready(function(){
// ALL YOUR METHODS CAN GO IN HERE
});Using jQuery it's super easy to respond to events that happen on an HTML page. I’ll list a couple of examples.
- click
- keypress
- mouseenter
- submit
- scroll
The syntax to assign an action to a jQuery object is as follows.
$("p").click();Also, you can provide a callback function that fires when an event occurs.
$("div").mousedown(function(){
alert("Mouse down over the div");
});jQuery object can be easily hidden or shown.
$("button").click(function(){
$("div").hide();
});
$("button").click(function(){
$("div").show();
});Additionally, you can use the toggle method to switch between hidden and shown.
Another cool thing jQuery makes super easy is fading elements in and out. It provides four go-to methods including fadeIn(), fadeOut(),fade toggle(), and fadeTo().
Alright, so there you have it. jQuery is awesome and I still believe somewhat relevant in 2021. It can do so much more, and I implore you to explore it more here.
