Home » Computer Science » AJAX with jQuery » jQuery & CSS Together

Toy Lei

Toy Lei

jQuery & CSS Together

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

1 answer

Last reply by: Professor Lei
Mon Oct 6, 2014 10:28 AM

Post by Timothy White on October 6, 2014

I noticed a problem with using the click event for the submit and text box. It might be better to use focus or submit events because both can be activated with the keyboard. (Tab and Enter)

1 answer

Last reply by: Professor Lei
Fri Mar 29, 2013 8:34 PM

Post by Shawn Vialva on March 29, 2013

Unable to access any of the lessons.

0 answers

Post by Jorge Guerrero on August 14, 2012

Copy and Paste to go make money. I don't know ANYBODY who does that!

1 answer

Last reply by: Professor Lei
Mon Aug 6, 2012 7:55 PM

Post by isaac N harper jr on March 27, 2012

Thank you for clear examples you make this fun!

jQuery & CSS Together

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
  • jQuery and CSS Together 0:50
    • Interactive Login Box
    • Editing Images and Texts
    • Interactive Siding Response

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.