The debate is still raging on my recent Do You Really Need jQuery? article but, in summary, there are two reasons why using jQuery is a good idea:
- you need to support IE6/7/8 (remember you can’t migrate to jQuery 2.0), or
- without jQuery, you’d spend longer writing a jQuery-like library than developing your application.
For everything else, be pragmatic. jQuery is a 270Kb generic library. You are unlikely to require all the functionality it provides and, even if you omit certain modules, it remains a sizable quantity of code. You may load the 30Kb minified version from a CDN but the browser must halt processing and parse the code on every page before doing anything else.
jQuery permits DOM node selection using CSS selector syntax, e.g.
// find all paragraphs with the class "summary" in the article with ID "first" var n = $("article#first p.summary");
The native equivalent:
var n = document.querySelectorAll("article#first p.summary");
document.querySelectorAll is implemented in all modern browsers and IE8 (although that only supports CSS2.1 selectors). jQuery has additional support for more advanced selectors but, for the most part, it’ll be running
document.querySelectorAll inside the
document.querySelector(selector)— fetches the first matching node only
document.getElementById(idname)— fetches a single node by its ID name
document.getElementsByTagName(tagname)— fetches nodes matching an element (e.g. h1, p, strong, etc).
document.getElementsByClassName(class)— fetches nodes with a specific class name
The getElementsByTagName and getElementsByClassName methods can also be applied to single nodes to limit the result to descendants only, e.g.
var n = document.getElementById("first"); var p = n.getElementsByTagName("p");
Let’s do some testing. I wrote a small selection of scripts to retrieve all the comment nodes from my Do You Really Need jQuery? article 10,000 times. The result:
jQuery offers several methods for adding further content to the DOM, e.g.
Beneath the surface, jQuery uses the native innerHTML method, e.g.
document.getElementById("container").innerHTML += "<p>more content</p>";
You can also use DOM building techniques. These are safer but rarely faster than innerHTML:
var p = document.createElement("p"); p.appendChild(document.createTextNode("more content"); document.getElementById("container").appendChild(p);
We can also remove all child nodes in jQuery:
The native equivalent using innerHTML:
document.getElementById("container").innerHTML = null;
or a small function:
var c = document.getElementById("container"); while (c.lastChild) c.removeChild(c.lastChild);
Finally, we could remove the whole element from the DOM in jQuery:
var c = document.getElementById("container"); c.parentNode.removeChild(c);
Scalable Vector Graphics
The core jQuery library has been developed to work with the current document. SVGs also have a DOM, but jQuery does not offer direct manipulation of these objects because it’s normally necessary to use methods such as
getAttributeNS. It can be made to work and several plug-ins are available, but it will be more efficient to roll your own code or use a specialized SVG library such as Raphaël or svg.js.
Even the most basic web application will have a form or two. You should always validate user data server-side but, ideally, you’ll supplement it with client-side validation to capture errors before the form is submitted.
Client-side validation is straight-forward:
- You run a function when the form is submitted.
- If any issues are encountered, you halt the submission and show an error.
HTML5 has built-in support for various common input types such as emails, telephones, URLs, numbers, times, dates, colors and custom fields based on regular expressions. For example, if you want to force the user to enter an email address, use:
<input type="email" name="email" required="required" />
Older browsers (including IE9 and below) do not understand the new types and will revert to standard textual input fields. Those users will fall back to server-side validation; not a great experience but you can apply a shim or hope those people see the light and upgrade.
In my next article, we’ll examine native CSS class manipulation and animation.