Sorry, your browser is not supported
To have the best experience using Skillshare, we recommend that you use one of these supported browsers.
Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
78 Videos (7h 13m)
    • You, This Course and Us

      1:58
    • Client side programming with Javascript

      7:44
    • Why is jQuery cool?

      8:08
    • The Document Object Model

      4:45
    • Npm and Http Server install

      4:47
    • Download and set up jQuery

      3:32
    • Set up examples used in this course

      2:13
    • Example 1: Hello jQuery World!

      11:33
    • Selectors

      4:27
    • Example 2: Simple selectors

      4:12
    • Example 3: More selectors

      9:10
    • Example 4: Traversing The DOM

      8:37
    • Example 5: Advanced selectors

      4:44
    • Example 6: Select using functions - the filter() selector

      4:34
    • Example 7: Chaining

      4:38
    • Example 8: jQuery in the no-conflict mode

      7:19
    • Accessing native browser element

      1:20
    • Events and event handling

      7:29
    • Example 9: Event handlers

      9:12
    • The event object

      6:02
    • Example 10: Accessing the event object properties

      5:28
    • Event capture and bubble phases

      8:07
    • Example 11: Multiple event handlers

      4:32
    • Example 12: Passing data to event handlers

      3:11
    • Example 13: Listen just once

      3:09
    • Example 14: Remove event handlers

      4:29
    • Example 15: Events in namespaces

      6:19
    • Event delegation

      6:05
    • Example 16: Setting up delegated events

      5:05
    • Example 17: Listening to key events

      3:05
    • Example 18: Event triggers

      4:30
    • Custom events

      4:04
    • Example 19: Working with custom events

      4:27
    • Effects and animations

      3:57
    • Example 20: The css() function

      9:03
    • Example 21: The show() and hide() functions

      6:03
    • Example 22: The fadeIn() and fadeOut() animations

      3:01
    • Example 23: The slideUp() and slideDown() animations

      2:15
    • Example 24: The toggle() function

      2:43
    • How do jQuery animations work?

      4:15
    • Example 25: Run code after an animation completes

      4:38
    • Example 26: The animate() function

      5:33
    • Example 27: More animation fun

      4:00
    • Example 28: Stop animations using the stop() function

      7:38
    • Example 29: Delay animations using delay()

      3:46
    • Example 30: Chaining and queueing animations

      7:34
    • Example 31: Custom animation queues

      5:05
    • Example 32: Bypassing the queue

      4:55
    • Manipulating the DOM

      1:15
    • Example 33: Manipulating element contents

      4:27
    • Example 34: The attr() and removeAttr() functions

      4:37
    • Example 35: Add DOM elements relative to selected elements

      9:48
    • Example 36: Create or clone elements

      6:31
    • Example 37: The remove(), detach() and empty() functions

      7:32
    • Example 38: The wrap() and wrapAll() functions

      4:03
    • Example 39: Explicit iteration using each()

      2:23
    • Ajax

      5:09
    • Example 40: The $.ajax() request

      10:10
    • Example 41: Syntactic sugar - the $.get(), $.getScript(), $.getJSON()

      6:36
    • Example 42: The load() function

      2:36
    • Example 43: Serialize form contents using serialize() and serializeArray()

      7:18
    • Example 44: Local and global Ajax events

      9:30
    • Categories of optimization techniques

      4:22
    • Performance optimizations tips and tricks

      8:56
    • What are plugins?

      3:59
    • Example 45: The Slick carousel

      9:27
    • Building your own custom plugin

      4:18
    • Example 46: Our first custom plugin, the fancyButton()

      4:33
    • Example 47: Best practices to follow in the fancyButton() plugin

      7:44
    • What is the Widget Factory?

      5:33
    • Example 48: Build your first widget

      7:52
    • Example 49: Widgets which expose methods to manipulate them

      9:31
    • Example 50: Widgets which trigger events

      7:05
    • Download and install the jQuery UI library

      8:44
    • Example 51: Set up components using the jQuery UI library

      5:31
    • Example 52: The effects() function

      3:12
    • The jQuery UI theme roller

      5:24
    • Example 53: Try a custom theme

      1:26

About This Class

96259c7e

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 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

1

Student

--

Projects

0

Reviews (0)

Janani Ravi Vitthal Srinivasan

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 ...

See full profile