Home » Computer Science » AJAX with jQuery » Putting Together AJAX

Toy Lei

Toy Lei

Putting Together AJAX

Slide Duration:

Table of Contents

Section 1: AJAX with jQuery
What Are Ajax & jQuery?

12m 51s

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

7m 36s

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

31m 4s

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

30m 13s

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

23m 59s

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

41m 43s

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

31m 9s

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

50m 3s

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

35m 54s

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

45m 11s

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

28m 10s

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

31m 28s

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

19m 33s

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

45m 4s

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

21m 48s

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
Loading...
This is a quick preview of the lesson. For full access, please Log In or Sign up.
For more information, please see full course syllabus of AJAX with jQuery
Bookmark & Share Embed

Share this knowledge with your friends!

Copy & Paste this embed code into your website’s HTML

Please ensure that your website editor is in text mode when you paste the code.
(In Wordpress, the mode button is on the top right corner.)
  ×
  • - Allow users to view the embedded video in full-size.

  • Discussion

  • Download Lecture Slides

  • Table of Contents

  • Related Services

Lecture Comments (13)

2 answers

Last reply by: Professor Lei
Tue Jul 30, 2013 1:05 PM

Post by Ana Chu on July 29, 2013

it does not WORK ? Please reply the code!

1 answer

Last reply by: Professor Lei
Thu May 23, 2013 10:02 PM

Post by Brian McClain on May 23, 2013

Where's the .sql file for the database with the user table?

1 answer

Last reply by: Professor Lei
Sat Nov 10, 2012 11:46 AM

Post by Kenneth Hyler on November 10, 2012

This lesson has completely alienated me

1 answer

Last reply by: Professor Lei
Thu Sep 13, 2012 12:45 AM

Post by Jorge Guerrero on August 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.

3 answers

Last reply by: Professor Lei
Thu Sep 13, 2012 12:39 AM

Post by Jorge Guerrero on April 1, 2012

Prorf. Lei, you're download files are missing a directory of include files with its files, so when you try to load the lesson file, it fails to load. You need to double-check your training files. Also, you're using short hand notation, and if you've been taking the Educator courses in sequence, the PHP course disables shorthand php notation, like the one you're using in your examples. You should notify your students to enable short hand notation in their php.ini file. Further, errors still keep popping up, like the one I just mentioned.

Putting Together AJAX

Lecture Slides are screen-captured images of important points in the lecture. Students can download and print out these lecture slide images to do practice problems as well as take notes while watching the lecture.

  • Intro 0:00
  • Putting It All Together 0:17
    • The Data
    • The Generic JS File
    • The HTML File
    • The Specific JS File
    • The Ajaxphp Mini Script

Related Services

Educator®

Please sign in to participate in this lecture discussion.

Resetting Your Password?
or
Still having trouble? Contact us
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.