Welcome to this review of jQuery Fundamentals by Google GDE, Microsoft MVP and Regional Director Dan Wahlin.

Should you use jQuery?

This course was produced in 2011. In the last five years many other frameworks have either been born or grown into strong alternatives for jQuery. For a list of these see the A-Z of JavaScript Libraries and Frameworks

I still use jQuery in production and believe that it still has a lot to offer web developers. Although it is no longer generally considered to be a “hot” new framework, it remains the most widely used JavaScript framework in the world.

One resource that I like is You Might Not Need jQuery , which shows the equivalent jQuery and native JavaScript code for common tasks.

Although this shows that you do not strictly NEED jQuery, it also shows that it can make your code a lot simpler and easier to read.

Elijah Manor has produced an excellent course jQuery-free JavaScript
This course is likely to improve your knowledge of both jQuery and native JavaScript.

jQuery has been in active development for more than 10 years now, and while most of the information in jQuery Fundamentals is still accurate, I will point out any differences that I am aware of.

jQuery Fundamentals

Course Introduction

As making you more productive, web development can be a lot more fun when using jQuery.

The Prerequisites for this course are:

– Experience working with JavaScript
– Good understanding of HTML
– Experience working with CSS

Why use jQuery?

Dan talks about cross browser issues such as dealing with the numerous deficiencies of Internet Explorer 6.

This was much of the reason behind the initial popularity of jQuery, but is no longer much of an issue since browsers such as IE6 are now dead.

Dan mentions there is an entire community of free plugins for jQuery. These have since moved to NPM. https://www.npmjs.com/browse/keyword/jquery-plugin

jQuery Makes Client-Side Dev Fun!

Getting Started with jQuery

Dan explains the difference between version 1.x and version 2.x
It all boils down to whether you still need to support old versions of Internet Explorer (versions 6-8).

Since jQuery v1.x involves a larger download than v2.x, you can improve performance by using v2.x

At the time of writing, version 3 of jQuery is in Beta

Dan also explains the difference between the minified and production versions

Using Content Delivery Networks

This begins with a brief introduction to content delivery networks.

He then tells you how to load up the script locally if there was a problem fetching the file from the CDN.

If you use ASP.NET MVC, I recommend watching the Advanced Optimizations section of Travis Gosselin’s “ASP.NET Bundling, Minification & Resource Optimization” course to learn about setting up your local fallback within your bundle.

However, if you are using or intending to use ASP.NET Core, skip the Bundling & Minification course as it is no longer relevant.

Using the jQuery ready() function

$(document).ready()

Detects once the DOM hierarchy has been loaded

There’s a demo here showing firstly that this loads and fires before window.onload, and then how to update HTML once the DOM is loaded.

Getting to Know the jQuery Documentation

Basically the documentation at api.jquery.com is very good.
Here we see an overview of some of it.

Using jQuery Selectors

What are Selectors?

A selector is a way to select a node from the DOM, and jQuery makes this easy for you.

Selecting Nodes by Tag Name

This is an explanation of how to reference multiple tags, how to select all descendants of an ancestor.

Dan then performs a demonstration of selecting various elements and updating their styles. This includes iterating over elements and outputting their html.

Selecting Nodes by ID

An explanation of using the # character to select elements by ID, followed by a demonstration.

Selecting Nodes by Class Name

An explanation of using the . character to select elements by class name, followed by a demonstration.

Selecting Nodes by Attribute Value

Dan explains that this is a bit like XPath: this works using brackets to select based on attribute name or value. Here we have several examples, followed by demonstrations.

Selecting Input Nodes

$(‘:input’) selects all input elements, and you can specify a particular type for example $(‘:input[type=”radio”‘)

Dan then demonstrates a more efficient way to do this.

Additional Selector Features

This section describes numerous other features, such as:

:contains() selects elements that match the contents within the contains exception
Selecting even or odd rows
Selecting the First Child
Using Starts With in Selectors
Using Ends With in Selectors
Find Attributes Containing a Value

All of these features are demonstrated

Interacting with the DOM

Iterating Through Nodes

We return to the jQuery .each function with a much more thorough description of how it works, followed by a demo.

Modifying Properties and Attributes

This begins with an explanation of how the this.propertyName statement can be used to directly modify an object’s properties.

Then attr() is discussed, which accesses object attributes.

We see that by passing in a JSON object, we can modify multiple attributes.

If you’ve never heard of JSON before, Dan explains this for you next.

This is followed by demonstrations of these concepts.

Adding and Removing Nodes

There are four key methods for inserting into the DOM:

– .append()
– .appendTo()
– .prepend()
– .prependTo()

Dan prefers the append and prepend methods to the alternatives.

You can remove nodes from an element with .remove()

Handling Events

jQuery simplifies handling events

Dan explains that old versions of Internet Explorer (IE8 and below) use attachEvent instead of addEventListener

This means if you use jQuery v1.x it will include code to support the attachEvent method, and v2.x does not include this code.

Dan first shows how to code a cross-browser button click event hander that supports IE8, using native JavaScript.

Then we run through some of the jQuery Events Documentation

Click Event Demo

Dan shows that you can put an onclick attribute on a button input element, although he prefers to do this another way: he writes a WireEvents function which is called from within the $(document).ready() function.

This in my opinion is a better approach because it allows you to put your JavaScript in external files.

Change Event Demo

Again this could be done using an onchange attribute, but Dan demonstrates the “jQuery way” of doing this.

Mouse Event Demo

This demo toggles a CSS class based on mouseenter and mouseleave events. He shows how to refactor the code to avoid repeating yourself.

Then Dan sets the element to display the page X and Y coordinates on mouseup, and this is achieved using just a couple of lines of code. Finally he shows how easy it is to apply this functionality to every row in a table.

Binding to Events

Dan explains the on and off events

I recommend that you, like Dan, try out James Padolsey’s jQuery viewer. His blog post explaining the idea is Under jQuery’s bonnet.

live(), delegate() and on()

bind, live and delegate are deprecated functions, but Dan explains that it’s important to know what they are if you are working with legacy code. The on function supersedes and replaces all of these functions.

Using .on() Demo

Dan begins with a naive implementation which binds to every row element in a table.

Then he explains that it is better to attach the event to the parent, e.g. the table’s tbody element.

He shows that this works even on new rows as they are added to the table.

Handling Hover Events

hover combines the mouseenter and mouseleave events to achieve the same effect with less jQuery code.

Working with AJAX Features

Introduction

Dan reminds us of the purpose of AJAX and why it is so important.

jQuery Ajax Functions

Dan teaches us that there are several advantages of using jQuery for AJAX, such as:

• Allows parts of a page to be updated
• Cross-Browser Support
• Simple API
• GET and POST supported
• Load JSON, XML, HTML or even scripts

At the time of recording, we needed to worry about using Microsoft’s old ActiveX control, but this is rarely the case any more. Virtually all browsers nowadays use the window.XMLHttpRequest object (including Internet Explorer 7+).

There are several AJAX related functions in jQuery:

$(selector).load() – Loads HTML data from the server
$.get() and $.post() – Get raw data from the server
$.getJSON(): Get/Post and return JSON
$.ajax(): Provides core functionality

Out of these functions, I personally exclusively use $.ajax because it is much more flexible and powerful than the other functions.

Loading HTML Content from the Server

An explanation of $(selector).load(), followed by a demonstration.

Load is the simplest and least powerful jQuery AJAX function

Making GET Requests

$.get is a bit more powerful than load, but is ultimately just a shorthand notation for the $.ajax function

In this clip we take another look at James Padolsey’s excellent jquery source viewer, and learn about jQuery.getJSON

Making POST Requests

 

Again this is another jQuery function that calls through to $.ajax,  but it hardcodes the method to POST this time.

Dan introduces the HTTP proxy tool Fiddler which is now owned and maintained by Telerik. It is useful for seeing the AJAX requests and responses and helping you to debug any problems.

There is a whole course by Robert Boedigheimer on Fiddler if you want to learn this tool in depth.

Introduction to the ajax() Function

Dan likens the ajax() function to Lord of the Rings, and indeed it is the all powerful jQuery function when it comes to doing AJAX.

It takes one argument which is an object. You configure it using the following object properties:

• contentType
• data
• dataType
• error
• success
• type (GET or POST)

 

The error and success functions have now been deprecated and you should use .done and .fail instead

See jQuery documentation for details

ajax() Function Demo

A demonstration of the many ways you can use the $.ajax() function.

The JSON stringify script available from JSON.org

Summary / Verdict

As this course was produced 5 years ago I was expecting much of the content to be out of date, but I found that almost all of it was all still relevant and accurate. This course covers many of the most commonly used functions in jQuery and should get you up to speed with what it offers you pretty quickly.