jQuery for Absolute Beginners: The Complete Series
Hi everyone! Today, I posted the final screencast in my “jQuery for Absolute Beginners” series on the ThemeForest Blog. If you’re unfamiliar – over the course of about a month, I posted fifteen video tutorials that teach you EXACTLY how to use the jQuery library. We start by downloading the library and eventually work our way up to creating an AJAX style-switcher. I’m very proud of this series; possibly more than any other that I’ve done for Envato.
-

Day 1
So everywhere you look, you see “jQuery this” and “jQuery that”. For the last year or so, this library has been the darling of the Javascript world. But do you feel that you just can’t seem to learn the dang thing? Do you hate how the existing tutorials assume that you know WAY more than you actually do? If this rings true for you, I can help.
-

Day 2
Continuing from yesterday, today we’ll take a look at the “fadeIn”, “slideDown”, and “show” methods. We’ll also examine jQuery’s “css” abilities.
-

Day 3
Today, we’ll take a look at the animate method, and a few “gotchas” that come along with it. You’ll learn how to shift any element across the screen.
-

Day 4
Consider an unordered list filled with ten or so list-items. In this video, I’ll show you exactly how to individually select each one of them. We’ll be using advanced selectors, including a touch of X-Path.
-

Day 5
Today, we’re going to learn how to dynamically create and remove elements. The “appendTo()”, “size()”, and “remove()” methods will be reviewed. As always, feel free to ask any questions that you might have. Enjoy!
-

Day 6
It’s day six. We’re going to take a look at the toggle() and toggleClass() methods and how they can be used to essentially turn “off and on” elements or classes.
-

Day 7
Today, we’re going to take a look at the hover() method. This will allow us to write code for when a user mouses on and off the elements in a wrapped set. We’ll also take another quick look at animating elements.
-

Day 8
At the request of one of our viewers, I’ll show you how to mimic the image functionality seen here. Though, at first glance, it might appear to be difficult, don’t worry! It’s actually quite simple. I’ll show you how.
-

Day 9
In today’s video tutorial, I’ll show you how to resize text every time an associated anchor tag is clicked. We’ll be examining the “slice”, “parseFloat”, and “CSS” Javascript/jQuery methods.
XEROX CODE -

Day 10
“It’s time to start digging into jQuery AJAX capabilities. Today, we’ll start off as simply as we can. We’ll store information on one page, and then load that specific information from another page! We’ll accomplish this by using jQuery “load()” method.”
-

Day 11
“Have you ever hovered over an image and seen a larger version pop up that moves parallel to your mouse movement? I’ll show you how to mimic that functionality today! ”
-

Day 12
“Today will be the first part of a 2-part series. Ultimately, we’ll be drawing information from a database to create an advanced tooltip. Today, we’ll start with the layout and the basic functionality. It shouldn’t be too different from what we did in Day 11. In Part 2, we’ll use jQuery to call a PHP method asynchronously, and then populate the tooltip.”
-

Day 13
“Today, I’m going to show you how to submit information to a database asynchronously – using PHP and jQuery. We’ll be primarily working with the $.ajax method. ”
-

Day 14
“Today, I’ll show you how to implement a jQuery plugin into your applications. There are literally hundreds of third party plugins available. It would be silly to ignore them! As you’ll find, they’re quite easy to implement! I’ve chosen the s3Slider plugin.”
-

Day 15: Part 1
“Today’s screencast is a bit misleading! Over the course of the next two tutorials, we’ll be creating a jQuery style-switcher that will allow the user to switch between CSS files. However, today we’re only going to be working with PHP! Day 15: Part 2 will cover the jQuery.”
-

Day 15: Part 2
In Part 1 of day fifteen, we worked on setting up the PHP side of a CSS style-switcher. Today, we’re going to take things one step further and implement some AJAX functionality. Coming in at just under thirty minutes, this final video in the series is the most in depth.






jQuery Lightbox Evolution only $12.00
Events Calendar Pro - Wordpr ... only $30.00 
I would like to repeat previous requests for downloadable links
Hello Jeff,
Based on the comments, I’m sure your videos are great. I cannot, however, hear them through headphones. At Starbucks, the background is noisy, yet I can hear most videos very clearly. The MIT videos are a good example.
Is there anything you can do to increase the volume?
Gr8 work buddy, I have gone through some of your tutorials and they are really good. I have recommended your tutorials to my junior team members as well
Just a question to you: Why the hell are you using different editors in different tutorials? (i thought i’d see what you use as it may be the best, and your using all of em, VS, aptana, phpEd, etc…!
Hi Jeff,
I would like to ask for a tutorial that demonstrates the usage of jquery plugin datatables. I would like to find a way to present mysql data in a table-view and have this editable.
Nothing to complicated with the available extensions for jquery but would be very helpful for me in every day business.
Thanks
Jürgen
Hi Jeff,
I have completed all the 15 beginnes tutorials for jquery and learned in a very easy way thanks to you. Plz tell me when will you post jquey new tutorials for us, plz plz continue the series ….. Plz show us how to work with objects in Jquery it’s a very important topics that you have not mentioned in your tutorials. Eagerly waiting for your reply…..
grt info
grt info bro
I really enjoy these videos (I’m on day 4) and I really appreciate you taking the time to post them up. Here’s hoping you continue the series!
Hey, Jeff. Your tutorials were very helpful, but can you tell me the links to come of your more advanced tutorials? I’m having some trouble finding them.
I have a suggestion that might make a nice addition to Day 13′s Asynchronous Database Submission. Say you wanted to build a chat room based on JQuery and PHP. You could use, such as in your example, a simple form that submits without leaving the page using PHP, but the addition I’m asking for a tutorial on would be a way to display those submitted comments from say maybe an external PHP file or other page that simply displays the comments as they come in. The JQuery would need to do something like check for new messages, and when a new message arrives, update the page without that annoying flickering that you seem to get with the typical refresh of the page. Do you think you could do one like this?
Thanks for all these tutorials, they will help a great deal!
It’s going to take a while to go through them!
I see code all over..a piece of jquery, javascript, and the css already done. The demos are all something I would like (just like a slide/hide answers FAQ page). BUT DON’T KNOW HOW TO LINK ANY OF IT!!!! WHAT GOES WHERE? I got three minutes in to the first video and you lost me…Just want a reasonable FAQ page?!
Jeffery Once again you are a godsend. I have ran from Javascript for 6 years, and JQuery for 2. After watching these videos you have made it look easy.
I never realized how close to PHP that JS is
Thanks, Brad! Glad you enjoyed it. But…I definitely need to update this series.
Hi all,
I am beginner in websites developing, I want to know If I have to start learning JavaScript before jumping to JQuery ?
Hi, any one can replay me ?