Welcome to this review of jQuery Fundamentals by Google GDE, Microsoft MVP and Regional Director Dan Wahlin.
Should you use jQuery?
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.
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.
As making you more productive, web development can be a lot more fun when using jQuery.
The Prerequisites for this course are:
– 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
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:
Dan prefers the append and prepend methods to the alternatives.
You can remove nodes from an element with .remove()
jQuery simplifies handling events
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.
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.
Change Event Demo
Again this could be done using an onchange attribute, but Dan demonstrates the “jQuery way” of doing this.
Mouse Event Demo
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
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
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
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:
- 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.