How to understand jQuery concepts

When I first learned about jQuery, I was a bit confused.

Each part of jQuery is simple and easy to understand: the slogan “Write less, do more” does work very well.

But I couldn’t really figure out how different concepts (event handlers, traversing DOM, manipulating CSS, etc.) relate to each other within the framework of jQuery.

After a few attempts, I’ve finally figured that out. Any jQuery tutorial should follow this organization.

1. Setting up

This involves (1) load jQuery library, (2) link to your own JavaScript script, and (3) write the following in your JavaScript script:

$(document).ready(function() {
});

2. Targeting an HTML element

Everything in jQuery starts with targetting a particular element in the HTML code, by writing $('h1'), $('.class'), $('#id'), etc.

Creating a jQuery object variable

var $variable = $('.class');

is relevant here.

3. Basic input-output syntax

Before getting into detail about event handlers, CSS manipulation, etc., it’s best to focus on the basic syntax for jQuery, with click() as the first example of event handlers and show() as the first example of HTML/CSS manipulation methods:

  $('.class1').click(function() {
    $('.class2').show();
  });

The first line deals with the input (the user’s action of clicking the .class1 element). The second line dictates the output (showing the .class2 element) in response to the input.

Once we understand this basic jQuery syntax, everything else can be understood as a variation of each part of this syntax.

Event handlers are variations of the first line: $('.class1').click(function() {});

HTML/CSS manipulation methods are variations of the second half of the second line, that is, .show();.

DOM-traversing methods are variations of the first half of the second line, that is, $('.class2').

4. Event handlers

The whole purpose of jQuery is to make a website dynamic in the sense that it responds to the user’s action such as clicking and scrolling.

Event handlers such as click() and mouseenter() recognize these user actions as inputs. It’s also important to learn on() which allows several actions to trigger the same response.

5. Manipulating HTML/CSS code

Once an user action is recognized as an input, we have to specify what output it gives. And the output is achieved by manipulating HTML and/or CSS code.

The jQuery Effect methods such as hide(), fadeOut(), slideUp() essentially manipulate the display property. The css() and animate() methods tweak CSS code in more flexible ways. The html() and append() methods modify HTML code itself.

HTML/CSS-manipulation methods should be introduced as beloging to either of these three groups. Otherwise it’s very quick for learners to get confused.

6. Traversing DOM

There are occasions that you want to target an HTML element in relation to another one. The methods to traverse DOM such as find(), closest(), and next() help you target an element that is a descendant, ancestor, or sibling of another element.

Chaining methods is relevant here as the DOM-traversing method is usually chained to the HTML/CSS-manipulating methods.

7. Miscellaneous

There are other topics that do not fall into the above groups such as Ajax for API and various jQuery plugins such as Slick for carousel.

Hope this article helps those currently learning jQuery.