Teach on Udemy

Turn what you know into an opportunity and reach millions around the world.

Learn More

Your cart is empty.

Keep shopping

Learn By Example: jQuery

Name: Learn By Example: jQuery
Rating: 4.5 (174 reviews)

53 examples which form a step-by-step guide to master jQuery

Created byLoony Corn

Last updated 12/2016

English

English [Auto],

What you'll learn

Use jQuery with ease to add styles, animations, Ajax support and more to their websites
Use custom plugins to add common components to sites rather than re-inventing the wheel
Build their own stateless and stateful custom plugins in jQuery
Work with the jQuery UI library including the theme roller

Course content

13 sections • 78 lectures • 7h 12m total length

You, This Course and Us1:59
Discover how jQuery simplifies web development by manipulating the DOM, selecting elements, and animating with a single line of code, while mastering events, CSS transitions, animations, and Ajax requests.

Example 1: Hello jQuery World!11:33
Explore how hello world in jquery initializes with the dollar function, the window object, and document ready, contrasting with window.onload and the dom loading sequence.
Selectors4:27
Selectors are the backbone of jQuery. How do you choose the DOM elements that you want to manipulate?
Example 2: Simple selectors4:12
Use the element name, class name and the element id to select DOM elements.
Example 3: More selectors9:10
jQuery offers a rich variety of ways by which you can choose elements to perform actions on.
Example 4: Traversing The DOM8:37
Traverse the dom with jQuery, moving up, down, sideways using functions like parent, closest, siblings, next. Select elements to apply actions and highlight with red to illustrate hierarchy.
Example 5: Advanced selectors4:44
Explore advanced jQuery selectors, including even and odd, contains, contains text, and index-based rules, and learn precise element selection using child, greater-than, less-than, and non-human filters.
Example 6: Select using functions - the filter() selector4:34
You can also choose to write code to select DOM elements you're interested in. This is an advanced use case though.

Example 7: Chaining4:38
jQuery functions are concise precisely because they can be chained together. This example shows you the power of chaining.
Example 8: jQuery in the no-conflict mode7:19
This mode allows jQuery to play nice with other Javascript libraries by surrendering the $ variable to other libraries.
Accessing native browser element1:20
Learn how to access native browser elements directly from a jQuery-like collection by indexing or using square brackets, retrieving the first element, and using dot notation for actions.

Events and event handling7:29
Example 9: Event handlers9:12
Learn to set up event handlers for button clicks with jQuery, using click and on, and explore event delegation with a body listener for all buttons.
The event object6:02
All event handlers get an event object as an input argument. This holds meta information about the context in which the event occurred and is very useful.
Example 10: Accessing the event object properties5:28
Demonstrate accessing the event object properties in a click handler using jQuery, logging event type, left mouse button, and the clicked link, and preventing navigation if the link is evil.
Event capture and bubble phases8:07
Understand how events are propagated in the browser and how jQuery abstracts away all the quirks of when to handle a event.
Example 11: Multiple event handlers4:32
Discover how a single element can hold multiple event listeners for the same or different events, with three buttons showing ordered execution and the on method for multiple events.
Example 12: Passing data to event handlers3:11
Explore passing data to event handlers by binding properties to the event object with the on method, then access them in the handler to display random Hogwarts houses and costs.
Example 13: Listen just once3:09
Hook up event handlers so that they fire only for the very first occurrence of an event.
Example 14: Remove event handlers4:29
Example 15: Events in namespaces6:19
Namespaces allow us to work on events in logical groups.
Event delegation6:05
Hook up events to elements which do not exist yet using event delegation.
Example 16: Setting up delegated events5:05
Explore how to set up delegated events on a parent element so existing and future buttons auto-hook into handlers through event bubbling and dynamic button creation.
Example 17: Listening to key events3:05
Example 18: Event triggers4:30
This is a great tool for testing your event code, trigger events without the browser event actually occurring.
Custom events4:04
A simple DOM component can choose to fire its own custom events.
Example 19: Working with custom events4:27
Learn to create and fire custom color-change events in jQuery, then update each box’s color by triggering and listening with a namespace on boxes and their buttons.

Effects and animations3:57
Get introduced to the variety of animations that jQuery enables for us.
Example 20: The css() function9:03
Apply the jQuery css() function to change font size with up and down buttons and to get or set multiple properties like color, background color, and font family.
Example 21: The show() and hide() functions6:03
Example 22: The fadeIn() and fadeOut() animations3:01
Learn to use jquery's fadeIn and fadeOut to smoothly show and hide articles by fading text opacity, adjusting speeds for fast or slow transitions.
Example 23: The slideUp() and slideDown() animations2:15
Example 24: The toggle() function2:43
Learn to use the jQuery toggle() function with a single button to show or hide content. Explore slide, fade, and custom speed effects while understanding internal state.
How do jQuery animations work?4:15
Look behind the scenes at how jQuery manages to smoothly change CSS properties over the duration of the animation.
Example 25: Run code after an animation completes4:38
Learn to run code after a jQuery animation completes using a callback, then highlight text after the feed in, and chain actions for post-animation effects.
Example 26: The animate() function5:33
Example 27: More animation fun4:00
Explore advanced uses of the jQuery animate function by moving text with relative left and up/down changes, while adjusting opacity and applying individual easing functions for each property.
Example 28: Stop animations using the stop() function7:38
Learn to stop live animations with the stop() function, selectively halting one animation or all animations on multiple Lunacon elements using random animations and stopping in-flight animations.
Example 29: Delay animations using delay()3:46
You can add a delay between every animation that plays using a simple function
Example 30: Chaining and queueing animations7:34
Learn how to chain animations in jQuery and queue actions to run in sequence, using add class, the queue method, and next to advance to the next animation.
Example 31: Custom animation queues5:05
Animations can be logically bundled together by adding them to custom queues.
Example 32: Bypassing the queue4:55
Learn how to control chained animations in jQuery by bypassing the queue for select effects, using a configuration object to set duration, easing, and before/after callbacks.

Manipulating the DOM1:15
Master manipulating the DOM with jQuery by selecting elements and editing their content. Add, remove, and update elements and attributes to change links and page tone.
Example 33: Manipulating element contents4:27
Learn how to manipulate element contents with jQuery by updating an element with text or HTML, using input and buttons to get and set content while preserving or escaping markup.
Example 34: The attr() and removeAttr() functions4:37
Learn to use attr() and removeAttr() to set, get, and remove attributes on DOM elements, including id, style, and class attributes.
Example 35: Add DOM elements relative to selected elements9:48
Example 36: Create or clone elements6:31
Example 37: The remove(), detach() and empty() functions7:32
Remove elements from the DOM before editing them as a performance optimization
Example 38: The wrap() and wrapAll() functions4:03
Demonstrate how jQuery's wrap() and wrapAll() wrap elements: wrap() surrounds each element with a wrapper, while wrapAll() surrounds all elements as a group, illustrated with unicorn rocks boxes.
Example 39: Explicit iteration using each()2:23

Ajax5:09
Explore how Ajax enables asynchronous client-server communication without full page reloads, using requests and callbacks to update only changed page areas, and understand cross-origin resource sharing and restrictions.
Example 40: The $.ajax() request10:10
Learn to perform server requests with the jQuery $.ajax() method against the G20 API, handle success and failure, populate a table with data, and understand the configuration object and callbacks.
Example 41: Syntactic sugar - the $.get(), $.getScript(), $.getJSON()6:36
Explore syntactic sugar wrappers in jQuery, such as $.get, $.getScript, and $.getJSON, that simplify ajax requests and render HTML, JSON, or script responses.
Example 42: The load() function2:36
Example 43: Serialize form contents using serialize() and serializeArray()7:18
Example 44: Local and global Ajax events9:30

Requirements

Basic understanding of HTML, CSS and Javascript

Description

NOTE: This course uses jQuery 3.1.0 and jQuery UI 1.12.1

jQuery takes the most common operations that you would want to perform on your website and allows you to accomplish it in one line of code. Learn jQuery by example: from basic building blocks to developing your own custom plugins!

Let's parse that.

Accomplish stuff with one line of code: jQuery makes common stuff super simple. Select all paragraphs on a page? One line of code. Style all headers under the container <div> with a yellow highlight? One line of code. Animate all the ball widgets such that they bounce and move around the screen? One line of code

Basic building blocks to custom plugins: The course starts with basic principles which form the backbone of jQuery. Selectors, working with events, applying styles and animations, DOM manipulations, Ajax requests, using custom plugins etc. The later part of the course shows you can roll your own stateless and stateful plugins using the $.fn object and the widget factory.

In this course, we will learn by example. Each example is self-contained, has its source code attached, and gets across a specific jQuery use-case. Each example is simple by itself, but they come together as building blocks to build complex use cases.

What's included in this course:

Installing and setting up a basic web server with jQuery and jQuery UI libraries

jQuery basics: Selectors, selector functions, mouse and key event handlers, CSS animations and styles, the animate() function, appending and editing DOM elements, Ajax requests

jQuery in-depth: Advanced selectors, event propagation, event capture and bubble phases, how animations work, custom animation queues and bypassing the queues, performance tips and tricks

jQuery plugins: Using custom plugins, developing a stateless plugin using the $.fn object, stateful plugins using the Widget Factory, jQuery UI components and the jQuery UI theme roller

Who this course is for:

Yup! Web developers who want to move beyond mundane Javascript programming and harness the power of jQuery
Nope! Students who have never done web development using Javascript before

Learn By Example: jQuery

What you'll learn

Explore related topics

Course content

You, This Course and Us1 lecture • 2min

Introduction To jQuery3 lectures • 21min

Install And Set Up3 lectures • 11min

Selectors7 lectures • 47min

Some Loose Ends3 lectures • 13min

Event Handling16 lectures • 1hr 25min

CSS And Animations15 lectures • 1hr 14min

DOM Manipulation8 lectures • 41min

Ajax Requests6 lectures • 41min

Performance Optimizations2 lectures • 13min

Requirements

Description

Who this course is for: