How To Master jQuery in a Few Hours

What is jQuery?

JQuery is a library which brings along additional functionality to the standard ones JavaScript provides. These additional functionalities are wrapped in methods that would be translated into multiple lines of code in JavaScript. In other words, it simplifies your code, bringing it down to a lighter version that contains fewer lines and syntax.

Why use jQuery in 2022?

Even though JavaScript has expanded a lot over the past few years and has arrived at a very intuitive and complex version in 2022, there are still functionalities that are more easily achieved by the use of the methods jQuery provides. 

As mentioned above, we can replace multiple lines of code with a simple built-in function from this library, therefore ending with less code that is easier to maintain, structure and debug. 

In addition to this, jQuery respects the principle of chaining methods the same way as JavaScript does, so the transition between them is not difficult to make.

Besides these, the selectors in jQuery are more intuitive, and you won’t need to loop over the selected DOM elements in order for you to be able to manipulate them. 

One example demonstrating this fact could be the following:

If we want to add a class and an attribute to multiple <a> elements, in plain JavaScript we would have to write something like this:

const navItems = document.querySelectorAll(‘a’); for (let i = 0; i < navItems.length; i++) { navItems[i].classList.add(‘nav-link’);

navItems[i].addAttribute(’target’, ‘_blank’);

}

Or

const navItems = document.querySelectorAll(‘li’); navItems.forEach((item, index) => { item.classList.add(‘nav-link’); item.addAttribute(’target’, ‘_blank’); })

The equivalent in jQuery would be a simple line of code: $(‘a’).addClass(‘nav-link’).attr(’target’,’_blank’);

In the end, we can look at another benefit of using jQuery, in particular the huge number of plugins available for developers. They can all be found in the documentation provided by the team behind jQuery, and they can help reduce the working hours for different components of an app, from forms to carousels and states.

Prerequisites

• Strong knowledge of HTML5 and CSS3;

• Good understanding of JavaScript.

Learn jQuery In a Few Hours

There are a lot of materials and video tutorials for jQuery online, open source or paid, but if you’d prefer a different approach, we might have a few ideas that would help you achieve your goal. 

The documentation provided by jQuery is complex and covers everything you need to know about the library, but there are other well-known platforms from where you can start, such as w3schools or geeksforgeeks that have easier-to-read syntax and nice structuration of the concepts.

These are the steps we would recommend for a smooth learning experience:

1. Install the jQuery library from the official web page (link mentioned above) or use the Google CDN for this library in your .html file. Make sure you have some content inserted into the page, different types of tags and a bit of styling so you would be able to play around with them while exercising.

2. Get comfortable with the syntax, variable declarations and element selectors in order to be able to manipulate the DOM.

3. Play around with the HTML/CSS and traversing methods jQuery provides: using the selectors reminded above, try to manipulate the DOM of your page using some of the most popular methods, such as: .addClass(), .attr(), .css(), .toggleClass(), .val(), .last(), .has(), .not() etc. Some of the actions you might want to include might be: changing the style of certain elements, inserting or removing elements altogether, etc. When using them, try writing their correspondent in JavaScript below or above the specific lines of code and reflect on the differences between the two variants of the same solution.

4. The next step should be to play around with the effective methods that create animation effects jQuery is famous for. Methods like .slideUp(), .slideDown(), .fadeIn(), .fadeOut(), .toggle() etc. make any developer’s life easier as they erase a lot of CSS properties and JavaScript functions by automatically adding them through the use of these methods.

5. Experiment with the event methods in jQuery. Attach listeners to your DOM elements for the events you use the most in JavaScript and after that try to translate them into jQuery methods. Some of them might be found in the following list: .click(), .dblclick(), .on(), .hover() etc. Proposal for a coding challenge: create a menu in your HTML and manipulate its interface through the use of effect and event methods.

6. Lastly, make some AJAX calls with the methods provided by jQuery. We recommend you find an easy to use and free API from this list: https://github.com/public-apis/public-apis and try to make some API calls using $.ajax(), $.get() or $.getJSON().

And then you are done! Nice and easy “homemade” guide to mastering jQuery in just a few hours. If by the end of the learning period it excites you just as much as it excited us, we recommend solidifying all the concepts into building a nice and simple carousel that you can recycle in your projects later. Here are some sources of inspiration: https://codepen.io/matthewwilliams/pen/Vayrjv or https://codepen.io/krishanakila/pen/jOObOWw.