Love it or hate it, JavaScript is the king of client side scripting. What if I told you there was a lightweight write less do more library for JavaScript? Well there is and it’s called jQuery. Its easy to get started with and quickly learn.
Getting jQuery
To get access to jQuery you will need to load the library in a script tag in your HTML. You can do this two ways. Either you download jQuery, or use a CDN1.
Download
Downloading jQuery is easy. To download jQuery you simply head over to jQuery.com. Select what build you want and download the file. Now all you need to do is put the JavaScript file in with your scripts and reference it in the head of your HTML.
<head>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
</head>
Easy as pie!
CDN
If you don’t want to download and serve jQuery yourself you can instead use a CDN. You can use Google or Microsoft to get jQuery.
For Google use
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
and for Microsoft.
<head>
<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
</head>
jQuerys lightweight syntax
Just like before you’ll still be able to select and work with HTML elements, but you’ll find its much easier now with jQuery. In plain JavaScript to select an element you could go about a few ways such as.
document.getElementsByTagName("p");
document.getElementsByClassName("mainParagraphs");
document.getElementById("firstParagraph");
But with jQuerys syntax you can quickly query to select HTML with little text.
$("p");
$(".mainParagraphs");
$("#firstParagraph");
The basic syntax here is $(query).action() but you don’t need an action.
- The $ is the symbol used to refer to jQuery.
- (query) is where you define your HTML query using CSS selectors.
- Lastly .action() is where you can call a jQuery action to work on the selected HTML.
CSS selectors
Based on CSS selectors jQuery makes finding HTML a breeze. The most commonly used selectors are elements, class, and id selectors.
$("h1");
//Selects all h1 elements.
$(".nav");
//Selects all elements with the nav class.
$("#subscribeButton");
//Select the element with the id subscribeButton.
$("*");
//Selects all.
$(this);
//Selects the current element.
$("a.contactLinks");
//Selects all links with the class contactLinks.
$("ul li");
//Selects all li elements that are children of ul elements.
$("ul>li");
//Selects all li elements that are direct children of ul elements.
These are just some of the selectors but there are plenty out there for all your querying needs.
Goodbye addEventListener()
Users visiting a web page will preform actions and we use JavaScript to respond to those events. These DOM2 events are events such as clicks, key presses, mouse over, scroll, and load. If you’ve worked with JavaScript you’ll know that adding a load event listener to wrap your script is a must if you’re working with the DOM. Thankfully jQuery has streamlined the process of listening and responding to events. Take a look at how simple events become.
window.addEventListener("load", function(){
var paragraphs = document.getElementsByTagName("p");
var i;
for (i = 0; i < paragraphs.length; i++){
paragraph[i].addEventListener("click", function(){
this.style.display = "none";
});
};
});
$(document).ready(function(){
$("p").click(function(){
$(this).hide();
});
})
Both scripts do the same thing. Adding a event listener to all the p elements that causes them to be hidden when clicked. Only difference is how one is written with JavaScript and the other leveraging the power of jQuery.
Conclusion
Although this is only a short look into jQuery it does show how useful this library can be. Selecting elements no longer has four different functions you have to type but now just one! Adding events is simple and allows you to write multiple events on selected HTML using one function. There is just so much this library can do. I recommend checking out jQuery fully for yourself!