Hello and welcome!! 🤩🤩🤩

We are slowly getting to the end of this series, and I am so excited! I hope you have had as much fun reading my articles as I have had writing them.

Today, we are taking a deep dive into jQuery, a popular Javascript library used for web development.

What is jQuery?

jQuery is a JavaScript library designed to simplify HTML DOM tree traversal and manipulation, as well as event handling, CSS animation, and Ajax. It is free, open-source software using the permissive MIT License. As of August 2022, jQuery was used by 77% of the 10 million most popular websites.

Basically, JQuery is to Javascript what Tailwind is to CSS in that it makes writing Javascript DOM manipulation codes shorter, cleaner, and more efficient.

Why should you learn jQuery?

jQuery takes a lot of everyday tasks that require many lines of JavaScript code to accomplish and wraps them into methods that you can call with a single line of code. There are lots of other JavaScript libraries out there, but jQuery is probably the most popular, and also the most extendable.

How to add jQuery to your HTML

Before you start using jQuery, you need to get it on your local IDE.

There are two ways to get jQuery

1. Downloading: jQuery is registered as a package on npm. You can install the latest version of jQuery on your terminal with the npm CLI command:

   npm install jquery

   As an alternative, you can use the Yarn CLI command:

   yarn add jquery

   This will install jQuery in the node_modules directory.

   Within node_modules/jquery/dist/ you will find an uncompressed release, a compressed release, and a map file.

   You can learn more about this download and other methods of downloading on the jQuery official documentation page.

2. Through a CDN: in our lesson, we talked about what a CDN is and how we can use it to download libraries and frameworks on to our local IDEs.

   To use the jQuery CDN, just reference the file in the script tag directly from the jQuery CDN domain. You can get the complete script tag, including Subresource Integrity attribute, by visiting here and clicking on the version of the file that you want to use. Copy and paste that tag into your HTML file.

   The following CDNs also host compressed and uncompressed versions of jQuery releases. Starting with jQuery 1.9 they may also host sourcemap files; check the site's documentation.

   Note that there may be delays between a jQuery release and its availability there. Please be patient; they receive the files at the same time the blog post is made public. Beta and release candidates are not hosted by these CDNs.

   • Google CDN

   • Microsoft CDN

   • CDNJS CDN

   • jsDelivr CDN

jQuery provides several methods to manipulate the DOM efficiently. You do not need to write big and complex code to set or get the content of any HTML element.

jQuery DOM Manipulation

jQuery provides methods such as attr(), html(), text() and val() which act as getters and setters to manipulate the content of HTML documents.

Basic jQuery DOM commands

1. Unlike in javascript DOM manipulation where we have

   document.querySelector("css-selector") as the way to target HTML elements, with jQuery, all we need is a dollar sign '$'. So, the initial example becomes

   $('css-selector')

    $('h1')
    //this is the basis syntax of a jQuery DOM manipulation code
   

2. To change any CSS style, we use the css method in the following syntax:

   $('css-selector').css('css-property','property-value')

3. To target (modify) only the text of an HTML element:

   $('css-selector).text("This is a new text!")

4. To target (modify) the text in an HTML element or to add a child element:

   $('css-selector').html("<en> Kiss me! </en>")

5. To set an attribute:

   $('css-selector').attr("attribute-type", "attribute-name")

6. To add or remove a class:

   $('css-selector').addClass("new-class")

   $('css-selector').removeClass("old-class")

7. To add multiple classes:

   $('css-selector').addClass("new-class new-class")

8. To add an event listener:

   $('css-selector').event(function(){--this is a function block--})

9. We can also add HTML elements to already existing elements, depending on where we want them:

   $('css-selector').before("element to be added") This adds the new element before the selected element.

   $('css-selector').after("element to be added") This adds the new element after the selected element.

   $('css-selector').prepend("element to be added") This adds the new element besides the selected element to the left.

   $('css-selector').append("element to be added") This adds the new element besides the selected element to the right.

Here is an example of using all we have learnt in one document:

You can also check out this github repo dealing how to build the Simon Game with jQuery.

That's all for today, guys!

I am so glad that I got to teach jQuery to you all. A lot of people will tell you that learning jQuery is not important to modern-day developers. Well, I disagree. I think learning jQuery helps solidify your foundation as a badass Javascript developer. Also, companies still ask for jQuery as a skill to be had for employment.

See you all next week!!

References

Image: What is jQuery?

jQuery HTML DOM Manipulation

Cover photo