j Query : Learn By Example

About j Query online course

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

  • 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 you get from this course?

• 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 andbubble 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 $.fnobject, stateful plugins using the Widget Factory, jQuery UI components and the jQuery UI theme roller

  What am I going to get from this course?

  • 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

Topics covered in this course

• Section 1: You, This Course and Us
  	Lecture 1	You, This Course and Us Preview	01:58
  Section 2: Introduction To jQuery
  	Lecture 2	Client side programming with Javascript Preview	07:44
  	Lecture 3	Why is jQuery cool? Preview	08:08
  	Lecture 4	The Document Object Model Preview	04:45
  Section 3: Install And Set Up
  	Lecture 5	Npm and Http Server install	04:47
  	Lecture 6	Download and set up jQuery	03:32
  	Lecture 7	Set up examples used in this course	02:13
  Section 4: Selectors
  	Lecture 8	Example 1: Hello jQuery World! Preview	11:33
  	Lecture 9	Selectors	04:27
  	Lecture 10	Example 2: Simple selectors	04:12
  	Lecture 11	Example 3: More selectors	09:10
  	Lecture 12	Example 4: Traversing The DOM	08:37
  	Lecture 13	Example 5: Advanced selectors	04:44
  	Lecture 14	Example 6: Select using functions - the filter() selector	04:34
  Section 5: Some Loose Ends
  	Lecture 15	Example 7: Chaining	04:38
  	Lecture 16	Example 8: jQuery in the no-conflict mode	07:19
  	Lecture 17	Accessing native browser element	01:20
  Section 6: Event Handling
  	Lecture 18	Events and event handling Preview	07:29
  	Lecture 19	Example 9: Event handlers	09:12
  	Lecture 20	The event object	06:02
  	Lecture 21	Example 10: Accessing the event object properties	05:28
  	Lecture 22	Event capture and bubble phases	08:07
  	Lecture 23	Example 11: Multiple event handlers	04:32
  	Lecture 24	Example 12: Passing data to event handlers	03:11
  	Lecture 25	Example 13: Listen just once	03:09
  	Lecture 26	Example 14: Remove event handlers	04:29
  	Lecture 27	Example 15: Events in namespaces	06:19
  	Lecture 28	Event delegation	06:05
  	Lecture 29	Example 16: Setting up delegated events	05:05
  	Lecture 30	Example 17: Listening to key events	03:05
  	Lecture 31	Example 18: Event triggers	04:30
  	Lecture 32	Custom events	04:04
  	Lecture 33	Example 19: Working with custom events	04:27
  Section 7: CSS And Animations
  	Lecture 34	Effects and animations Preview	03:57
  	Lecture 35	Example 20: The css() function	09:03
  	Lecture 36	Example 21: The show() and hide() functions	06:03
  	Lecture 37	Example 22: The fadeIn() and fadeOut() animations	03:01
  	Lecture 38	Example 23: The slideUp() and slideDown() animations	02:15
  	Lecture 39	Example 24: The toggle() function	02:43
  	Lecture 40	How do jQuery animations work?	04:15
  	Lecture 41	Example 25: Run code after an animation completes	04:38
  	Lecture 42	Example 26: The animate() function	05:33
  	Lecture 43	Example 27: More animation fun	04:00
  	Lecture 44	Example 28: Stop animations using the stop() function	07:38
  	Lecture 45	Example 29: Delay animations using delay()	03:46
  	Lecture 46	Example 30: Chaining and queueing animations	07:34
  	Lecture 47	Example 31: Custom animation queues	05:05
  	Lecture 48	Example 32: Bypassing the queue	04:55
  Section 8: DOM Manipulation
  	Lecture 49	Manipulating the DOM Preview	01:15
  	Lecture 50	Example 33: Manipulating element contents	04:27
  	Lecture 51	Example 34: The attr() and removeAttr() functions	04:37
  	Lecture 52	Example 35: Add DOM elements relative to selected elements	09:48
  	Lecture 53	Example 36: Create or clone elements	06:31
  	Lecture 54	Example 37: The remove(), detach() and empty() functions	07:32
  	Lecture 55	Example 38: The wrap() and wrapAll() functions	04:03
  	Lecture 56	Example 39: Explicit iteration using each()	02:23
  Section 9: Ajax Requests
  	Lecture 57	Ajax Preview	05:09
  	Lecture 58	Example 40: The $.ajax() request	10:10
  	Lecture 59	Example 41: Syntactic sugar - the $.get(), $.getScript(), $.getJSON()	06:36
  	Lecture 60	Example 42: The load() function	02:36
  	Lecture 61	Example 43: Serialize form contents using serialize() and serializeArray()	07:18
  	Lecture 62	Example 44: Local and global Ajax events	09:30
  Section 10: Performance Optimizations
  	Lecture 63	Categories of optimization techniques Preview	04:22
  	Lecture 64	Performance optimizations tips and tricks	08:56
  Section 11: Plugins
  	Lecture 65	What are plugins? Preview	03:59
  	Lecture 66	Example 45: The Slick carousel	09:27
  	Lecture 67	Building your own custom plugin	04:18
  	Lecture 68	Example 46: Our first custom plugin, the fancyButton()	04:33
  	Lecture 69	Example 47: Best practices to follow in the fancyButton() plugin	07:44
  Section 12: The Widget Factory
  	Lecture 70	What is the Widget Factory? Preview	05:33
  	Lecture 71	Example 48: Build your first widget	07:52
  	Lecture 72	Example 49: Widgets which expose methods to manipulate them	09:31
  	Lecture 73	Example 50: Widgets which trigger events	07:05
  Section 13: The jQuery UI Library
  	Lecture 74	Download and install the jQuery UI library	08:44
  	Lecture 75	Example 51: Set up components using the jQuery UI library Preview	05:31
  	Lecture 76	Example 52: The effects() function	03:12
  	Lecture 77	The jQuery UI theme roller	05:24
  	Lecture 78	Example 53: Try a custom theme	01:26

Who should buy this course?

• • Basic understanding of HTML, CSS and Javascript
  • Web developers who want to move beyond mundane Javascript programming and harness the power of jQuery
  • Students who have never done web development using Javascript before can not buy this course.