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.
-
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.
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
By Jeffrey Way
Join our newsletter!
Create a Tutorial, Get Paid!
Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Nettuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More
I would like to repeat previous requests for downloadable links
welcome
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.
Hey Jeff, I was wondering if you would be able to help me with instruction in designing a window that scrolls from one image to the next, but has buttons going along the top that if you click on, it will return to the image that is registered to that button. A good example would be vindictus.nexon.net. You can see what I’m talking about at the top of the page as well as in the catalog box on the top left side of the page under the navigation bar. Thanks.
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 ?
no, it’s not neccesary
Jeff,
I just watched you tutorial on image slides. Great stuff, very easy to understand. You mentioned in that tutorial that you were originally going to show us how to fix some bugs, then decided to show the image slides and do the bugs the next day. However Day 9 wasn’t about bug fixes.
I’ve been having an issue with the s3Slider jQuery plug-in where it starts to flicker as the images and text banners change. Would it be possible for you to do a tutorial on how to fix that bug. I know from scouring the web that there are A LOT of people out there with the same issues.
Thanx in advance,
Sean
This is why i love Envato. And thank you so much for the efforts Jeffrey!
useful info. thanks..soon:)
Hi Jeff, I am a newbie in JQuery. I would like to ask if you have a sample tutorial of on how to create a customized accordion using ASP.Net and JQuery? Thank you.
Hey Jeffrey thaks for the great tutorials.
In Day 10 tutorial it won’t work with jQuery 1.5.0 If you use jQuery 1.2.6 like in the tutorial it works just fine.
How to fix that?
This is really a great website for the jquery beginners. I really love this..
Hi,
Thanks for tutorials, it’s really amazing.
I want to know if the tutorial 15 is the latest one on this series ?
Best instructional jQuery tutorial ever. Thanks again
Hello Jeffrey will you please do more recordings on jquery…..
and jquery for absolute beginners was really awesome
Thanking you in anticipation
Vinod
(Student)
Thanks for sharing all nice plugins
thanks for taking the time to make these tutorials – they are by far the best i have found. Very comprehensive for a beiginer like myself.
Hey Jeff, I was wondering if you would be able to help me with instruction in designing a window that scrolls from one image to the next, but has buttons going along the top that if you click on, it will return to the image that is registered to that button. A good example would be http://www.vindictus.nexon.net/. You can see what I’m talking about at the top of the page as well as in the catalog box on the top left side of the page under the navigation bar. Thanks.
I apologize for the comment up top. Was a bit of an accident.
nice work thanks for the tutorial!!!!!!!!!!!!!!!!!!!!!!
These Vedios Are Very UseFul Thanx Alot …..!
Hi , Is there a new version for this videos because its from 2009 !!!!
These Vedios are very useful for me,thanks!
Re: Day 15, Part 1
First, thanks for this very helpful tutorial. I do have a question about something in your PHP code …
In your switcher.php code you call setCookie(), i.e. upper case ‘C’. The PHP function to set a cookie is actually “setcookie()”, i.e. lower case ‘c’, ref: http://php.net/manual/en/function.setcookie.php. PHP function names are case-sensitive, right? So I’m confused how this even worked without any complaints from PHP not knowing where “setCookie()” is defined.
Thanks again,
Randie
Thanks for sharing the tutorial. It is very useful.
I definitely recommend make these videos downloadable.
Thanks.
JUST GREAT, i have an idea i havent found yet anywhere, a video tutorial about how to get any efect from any website, i mean if you like any jquery efect from a web page, the whole process to get the code, the files and depurate it and how to put it un your own desing, that would be just awesome. !!!! thanks 4 the videos and tutos
thanks
I just took the first class of your JQuery for Absolute Beginners. It is excellent. You had mentioned in the video if someone needed CSS tutorials you could recommend some. I definitely could use it. I am looking forward to taking the Day 2 of the JQuery for Absolute Beginners. Thank you so much!!!!
Muy bueno, aprendiendo…
Thank you so much for sharing such a tutorial.
Hi,
Thanks to share nice tutorial.
jQuery has the benifit over other JS frameworks that jQuery has lot of plugins and documentation available freely. I listed some jquery questions at jQuery Interview Questions
wonderful collection
tnx
Nice Tut! Congrats, man.
Hi Jeffrey,
Once again, this is a great and invaluable resource to beginners like myself.
Do you think you might be able to show us one day how create this floating/wobbling effect like ‘http://duplos.org/’? I have found some sample code but I have found it really difficult to implement and I don’t totally understand it.
thanks again
Dan
Hi
It`s a great tutorials for beginer like me. I lerned a lot a cool thing about jquery.
I`m on a 12`th day and I can`t find 2`nd part. Maybe someone can help my find him.
Sorry for my english.
Thank you so much for sharing such a tutorial.
This tutorial is valuable.
Thank you friend
Wow.. never seen such a huge list of video tutorials.
Hi Jeff,
Very Good Tutorial for Beginners
Thanks, These tutorials are really helpful to learn the jquery in easiest way .
How I can get informed for the latest videos.. please let me know..