Navigating through an HTML document
When a browser renders a web page, we only see a visual representation of the DOM (document object model). This model can be conceptually represented as a tree with nodes, roots, and leaves.
In JQuery, you can easily navigate through the DOM in search of the desired nodes, elements, or values you need to retrieve. That is, if you are looking for a DIV with some text that has an ID, it is very simple.
Manipulating HTML documents
When it comes to actual DOM manipulation, JQuery has a lot of functionality that can be used to change what users see.
Some of the functions are quite simple, such as show and hide, which can be used to show or hide elements that should not be visible on the page. Other functions allow you to create new elements and insert them before the closing tag of an existing element (the append function) or insert new tags after the opening tag of an existing element (the prepend function).
Handling events
If you’re new to JavaScript, the key to understanding how JS interacts with the page displayed in the browser is to understand how the language handles various events.
That is, when the user clicks on an element, presses a key, or simply clicks the mouse, the browser creates a signal of the triggered event. This is how the language handles interactive browser events.
Every time a user does something with a web page, we can respond to them with a user event. The problem is that not all browsers handle the same events in the same way.
Luckily, JQuery has special names for all events, so we can handle all events in all browsers the same way.
Animation
At the time of JQuery’s release, Flash with its animations was quite popular on the web. But when we talk about animations in JQuery, the effects are different from those in older technologies. JQuery animation is the effect when users feel feedback from an event on the screen. Besides, the new animation is not so aggressive and can give a page or application a style when used correctly (but do not abuse it).
You can see all the API effects here. It’s worth noting that in JQuery, effects range from handling simple smooth appearances and disappearances of elements or slides to more complex things like manipulating multiple effects hung on an element.
Ajax
For those who are unfamiliar with Ajax: with Ajax, a web page can make requests to the server, process the response, and refresh a part of the page without a full refresh. The technology is not new, but it still does its job well. Ajax has really great functionality that can be useful if used correctly.
Ajax support is much better than it was 5 years ago, but the implementation of the API may still be slightly different in different browsers. That is, we need to write Ajax code for browsers from Microsoft, Google, Apple, Chrome, etc. separately.
