Home » Computer Science » AJAX with jQuery » Three Parts of Ajax

Toy Lei

Toy Lei

Three Parts of 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.
Since this lesson is not free, only the preview will appear on your website.

  • Discussion

  • Download Lecture Slides

  • Table of Contents

  • Related Services

Lecture Comments (9)

1 answer

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

Post by Brian McClain on May 23, 2013

7:05: "Please make sure you know what the DOM is."
7:15: "Don't worry if you don't know what that [the DOM] is."

0 answers

Post by Professor Lei on September 13, 2012

yes jorge
i wasnt kidding about the min reqs for this course!

1 answer

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

Post by Jorge Guerrero on August 13, 2012

Again AJAS is not for beginners in any of the languages it uses. See Lesson 1 requirements. It's not something brought from another planet, either, just take it part by part.

0 answers

Post by Jorge Guerrero on August 13, 2012

Download the files from Lesson 3, as the code breaks, because of files NOT included in the Lesson 2 download files.

2 answers

Last reply by: Jorge Guerrero
Mon Aug 13, 2012 12:50 AM

Post by Jorge Guerrero on April 1, 2012

Still not getting download files to work. XAMPP Apache is running, and the files are in the htdocs folder, so I'm directly accessing them on the server. Here's the error I get:
Notice: Undefined variable: i in C:\Users\User\XAMPP\xampp\htdocs\AJAX_with_jQuery\Lesson 2\lesson2a.php on line 52

I checked the code, and the error reporting is on these lines:
<div class="clock" id="ticker1"><h2><?=$i; ></h2></div>
<div class="clock" id="ticker2"><h2><?= $j; ?></h2></div>

Three Parts of 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
  • Asynchronicity 0:22
    • Asynchronicity
    • Examples of Synchronous and Asynchronous
  • JavaScript 2:05
    • JavaScript Overview
    • Coding Examples
  • XML and the DOM 4:58
    • XML and the DOM
    • Coding Examples

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.