Toy Lei
What Are Ajax & jQuery?
Slide Duration:Table of Contents
Section 1: AJAX with jQuery
What Are Ajax & jQuery?
12m 51s
- Intro0:00
- What You Will Learn0:12
- What You Will Learn0:13
- Minimum Requirements1:12
- Minimum Requirements1:13
- What is Ajax2:13
- What is Ajax2:14
- Non-Ajax Page vs. Ajax Page2:35
- What is jQuery?3:25
- What is jQuery?3:26
- Why Ajax?4:14
- 5. Asynchronous4:15
- 4. Important for Coders: Better Code Structure5:42
- 3. Faster Dev: Reusable Code6:32
- 2. Less Data Transfer6:49
- 1. More Humanistic Feel8:17
- Real World Examples8:50
- Real World Examples8:51
- Final Comments9:52
- Final Comments9:53
Three Parts of Ajax
7m 36s
- Intro0:00
- Asynchronicity0:22
- Asynchronicity0:23
- Examples of Synchronous and Asynchronous0:44
- JavaScript2:05
- JavaScript Overview2:07
- Coding Examples4:41
- XML and the DOM4:58
- XML and the DOM4:59
- Coding Examples5:12
Putting Together AJAX
31m 4s
- Intro0:00
- Putting It All Together0:17
- The Data0:18
- The Generic JS File2:07
- The HTML File8:42
- The Specific JS File10:16
- The Ajaxphp Mini Script21:07
Putting Together with jQuery
30m 13s
- Intro0:00
- jQuery Notation0:35
- $ and $J0:36
- $ (document) .ready (function () {});2:40
- Selecting with $J ('a')4:52
- Selecting with $J ('.xx')6:51
- Selecting with $J ('#xx')8:45
- this10:08
- Examples Rewritten in jQuery13:02
- The Data & The Generic JS File13:03
- The HTML File14:50
- The Specific JS File16:13
- The Ajaxphp Mini Script28:38
jQuery Core & Basics
23m 59s
- Intro0:00
- The DOM (Document Object Model)0:25
- Elements0:26
- Accessing Elements within the Document3:50
- From Wikipedia10:50
- Object-Oriented and Chaining Methods12:48
- Object-Oriented and Chaining Methods12:49
- Coding Examples14:44
- jQuery()21:05
- jQuery(): Notations and Examples21:06
- jQuery.noConflict()22:42
- jQuery.noConflict()22:43
jQuery Selectors
41m 43s
- Intro0:00
- What is a Selector0:08
- What is a Selector0:09
- Most Basic and Widely Used2:04
- .class and #id2:05
- Coding Examples4:25
- :input and [type=typename]10:35
- :input10:36
- input[type=typename]13:11
- Picking Radio Buttons: Input[type=radio]13:56
- Coding Examples14:28
- eq()18:23
- Introduction to eq()18:24
- Coding Examples for eq()20:18
- Checked Boxes21:52
- Focus26:03
- Submit Button27:33
- Last Child29:19
- Parent31:43
- :odd33:45
- :odd33:46
- Lots More Selectors40:28
- Don't Forget the Generics, Don't Forget 'this'40:29
- Real Example of Selector Usage40:43
- Lesson Summary40:44
jQuery Attributes
31m 9s
- Intro0:00
- What is an Attribute0:12
- What is an Attribute0:13
- .attr() and .removeAttr()3:33
- .attr() and .removeAttr() Overview3:34
- Coding Examples: .attr() and .removeAttr()4:17
- .hasClass(), .addClass, and .removeClass()14:22
- .hasClass()14:23
- .addClass(), .removeClass(), and Toggle Class17:35
- Get Value and Change Value of Checkbox 420:48
- Change Text of Div424:34
- Change HTML of Div327:59
jQuery Elements & Traversing Elements
50m 3s
- Intro0:00
- The DOM Again1:11
- Browser, Window, Document1:12
- Elements3:47
- Accessing Elements within the Document4: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 Filter33:56
Manipulating the DOM with jQuery
35m 54s
- Intro0:00
- .css()0:39
- Add CSS Class to sub LIs & Change Text of LI A0:40
- Change HTML of LI B6:50
- Show Me val of Text Box9:41
- Append Content to LI III11:17
- Clone UL 317:20
- Show Me Position of Line 318:54
- Replace divs With More Flowery Text & Replace All divs With p's21:46
- Show Me Height of div327:48
- Tell Me Left Placement of Body30:19
- Wrap div3 With HTML32:05
jQuery & CSS Together
45m 11s
- Intro0:00
- jQuery and CSS Together0:50
- Interactive Login Box1:01
- Editing Images and Texts13:27
- Interactive Siding Response26:56
jQuery Events
28m 10s
- Intro0:00
- Review of click()0:22
- Click Me0:46
- Double Click Me!2:43
- Hover Over Me3:32
- Mouse Up and Down Me4:50
- Key Up and Down the Textbox9:30
- Change the Setting for the Radio Button11:27
- Trigger the Radio Button Example15:28
- Events the Long Way with Bind19:07
- Show Me an Event Bubble20:35
- Show Me a Live Example24:40
jQuery Ajax
31m 28s
- Intro0:00
- jQuery Ajax0:58
- Show Me Users Via Ajax Part 10:59
- Show Me Users Via Ajax Part 2: Getting the PHP to Work14:26
- Show Me Users Via Load27:45
jQuery Effects
19m 33s
- Intro0:00
- jQuery Effects1:25
- Animate Images1:26
- Show Background & Hide Background9:13
- Toggle Background11:52
- Slide Toggle Background13:07
- Fade Out HF & Fade in HF14:41
- Fade to BG to .817:00
Interactive Textbox
45m 4s
- Intro0:00
- Interactive Textbox0:53
- Building an Interactive Textbox Part 10:54
- Building an Interactive Textbox Part 213:59
- Building an Interactive Textbox Part 323:14
- Building an Interactive Textbox Part 430:11
- Building an Interactive Textbox Part 537:37
jQuery Plugins
21m 48s
- Intro0:00
- An Introduction to Plugins0:28
- Interactive Textbox: But Now as a Plugin Part 10:29
- Interactive Textbox: But Now as a Plugin Part 211: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
For more information, please see full course syllabus of AJAX with jQuery
AJAX with jQuery What Are Ajax & jQuery?
Lecture Description
In this lesson our instructor talks about what are Ajax and jQuery. First, she discusses what you will learn and the minimum requirements for the course. Then she talks and gives examples of Ajax and jQuery. She ends the lesson with a discussion on real world examples and some final comments.
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.
Next Lecture
Previous Lecture
1 answer
Last reply by: Professor Lei
Fri Mar 29, 2013 8:33 PM
Post by Mike Khan on January 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
3 answers
Last reply by: Anthony Reynolds
Thu Nov 29, 2012 1:31 PM
Post by Professor Lei on November 26, 2012
yes sorry - in my mind i thought i had replied to you
thanks for the reminder
there are MANY places that anyones code can break down
especially when you say things like "home-grown" or "my own ____"
so always start your debugging process like this -
simplify simplify simplify
you should first jsut see if your ajax function works
by only having two files
one html with the basic inline jquery/js
and one php which contains the ajax calling function
then when you are sure thats wroking
then start building your project around the stuff
that you have just proven that works
0 answers
Post by Anthony Reynolds on November 26, 2012
Professor Lei, Did you see my questions on the post above?
9 answers
Last reply by: Professor Lei
Fri Mar 29, 2013 8:31 PM
Post by Anthony Reynolds on November 15, 2012
Professor Lei, I have a few questions not based on this course but refering to jquery can you help?
0 answers
Post by Jorge Guerrero on August 13, 2012
Code works, just make sure you re-reference the javascript/jquery files in the example files to your directory. The reference to google reference is good, but you can import your own production file from jquery.com, if you want, but I'd leave it with the google external reference. It saves space, and I think it's better coding.
I found this out when I started really looking at the code to see what I was doing wrong. My first mistake was to try and figure out the functions, which I thought were in AJAX, and I did not understand them, so I thought the code was broken.
Code works fine, but please re-direct your references, and you'll be good to go. The code won't work out of the box like in most downloadable files. This AJAX thing is a tad more advanced. :)
1 answer
Last reply by: Professor Lei
Mon Aug 6, 2012 8:06 PM
Post by Jorge Guerrero on June 28, 2012
Joke: I answered myself above, as the problem still persists.
2 answers
Last reply by: Professor Lei
Mon Aug 6, 2012 7:57 PM
Post by Jorge Guerrero on April 1, 2012
Profr. Lei, I believe the Lesson1.php example you show has an error in the download.
I'm opening the file from the XAMPP localhost server, but the lower half does not behave like in your example. Need to check what's wrong with it, but for the moment please take note.