Learn By Example: jQuery
4.6 (52 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.
2,028 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Learn By Example: jQuery to your Wishlist.

Add to Wishlist

Learn By Example: jQuery

53 examples which form a step-by-step guide to master jQuery
4.6 (52 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.
2,028 students enrolled
Created by Loony Corn
Last updated 12/2016
English
Current price: $10 Original price: $50 Discount: 80% off
5 hours left at this price!
30-Day Money-Back Guarantee
Includes:
  • 7 hours on-demand video
  • 153 Supplemental Resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I 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
View Curriculum
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


Using discussion forums

Please use the discussion forums on this course to engage with other students and to help each other out. Unfortunately, much as we would like to, it is not possible for us at Loonycorn to respond to individual questions from students:-(

We're super small and self-funded with only 2 people developing technical video content. Our mission is to make high-quality courses available at super low prices.

The only way to keep our prices this low is to *NOT offer additional technical support over email or in-person*. The truth is, direct support is hugely expensive and just does not scale.

We understand that this is not ideal and that a lot of students might benefit from this additional support. Hiring resources for additional support would make our offering much more expensive, thus defeating our original purpose.

It is a hard trade-off.

Thank you for your patience and understanding!


Who is the target audience?
  • 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
Compare to Other jQuery Courses
Curriculum For This Course
78 Lectures
07:12:54
+
You, This Course and Us
1 Lecture 01:59
+
Introduction To jQuery
3 Lectures 20:37

Why is it important to build a good website? What are the technologies involved?

Preview 07:44

Amongst all Javascript libraries available, jQuery stands alone. Simple, easy to use and adds so much with so little code!

Preview 08:08

A brief overview of the DOM before we dive into how jQuery works with it.

Preview 04:45
+
Install And Set Up
3 Lectures 10:32

Get a web server running and set up your examples.

Npm and Http Server install
04:47

Download and set up jQuery
03:32

Set up examples used in this course
02:13
+
Selectors
7 Lectures 47:17

Selectors are the backbone of jQuery. How do you choose the DOM elements that you want to manipulate?

Selectors
04:27

Use the element name, class name and the element id to select DOM elements.

Example 2: Simple selectors
04:12

jQuery offers a rich variety of ways by which you can choose elements to perform actions on.

Example 3: More selectors
09:10

Example 4: Traversing The DOM
08:37

Example 5: Advanced selectors
04:44

You can also choose to write code to select DOM elements you're interested in. This is an advanced use case though.

Example 6: Select using functions - the filter() selector
04:34
+
Some Loose Ends
3 Lectures 13:17

jQuery functions are concise precisely because they can be chained together. This example shows you the power of chaining.

Example 7: Chaining
04:38

This mode allows jQuery to play nice with other Javascript libraries by surrendering the $ variable to other libraries.

Example 8: jQuery in the no-conflict mode
07:19

Accessing native browser element
01:20
+
Event Handling
16 Lectures 01:25:14

Example 9: Event handlers
09:12

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.

The event object
06:02

Example 10: Accessing the event object properties
05:28

Understand how events are propagated in the browser and how jQuery abstracts away all the quirks of when to handle a event.

Event capture and bubble phases
08:07

Example 11: Multiple event handlers
04:32

Example 12: Passing data to event handlers
03:11

Hook up event handlers so that they fire only for the very first occurrence of an event.

Example 13: Listen just once
03:09

Example 14: Remove event handlers
04:29

Namespaces allow us to work on events in logical groups.

Example 15: Events in namespaces
06:19

Hook up events to elements which do not exist yet using event delegation.

Event delegation
06:05

Example 16: Setting up delegated events
05:05

Example 17: Listening to key events
03:05

This is a great tool for testing your event code, trigger events without the browser event actually occurring.

Example 18: Event triggers
04:30

A simple DOM component can choose to fire its own custom events.

Custom events
04:04

Example 19: Working with custom events
04:27
+
CSS And Animations
15 Lectures 01:14:26

Get introduced to the variety of animations that jQuery enables for us.

Preview 03:57

Example 20: The css() function
09:03

Example 21: The show() and hide() functions
06:03

Example 22: The fadeIn() and fadeOut() animations
03:01

Example 23: The slideUp() and slideDown() animations
02:15

Example 24: The toggle() function
02:43

Look behind the scenes at how jQuery manages to smoothly change CSS properties over the duration of the animation.

How do jQuery animations work?
04:15

Example 25: Run code after an animation completes
04:38

Example 26: The animate() function
05:33

Example 27: More animation fun
04:00

Example 28: Stop animations using the stop() function
07:38

You can add a delay between every animation that plays using a simple function

Example 29: Delay animations using delay()
03:46

Example 30: Chaining and queueing animations
07:34

Animations can be logically bundled together by adding them to custom queues.

Example 31: Custom animation queues
05:05

Example 32: Bypassing the queue
04:55
+
DOM Manipulation
8 Lectures 40:36

Example 33: Manipulating element contents
04:27

Example 34: The attr() and removeAttr() functions
04:37

Example 35: Add DOM elements relative to selected elements
09:48

Example 36: Create or clone elements
06:31

Remove elements from the DOM before editing them as a performance optimization

Example 37: The remove(), detach() and empty() functions
07:32

Example 38: The wrap() and wrapAll() functions
04:03

Example 39: Explicit iteration using each()
02:23
+
Ajax Requests
6 Lectures 41:19

Example 40: The $.ajax() request
10:10

Example 41: Syntactic sugar - the $.get(), $.getScript(), $.getJSON()
06:36

Example 42: The load() function
02:36

Example 43: Serialize form contents using serialize() and serializeArray()
07:18

Example 44: Local and global Ajax events
09:30
+
Performance Optimizations
2 Lectures 13:18

Techniques to reduce the number of times you render the DOM can greatly help improve performance.

Performance optimizations tips and tricks
08:56
3 More Sections
About the Instructor
Loony Corn
4.3 Average rating
5,464 Reviews
42,652 Students
75 Courses
An ex-Google, Stanford and Flipkart team

Loonycorn is us, Janani Ravi and Vitthal Srinivasan. Between us, we have studied at Stanford, been admitted to IIM Ahmedabad and have spent years  working in tech, in the Bay Area, New York, Singapore and Bangalore.

Janani: 7 years at Google (New York, Singapore); Studied at Stanford; also worked at Flipkart and Microsoft

Vitthal: Also Google (Singapore) and studied at Stanford; Flipkart, Credit Suisse and INSEAD too

We think we might have hit upon a neat way of teaching complicated tech courses in a funny, practical, engaging way, which is why we are so excited to be here on Udemy!

We hope you will try our offerings, and think you'll like them :-)