jQuery Fundamentals Training

Learn the fundamentals of jQuery from the experts at WebucatorÍs jQuery Training
2.2 (18 ratings)
Instead of using a simple lifetime average, Udemy calculates a
course's star rating by considering a number of different factors
such as the number of ratings, the age of ratings, and the
likelihood of fraudulent ratings.
11,833 students enrolled
Take This Course
  • Lectures 101
  • Length 6 hours
  • Skill Level All Levels
  • Languages English
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works


Find online courses made by experts from around the world.


Take your courses with you and learn anywhere, anytime.


Learn and practice real-world skills and achieve your goals.

About This Course

Published 9/2012 English

Course Description

jQuery is fast becoming a must-have skill for front-end developers. The purpose of this jQuery training course is to provide an overview of the jQuery JavaScript library. When you're done with this jQuery training: jQuery for Beginners course, you will be able to complete basic tasks using jQuery, and you will have a solid basis from which to continue your learning.

Take this jQuery Training: jQuery for Beginners course and learn fundamental of jQuery.


What are the requirements?

  • Experience with HTML and JavaScript.

What am I going to get from this course?

  • Learn to write high-performing jQuery applications.

What is the target audience?

  • jQuery newbies.

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.


Before you begin the course, please take a moment to check out the link below to setup your computer and download your exercise files. http://www.webucator.com/help/wiki/index.cfm/JQY102
Section 1: JavaScript Basics
Lesson Introduction
  jQuery is built on top of JavaScript, a rich and expressive language in its own right. This section covers the basic concepts of JavaScript, as well as some frequent pitfalls for people who have not used JavaScript before. While it will be of particular value to people with no programming experien…
  Reserved Words JavaScript has a number of "reserved words", or words that have special meaning in the language. You should avoid using these words in your code except when using them with their intended meaning. Note that some of them are truly reserved , they are not currently implemented in the…
Operators Basic Operators Basic operators allow you to manipulate values. Addition and Subtraction 2 + 3; 2 - 3; Concatenation var foo = 'hello'; var bar = 'world'; console.log(foo + ' ' + bar); // 'hello world' Multiplication and Division 2 * 3; 2 / 3; Incrementing and Decrementing var i = 1; var j…
  Operations on Numbers and Strings In JavaScript, numbers and strings will occasionally behave in ways you might not expect. Addition vs. Concatenation var foo = 1; var bar = '2'; console.log(foo + bar); // 12. uh oh // divide and multiply don't work for strings console.log(foo / bar); // so JavaSc…


  Logical Operators Logical operators allow you to evaluate a series of operands using AND and OR operations. These operations are called short-circuiting, because they stop evaluating an expression when the overall result has been determined (for example, in an AND operation, if the first value is…
  Comparison Operators Comparison operators allow you to test whether values are equivalent or whether values are identical. || is the OR operator, and && is the AND operator. Operator Description Example == is equal to 5==7 returns false 5==5 returns true === is exactly equal to (value and type) 5=…
Objects Reviewed
  Conditional Code Sometimes you only want to run a block of code under certain conditions. Flow control, via if and else blocks, lets you run code only under certain conditions. Flow Control var foo = true; var bar = false; // if statement if (bar) { // this code will never run console.log('hello!'…
  Conditional Variable Assignment with the Ternary Operator Sometimes you want to set a variable to a value depending on some condition. You could use an if/else statement, but in many cases the ternary operator is more convenient. [Definition: The ternary operator tests a condition; if the conditio…
  Switch Statements Rather than using a series of if/else if/else blocks, sometimes it can be useful to use a switch statement instead. switch statements are essentially a variable "goto" statement - the switch looks at the value of a variable or expression, and jumps to a matching labelled line wit…
  Loops Loops let you run a block of code a certain number of times. The while loop A while loop is similar to an if statement, except that its body will keep executing until the condition evaluates to false. while (conditional) { loopBody} The loopBody statement is what runs on every iteration. It…
  Arrays Arrays are zero-indexed lists of values. They are a handy way to store a set of related items of the same type (such as strings), though in reality, an array can include multiple types of items, including other arrays. A Simple Array var myArray = [ 'hello', 'world' ]; Accessing Array Items…
  Objects Objects contain one or more key-value pairs. The key portion can be any string. The value portion can be any type of value: a number, a string, an array, a function, or even another object. Definition: When one of these values is a function, it's called a method of the object. Otherwise, t…
  Functions Functions contain blocks of code that need to be executed repeatedly. Functions can take zero or more arguments, and can optionally return a value. Functions can be created in several ways. Function Declaration function functionName(parameterList) { /* do something */ } Named Function Ex…
Scope Reviewed
  Testing Type JavaScript offers a way to test the "type" of a variable. However, the result can be confusing -- for example, the type of an Array is "object". It's common practice to use the typeof operator when trying to determining the type of a specific value. Testing the Type of Various Variabl…
  Scope "Scope" refers to the variables that are available to a piece of code at a given time. A lack of understanding of scope can lead to frustrating debugging experiences. When a variable is declared inside of a function using the var keyword, it is only available to code inside of that function…
  Closures Closures are an extension of the concept of scope; functions have access to variables that were available in the scope where the function was created. All of the examples in the "Scope" section used closures to hold on to the value of a local variable declared in the enclosing function. H…
Section 2: jQuery Basic Concepts
Lesson Introduction
  Including jQuery To use jQuery on a web page you must, of course, include the jQuery library - a Javascript file. You can do so in one of two ways: Download the code from http://jquery.com/ . Be sure to get the minified and gzipped production version to reduce download time for users; or Hotlink f…
  Using $(document).ready() You cannot safely manipulate a page until the document is "ready." jQuery detects this state of readiness for you; code included inside $(document).ready() will only run once the page is ready for JavaScript code to execute. A $(document).ready() Block Code Sample: jqy-co…
Including and Using jQuery
  Selecting Elements The most basic concept of jQuery is to "select some elements and do something with them". jQuery supports most CSS3 selectors, as well as some non-standard selectors. For a complete selector reference, visit http://api.jquery.com/category/selectors/ . $('#myId'); // note IDs mus…
  Selecting Duration: 10 to 20 minutes. Open the file jqy-concepts/Exercises/index.html in your browser. Use jqy-concepts/Exercises/sandbox.js to accomplish the following: Select all of the div elements that have a class of 'module' . Add the 'showMe' class to them. Come up with three selectors that…
Selecting Elements Reviewed
  Working with Selections Once you have a selection, you can call methods on the selection. Methods generally come in two different flavors: getters and setters. Getters return a property of the first selected element; setters set a property on all selected elements. Getting and Setting Information…
  CSS, Styling, and Dimensions jQuery includes a handy way to get and set CSS properties of elements. Note CSS properties that normally include a hyphen need to be camel cased in JavaScript. For example, the CSS property font-size is expressed as fontSize in JavaScript. Getting CSS Properties $('h1'…
  Traversing Once you have a jQuery selection, you can find other elements using your selection as a starting point. For complete documentation of jQuery traversal methods, visit http://api.jquery.com/category/traversing/. Be cautious with traversing long distances in your documents -- complex trave…
Traversing Reviewed
  Traversing Duration: 10 to 20 minutes. Open index.html again in your browser. Use sandbox.js to accomplish the following: Select all of the image elements on the page; log each image's alt attribute. Select the search input text box, then traverse up to the form and add the 'showMe' class to the f…
  Manipulating the DOM Once you've made a selection, the fun begins. You can change, move, remove, and clone elements. You can also create new elements via a simple syntax. For complete documentation of jQuery manipulation methods, visit http://api.jquery.com/category/manipulation/. Moving, Copying,…
  Manipulating Duration: 10 to 20 minutes. Open the file index.html in your browser. Use the sandbox.js or work in Firebug to accomplish the following: Add five new list items to the end of the unordered list #myList . (Hint: for (var i = 0; i ) Permanently remove the odd list items from #myList . A…
Manipulating the DOM Reviewed
Section 3: jQuery Core
Lesson Introduction
  $ vs jQuery The jQuery script defines a global object named jQuery , containing all the elements we have used so far. It then assigns that to another variable, $ . So, $ and jQuery are synonymous. jQuery does cache the original value of $ . Invoking the jQuery.noConflict() method, discussed in the…
  $ vs $() Until now, we've been dealing entirely with methods that are called on a jQuery object. For example: $('h1').remove(); Most jQuery methods are called on jQuery objects as shown above; these methods are said to be part of the $.fn namespace, or the "jQuery prototype", and are best thought…
$ vs $()
  Utility Methods jQuery offers several utility methods in the $ namespace. These methods are helpful for accomplishing routine programming tasks. Below are examples of a few of the utility methods; for a complete reference on jQuery utility methods, visit http://api.jquery.com/category/utilities/.…
Utility Methods Reviewed
Section 4: Events and Event Handlers
Lesson Introduction
  jQuery provides simple methods for attaching event handlers to selections. When an event occurs, the provided function is executed. Inside the function, this refers to the element that was clicked. For details on jQuery events, visit http://api.jquery.com/category/events/. The event handling funct…
Connecting Events to Elements Reviewed
  Inside the Event Handling Function As mentioned in the overview, the event handling function receives an event object, which contains many properties and methods. The event object is most commonly used to prevent the default action of the event via the preventDefault method. However, the event obj…
Triggering Event Handlers jQuery provides a way to trigger the event handlers bound to an element without any user interaction via the $.fn.trigger method. While this method has its uses, it should not be used simply to call a function that was bound as a click handler. Instead, you should store the…
Triggering Event Handlers Reviewed
  Increasing Performance with Event Delegation You'll frequently use jQuery to add new elements to the page, and when you do, you may need to bind events to those new elements -- events you already bound to similar elements that were on the page originally. Instead of repeating your event binding ev…
  Event Helpers jQuery offers two event-related helper functions that can save you a few keystrokes. $.fn.hover The $ .fn.hover method lets you pass one or two functions to be run when the mouseenter and mouseleave events occur on an element. If you pass one function, it will be run for both events;…
  Create an Input Hint Duration: 15 to 30 minutes. Open the file ClassFiles/jqy-events/Exercises/index.html in your browser. Use the file ClassFiles/jqy-events/Exercises/js/inputHint.js. Your task is to use the text of the label for the search input to create "hint" text for the search input. The co…
Create an Input Hint Reviewed
  Add Tabbed Navigation Duration: 20 to 40 minutes. Continue to use index.html. Use the file jqy-events/Exercises/js/tabs.js. Your task is to create tabbed navigation for the two div.module elements ( blog and specials ). To accomplish this: Hide all of the modules (the div.module elements), but fir…
Section 5: Effects
Lesson Introduction
  jQuery makes it trivial to add simple effects to your page. Effects can use the built-in settings, or provide a customized duration. You can also create custom animations of arbitrary CSS properties. For complete details on jQuery effects, visit http://api.jquery.com/category/effects/. Built-in Ef…
Built-in Effects Reviewed
  Limitations on Effects Certain effects are limited in their operation by existing styling. For example, fadeIn modifies the opacity of an element. If the element's styling specifies visibility:hidden , it will never appear (to start initially hidden, you can use display:none , although that also h…
  Queuing of Effects with Other Operations If you want to perform an operation, such as changing a class, during an effects sequence, you can queue the operation as if it were an effect. The $.fn.queue( callback ) function receives a callback function to add to the queue, which will be invoked at th…
Queuing of Effects with Other Operations Reviewed
  Callbacks - Doing Something When an Effect is Done Often, you'll want to run some code once an animation is done -- if you run it before the animation is done, it may affect the quality of the animation, or it may remove elements that are part of the animation. Callback functions provide a way to…
  Custom Effects with $.fn.animate jQuery makes it possible to animate arbitrary CSS properties via the $.fn.animate method. The $.fn.animate method lets you animate to a set value, or to a value relative to the current value. Custom effects with $.fn.animate Code Sample: jqy-effects/Demos/fn-animat…
Custom Effects with $.fn.animate Reviewed
  Managing Effects jQuery provides several tools for managing animations. $.fn.stop - Stop currently running animations on the selected elements. $.fn.delay - Wait the specified number of milliseconds before running the next animation. $('h1').show(300).delay(1000).hide(300); jQuery.fx.off If this v…
  Reveal Hidden Text Duration: 20 to 30 minutes. Open the file jqy-effects/Exercises/index.html in your browser. Use the file blog.js. Your task is to add some interactivity to the blog section of the page. The spec for the feature is as follows: Clicking on a headline in the #blog div should slide…
  Create Dropdown Menus Duration: 20 to 30 minutes. Open the file jqy-effects/Exercises/index.html in your browser. Use the file js/navigation.js. Your task is to add dropdowns to the main navigation at the top of the page. Hovering over an item in the main menu should show that item's submenu eleme…


  Create a Slideshow Duration: 20 to 30 minutes. Open the file index.html in your browser. Use the file jqy-effects/Exercises/js/slideshow.js. Your task is to take a plain HTML page and enhance it with JavaScript by adding a slideshow. The following steps have already been taken to prepare the slide…
Section 6: Ajax
Lesson Introduction
  Key Concepts The XMLHttpRequest method (XHR) allows browsers to communicate with the server without requiring a page reload. This method, also known as Ajax (Asynchronous JavaScript and XML), allows for web pages that provide rich, interactive experiences. Ajax requests are triggered by JavaScript…
  jQuery's Ajax-Related Methods While jQuery does offer many Ajax-related convenience methods, the core $.ajax method is at the heart of all of them, and understanding it is imperative. We'll review it first, and then touch briefly on the convenience methods. The $.ajax method offers features that t…
jQuery's Ajax-Related Methods Reviewed
  Ajax and Forms jQuery's Ajax capabilities can be especially useful when dealing with forms. The jQuery Form Plugin is a well-tested tool for adding Ajax capabilities to forms, and you should generally use it for handling forms with Ajax rather than trying to roll your own solution for anything rem…
  Working with JSONP The advent of JSONP -- essentially a consensual cross-site scripting hack -- has opened the door to powerful mashups of content. Many prominent sites provide JSONP services, allowing you access to their content via a predefined API. An example source of JSONP-formatted data is T…
Working with JSONP Reviewed
  Ajax Events Often, you'll want to perform an operation whenever an Ajax requests starts or stops, such as showing or hiding a loading indicator. Rather than defining this behavior inside every Ajax request, you can bind Ajax events to elements just like you'd bind other events. For a complete list…
  Load External Content Duration: 20 to 30 minutes. Open ClassFilesjqy-ajaxExercisesindex.html in your browser. Edit the file jsload.js. Your task is to load the content of a blog item when a user clicks on the title of the item. The current behavior is that clicking the link takes you from this pag…
  Load Content Using JSON Duration: 20 to 30 minutes. Open ClassFilesjqy-ajaxExercisesindex.html in your browser. Uncomment the tag for specials.js. Your task is to show the user details about the special for a given day when the user selects a day from the select dropdown. Append a target div after…
Load Exercises Reviewed
Section 7: Plugins
Lesson Introduction
  A jQuery plugin is simply a new method that we use to extend jQuery's prototype object. By extending the prototype object you enable all jQuery objects to inherit any methods that you add. Once the plugin is established, whenever you call $() you're creating a new jQuery object, with your plugin n…


  Finding and Evaluating Plugins Plugins extend the basic jQuery functionality, and one of the most celebrated aspects of the library is its extensive plugin ecosystem. From table sorting to form validation to autocompletion. If there's a need for it, chances are good that someone has written a plug…
  Creating a Plugin Using the Alsup Pattern Duration: 5 to 10 minutes. The exercise file jqy-plugins/Exercises/js/stripe.js contains a table-striping function Globals.stripe that will only stripe one level of table rows -- it will not descend into child tables. The file table.html contains a table w…
Creating a Plugin Using the Alsup Pattern Exercise Reviewed
  Writing Stateful Plugins with the jQuery UI Widget Factory Note: Rebecca Murphey originally based this section, with permission, on the blog post Building Stateful jQuery Plugins by Scott Gonzalez. It has been modified further. While most existing jQuery plugins are stateless, that is, we call the…
  Make a Table Sortable (Optional) Duration: 5 to 10 minutes. For this exercise, your task is to identify, download, and implement a table sorting plugin on the index.html page (located at jqy-plugins/Exercises). When you're done, all columns in the table on the page should be sortable.
Make a Table Sortable Exercise Reviewed
Section 8: Best Practices
Lesson Introduction
  JavaScript Best Practices Namespacing Variables Avoid polluting the global namespace (the elements owned by window ). Instead use self-executing anonymous functions or variables and functions owned by a single, global object. Global Namespace Variables Rather than declaring a number of separate gl…
JavaScript Best Practices Reviewed
  jQuery Best Practices Optimize Selectors Selector optimization is less important than it used to be, as more browsers implement document.querySelectorAll() and the burden of selection shifts from jQuery to the browser. However, there are still some tips to keep in mind. ID-Based Selectors Beginnin…
jQuery Best Practices Reviewed

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Webucator Training, Global training company. Trained over 26,000 students. Thousands of student testimonials.

  • Founded in 2003.
  • Webucator provides technical and business training.
  • Webucator is a Microsoft Certified Partner for Learning Solutions (CPLS)
  • Webucator is a Registered Education Provider (R.E.P.) approved by PMI to issue professional development units (PDUs) for its training courses.
  • Webucator has a GSA Contract (GS-35F-0556S).
  • We have provided training to over 70% of the Fortune 100 companies (See Partial Client List).
Why should you choose us?

Ready to start learning?
Take This Course