Home » Computer Science » AJAX with jQuery
No. of
Lectures
Duration
(hrs:min)

Computer Science: AJAX with jQuery Prof. Toy Lei, M.S.

4.1
69 ratings • 9 reviews
  • Level Intermediate
  • Lessons (min)
  • 1,570 already enrolled!
  • Audio: English

Although “Asynchronous JavaScript and XML” is a mouthful to say, learning it is easy. In this AJAX with jQuery course by Professor Toy Lei, you will learn from multiple code and real life examples from an instructor whose work is featured all over the internet from small internet startups to large Fortune 500 companies. Sample topics include jQuery Attributes, jQuery and CSS, jQuery Effects, and jQuery Plugins. Professor Lei graduated from MIT, worked in the MIT Media Lab, and has been a web developer since the early 1990s. Downloadable code is also included with each lesson so that you can easily follow along.

Table of Contents

Section 1: AJAX with jQuery

  What Are Ajax & jQuery? 12:51
   Intro 0:00 
   What You Will Learn 0:12 
    What You Will Learn 0:13 
   Minimum Requirements 1:12 
    Minimum Requirements 1:13 
   What is Ajax 2:13 
    What is Ajax 2:14 
    Non-Ajax Page vs. Ajax Page 2:35 
   What is jQuery? 3:25 
    What is jQuery? 3:26 
   Why Ajax? 4:14 
    5. Asynchronous 4:15 
    4. Important for Coders: Better Code Structure 5:42 
    3. Faster Dev: Reusable Code 6:32 
    2. Less Data Transfer 6:49 
    1. More Humanistic Feel 8:17 
   Real World Examples 8:50 
    Real World Examples 8:51 
   Final Comments 9:52 
    Final Comments 9:53 
  Three Parts of Ajax 7:36
   Intro 0:00 
   Asynchronicity 0:22 
    Asynchronicity 0:23 
    Examples of Synchronous and Asynchronous 0:44 
   JavaScript 2:05 
    JavaScript Overview 2:07 
    Coding Examples 4:41 
   XML and the DOM 4:58 
    XML and the DOM 4:59 
    Coding Examples 5:12 
  Putting Together AJAX 31:04
   Intro 0:00 
   Putting It All Together 0:17 
    The Data 0:18 
    The Generic JS File 2:07 
    The HTML File 8:42 
    The Specific JS File 10:16 
    The Ajaxphp Mini Script 21:07 
  Putting Together with jQuery 30:13
   Intro 0:00 
   jQuery Notation 0:35 
    $ and $J 0:36 
    $ (document) .ready (function () {}); 2:40 
    Selecting with $J ('a') 4:52 
    Selecting with $J ('.xx') 6:51 
    Selecting with $J ('#xx') 8:45 
    this 10:08 
   Examples Rewritten in jQuery 13:02 
    The Data & The Generic JS File 13:03 
    The HTML File 14:50 
    The Specific JS File 16:13 
    The Ajaxphp Mini Script 28:38 
  jQuery Core & Basics 23:59
   Intro 0:00 
   The DOM (Document Object Model) 0:25 
    Elements 0:26 
    Accessing Elements within the Document 3:50 
    From Wikipedia 10:50 
   Object-Oriented and Chaining Methods 12:48 
    Object-Oriented and Chaining Methods 12:49 
    Coding Examples 14:44 
   jQuery() 21:05 
    jQuery(): Notations and Examples 21:06 
   jQuery.noConflict() 22:42 
    jQuery.noConflict() 22:43 
  jQuery Selectors 41:43
   Intro 0:00 
   What is a Selector 0:08 
    What is a Selector 0:09 
   Most Basic and Widely Used 2:04 
    .class and #id 2:05 
    Coding Examples 4:25 
   :input and [type=typename] 10:35 
    :input 10:36 
    input[type=typename] 13:11 
    Picking Radio Buttons: Input[type=radio] 13:56 
    Coding Examples 14:28 
   eq() 18:23 
    Introduction to eq() 18:24 
    Coding Examples for eq() 20:18 
    Checked Boxes 21:52 
    Focus 26:03 
    Submit Button 27:33 
    Last Child 29:19 
    Parent 31:43 
   :odd 33:45 
    :odd 33:46 
   Lots More Selectors 40:28 
    Don't Forget the Generics, Don't Forget 'this' 40:29 
   Real Example of Selector Usage 40:43 
    Lesson Summary 40:44 
  jQuery Attributes 31:09
   Intro 0:00 
   What is an Attribute 0:12 
    What is an Attribute 0:13 
   .attr() and .removeAttr() 3:33 
    .attr() and .removeAttr() Overview 3:34 
    Coding Examples: .attr() and .removeAttr() 4:17 
   .hasClass(), .addClass, and .removeClass() 14:22 
    .hasClass() 14:23 
    .addClass(), .removeClass(), and Toggle Class 17:35 
    Get Value and Change Value of Checkbox 4 20:48 
    Change Text of Div4 24:34 
    Change HTML of Div3 27:59 
  jQuery Elements & Traversing Elements 50:03
   Intro 0:00 
   The DOM Again 1:11 
    Browser, Window, Document 1:12 
    Elements 3:47 
    Accessing Elements within the Document 4:08 
   .has() 6:56 
    .has() 6:57 
   .find() vs. closer() 11:52 
    .find() vs. closer() 11:53 
   .each() 17:50 
    .each() 17:51 
   .children(); 23:48 
    .children(); 23:49 
   .parent() and .parents(); 25:45 
    .parent() and .parents(); 25:46 
   .next and .prev() 28:32 
    .next and .prev() 28:33 
    .last() 30:32 
   .filter() 33:55 
    Cool Trick: Functionfy-ing the Filter 33:56 
  Manipulating the DOM with jQuery 35:54
   Intro 0:00 
   .css() 0:39 
    Add CSS Class to sub LIs & Change Text of LI A 0:40 
    Change HTML of LI B 6:50 
    Show Me val of Text Box 9:41 
    Append Content to LI III 11:17 
    Clone UL 3 17:20 
    Show Me Position of Line 3 18:54 
    Replace divs With More Flowery Text & Replace All divs With p's 21:46 
    Show Me Height of div3 27:48 
    Tell Me Left Placement of Body 30:19 
    Wrap div3 With HTML 32:05 
  jQuery & CSS Together 45:11
   Intro 0:00 
   jQuery and CSS Together 0:50 
    Interactive Login Box 1:01 
    Editing Images and Texts 13:27 
    Interactive Siding Response 26:56 
  jQuery Events 28:10
   Intro 0:00 
   Review of click() 0:22 
    Click Me 0:46 
    Double Click Me! 2:43 
    Hover Over Me 3:32 
    Mouse Up and Down Me 4:50 
    Key Up and Down the Textbox 9:30 
    Change the Setting for the Radio Button 11:27 
    Trigger the Radio Button Example 15:28 
    Events the Long Way with Bind 19:07 
    Show Me an Event Bubble 20:35 
    Show Me a Live Example 24:40 
  jQuery Ajax 31:28
   Intro 0:00 
   jQuery Ajax 0:58 
    Show Me Users Via Ajax Part 1 0:59 
    Show Me Users Via Ajax Part 2: Getting the PHP to Work 14:26 
    Show Me Users Via Load 27:45 
  jQuery Effects 19:33
   Intro 0:00 
   jQuery Effects 1:25 
    Animate Images 1:26 
    Show Background & Hide Background 9:13 
    Toggle Background 11:52 
    Slide Toggle Background 13:07 
    Fade Out HF & Fade in HF 14:41 
    Fade to BG to .8 17:00 
  Interactive Textbox 45:04
   Intro 0:00 
   Interactive Textbox 0:53 
    Building an Interactive Textbox Part 1 0:54 
    Building an Interactive Textbox Part 2 13:59 
    Building an Interactive Textbox Part 3 23:14 
    Building an Interactive Textbox Part 4 30:11 
    Building an Interactive Textbox Part 5 37:37 
  jQuery Plugins 21:48
   Intro 0:00 
   An Introduction to Plugins 0:28 
    Interactive Textbox: But Now as a Plugin Part 1 0:29 
    Interactive Textbox: But Now as a Plugin Part 2 11:51 

Duration: minutes

Number of Lessons:

Student Feedback

4.1

9 Reviews

11%
89%
0%
0%
0%
By Mike KhanJanuary 21, 2013
You mentioned that one should be excellent in jQuery, Educator does not offer jQuery course. Is there another place I can learn jQuery
By Anthony ReynoldsDecember 2, 2012
I understand however it wouldnt pass the variable over to the php so i have recoded my href so it will allow for me to get a full page refresh. thank you for all of your help i have really learned so very much from these classes.
By Elwin sylvesterSeptember 4, 2012
This is funny. I've done some JQuery stuff and watched a couple of tuts but I've never seen this live stuff. So, I wanna thank you.
By Jorge GuerreroAugust 14, 2012
Amazing! Stretegic planning is to business what ajax is to programming, no doubt.
By Jorge GuerreroAugust 13, 2012
Nice coding. You're really good, Prof. Lei. However, the Javascript class offered on educator is not focused on AJAX. They should offer a jQuery class for more coherence between courses.
Educator®

Please sign in to participate in this lecture discussion.

Resetting Your Password?
OR

Start Learning Now

Our free lessons will get you started (Adobe Flash® required).
Get immediate access to our entire library.

Membership Overview

  • Available 24/7. Unlimited Access to Our Entire Library.
  • Search and jump to exactly what you want to learn.
  • *Ask questions and get answers from the community and our teachers!
  • Practice questions with step-by-step solutions.
  • Download lecture slides for taking notes.
  • Track your course viewing progress.
  • Accessible anytime, anywhere with our Android and iOS apps.