Write less, do more – this is the motto of jQuery library. The reason to create such
to produce a website compatible with most common browsers that days. It was common practice to have large pieces of code
for different browsers and crazy detection of browser type and version. You also noticed in previous article,
that DOM lookup and manipulation methods have long names. In the past, there also was no
method to utilize handy CSS selectors to search for DOM elements. The jQuery
library eliminated those tedious issues and gave developers unified API which was cross-browser consistent – this
is called a facade.
Nowadays we have much better situation regarding web standards implementation in web browsers. Nevertheless, jQuery is still very popular for its condensed API which is very effective for basic coding tasks and amount of plugins and complete solutions available online. The truth is, that jQuery is not suitable for complex frontend applications. A better solutions, i.e. full stack framework, can be applied.
All jQuery calls go through
different arguments as input, to name a few:
$("div #id .or .class")
jQuery basically interprets the input and returns DOM element (or elements) wrapped in jQuery container. You can call
various methods on this container e.g.:
$("div").empty() would clear all children elements from all
Let’s try to break down method chaining to better understand what is written in previous example:
You have to use two nested loops to achieve same functionality (or
d.innerHTML = ""). The code in jQuery is
definitely shorter but you have to know functionality of particular methods.
You have to download jQuery from its website. There are several version available:
Than you can simply put jQuery file as first
<script> tag in your
<head> element – it has to be first so you
$ function in your scripts.
$("...").append("<span>HTML code</span>")– insert HTML code as last child into every matched element
$("...").append($("..."))– move element (if first selector matched more than one element, element(s) matched by second are duplicated)
$("...").prepend(...)– insert as firstChild
$("...").remove()– remove matched element
$("...").remove("span.only-this")– remove only elements matching CSS selector
$("...").empty()– remove all children
$("...").after(...)– insert adjacent element before/after matched
var all = $(".css.selector").get()
var first = $(".css.selector").get(0)
To work with HTML attributes use
$("...").attr(attrName) method which is a getter (called with
only one argument) and a setter (called with two arguments):
This approach is common in jQuery, its methods have very variable behaviour based on input arguments. This will confuse you a lot in the beginning.
Manipulation with CSS properties is usually performed with
Event registration in jQuery is straight forward, just use
$ function to find elements and use methods
$("...").click(callback) to register event handlers. In case that you want to register an event handler for
event that is not supported by jQuery, use general
$("...").on(eventName, callback) method.
“DOM ready”. The difference is that
onload event waits for loading of all images, CSS and generally everything linked
almost always encounter “DOM ready” event with jQuery code.
jQuery has multiple function to make asynchronous HTTP calls to the backend.
Most general is
$.ajax() method. There are also
$.post() methods to make basic HTTP calls. Here is
source code is much shorter, but you lost control over the HTTP request.
$.fn property, which can be extended with custom jQuery plugins. The main advantage of plugins is reusability –
you can easily divide your custom CSS selector and general plugin function.