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.
Related Posts
Check out some more great tutorials and articles that you might like
Plus Members
Source Files, Bonus Tutorials and
More for $9 a month for all TUTS+
sites in one subscription.










User Comments
( ADD YOURS )macias December 13th
It will be very useful , nice pack 4 the begginers
( )TwoSocks - Graphic Design and Print December 13th
Thankyou I have a friend who has been asking me where to learn jquery…bingo!
( )Daniel Apt December 13th
Thanks, I really need this
( )OpenSourceHunter December 13th
Thanks for this, jQuery rules!!!
greetz
( )http://www.opensourcehunter.com
BroOf December 13th
I love jQuery, too! BTW: Nice videos and I like your voice
( )Johan Marklund December 13th
i as e real newbie on javascript and jquery think these tutorials is so damn good, thanks for great tuts
( )Martin Berglund December 13th
How come the tutorials are hosted on ThemeForest rather than here on NETTUTS?
Other than that, great series. The tutorials are well made and easy to understand.
( )Trond December 13th
Wow, i`ve never tried to get the hands around jQuery, but now i think it is possible to learn it in a easy way!
thanks!
( )Takumi86 December 13th
Alright cool, i will keep in mind and bookmaaarkk!
( )Max December 13th
These are great tuts, thanks for the effort thats been put in to them.
( )kevinsturf December 13th
Thanks a lot Jeff, since I’m now starting into JavaScript, I think this will be very useful to all of us because I’ve seen what jquery can do and its amazing
( )Patareco December 13th
Been following these series! Very good for learning JQuery
( )saqib August 2nd
yes v.true very good tutorials and complete
( )gizmo December 13th
well done – really looking forward to more…
( )Mike Rice December 13th
This is very awesome! I can finally find something to get a kick start in jQuery!
*bookmark*
( )Alberto Villalobos December 13th
AWESOME i wanted to start in jquery and was reading some tutorials but i think this is great better.
+++THANKS++++
( )Andrea December 13th
UOUUUUUUUUUUUUOUUUUUUUUUUU UOOUUUUUUUUUUUUUUUUUUU and again UOUUUUUUUUUUUUUUUUUUOUUUUUUUUUUUUUUOUUUUUUUU.. that ’s REALLY amazing!!!
I alredy got a book for jQeury, and make a lot if things with it.. but hey you can always learn something new! And this turotial are just GREAT…
One day you coul publish a book about all tutorials on your newtworok of tuts!
( )Moksha December 13th
really nice set of videos, thanks for sharing
( )Andy Gongea December 13th
I’m on them tomorrow. Thank you so much!
Kudos and keep up the great work!
( )Fabryz December 13th
Bookmarking, thx =)
( )AksumkA December 13th
Wow! I’ve been wanting to learn some of this for a while now. Thanks a lot!
( )Vinadeal December 13th
Great… I’m a beginner and I’m so happy to find this style of resources
( )Jason December 13th
Amazing series!
One suggestion: could we get some if statements for the hide/shows to show when hid and hide when shown? This would be incredibly useful.
Thanks!
( )Ilias December 13th
Awesome!
( )Thanks!
M.A.Yoosuf December 13th
thanks jeff, but still those with limited basic stuff, please try to make some additional advance stuff
M.A.Yoosuf
( )http://yoosuf.awardspace.com/
silent December 13th
right, just in time when I want to switch from prototype to jQuery and this published!
( )Thank you very much!
devlim.com December 14th
Great , love it, now can learn jQuery.
( )Thank you!
h-a-r-v December 14th
In case someone preferred mootools, here’s a great 30-day tutorial:
http://www.consideropen.com/blog/2008/08/30-days-of-mootools-12-tutorials-day-1-intro-to-the-library/
( )Rahul December 14th
The tutorials are great. Thanks a lot for sharing them.
( )Faisal Kazmi December 14th
Great Tutorials
( )Jeffrey Way December 14th
@M.A.Yoosuf – Well yeah, that’s the idea. These are tutorials specifically for beginners. It would be a bit silly to throw some advanced tuts their way!
( )jakot05 December 14th
Very nice!, thanks
( )insic December 14th
cool. im a kick ass jQuery developer now.
( )Paris Vega December 15th
Dude. Thank you. Envato…(sniff)…i love you guys….(single tear).
( )Tom Kenny December 15th
I loved this series of videos. It was great fun and I learnt some things I didn’t know before. Thanks guys!
( )sven December 15th
can you also provide a download of all those vids?
( )5antom December 16th
Hi,
Trying to vies videos but getting 404 error. Is anyone else experiencing
( )this?
Really need to see the vids really bad.
Rob Johnson December 16th
Fantastic tutorials! It helped me no end!!
( )John McMullen December 17th
Thanks for the tuts, there’s always something new to be learned with jQuery.
A quick question, I wrote my first plugin that creates the page peel style ads on a web page. How do I submit it to jQuery’s plugins? I’ve searched their site near and far and can’t find anything on the subject.
Oh, and your feedback on the plugin would rock my face off: http://smple.com/2008/12/15/jquery-plugin-page-peel/
( )Martin December 18th
Thanks for the great tutorials! jQuery is amazing.
( )sven December 19th
im hoping there is gonna be a downloadable / iphone/pod version of these videos at some point. very very useful!
( )5antom December 23rd
Hi Jeffery,
Thanks for a wonderful TUT. After watching it I wanted to tackle the navigation on http://www.deviantart.com for one of my clients.
Its not been an easy task. Do you have any pointers or tuts that can help achieve this kind of menu that slides horizontally?
( )John McMullen December 23rd
@ 5antom: Which menu are you talking about on Deviant Art? I looked around, but they all look static.
( )5antom December 24th
@John: thanks for checking it out. If you view deviant on firefox the left hand main navigation actually slides in to the relevant links.
Tried a couple of times and even asked a few people who had experience with java script and Jquerry but they were not able to do it.
( )MadAlien January 1st
Great Great Great Videos thank you very much
( )what about the next stage “Advanced Users ” could we get something like those videos ??? I hope so
Mason Sklut January 6th
Jeffrey, you have done a magnificent job with these screencasts. Kudos to you on that! I can’t imagine the patience and time you must have put in for this series.
- Mason
( )Kevin January 6th
can you set up a place to download all these videos please =)
( )Dave_L January 6th
Thanks for the series, very informative and the format was great. I did notice a problem with the fed to ITunes. Eps. 7-13 never made it over there.
( )Jhay January 6th
Great!! I want more
( )Fesh January 6th
I just learned some basic jquiry and I’m starting the fall in love with it.
( )Man Mohan Singh January 6th
thanks dude,
great tutorials…….
( )Canciller January 6th
hi … i can´t see the link on “Day 1″.
or just intro?
thank´s
( )Shane January 7th
Jeffrey – congratulations on the series. Your hard work is visible for all to see!
( )Zen Elements January 7th
An amazing series and I’ve only read past Day 2!
I would have expected to have found them here on NETTUTS, I have to say but glad they have made an appearance and they’ve been found.
Thanks for sharing them! (some more learning to be done now)
Alex | Zen Elements
( )chris simpson January 7th
what made this series so bloody great was your willingness to interact and help us all out, thanks so much for your effort Jeffery, looking forward to the next bout of ‘casts!
( )Eduardo January 7th
thanks jeffrey, you’re awesome!
( )Fynn January 7th
Thanks man! They were really helpfull for me to get some solid understanding about jQuery. Great videos!
( )ThaClown January 7th
Thanks so mutch, very usefull
( )Theme Blog January 7th
Thanks mate. Very handy info.
( )Brenelz January 7th
Personally I have been following this series since Day 1 and can say from my own experience that this is an excellent series.
Jeffery explains things very well and has a knack for smoothly moving from one topic to another slowly increasing in diffiiculty.
Great WORK!!
( )Tim January 7th
Thanks! Very helpful
( )fcxxff January 7th
Great…
( )You’re the boss!
twe4ked January 7th
Great tutorials, a downloadable version would be great though
torrent it even?
thanks
( )Gareth January 8th
Agreed with te4ked. That would be great!
( )Htoo Tay Zar January 8th
Hello, JW Is there link for Day 1?
( )Jeffrey Way January 8th
@Htoo – Whoops. Sorry about that. It’s been fixed.
( )Denis January 9th
Thanks a lot!!!!!
( )paul January 10th
Have been following the series the whole time great work JW. I’m still waiting on what was promised for the 2nd installment of part 12! Hopefully we’ll see it in a video cast in the near future.
( )Stefan January 11th
All the links are dead. Error 404.
( )Frank January 16th
Awesome post. I just found this awesome jQuery Cheat Sheet for the iPhone. Sweet! I’ve only had it for a day and it’s been really helpful.
http://itunes.apple.com/WebObjects/MZStore.woa/wa/viewSoftware?id=302090867&mt=8
Looks like there’s also a CSS Cheat Sheet from the same guys.
http://itunes.apple.com/WebObjects/MZStore.woa/wa/viewSoftware?id=301093674&mt=8
( )reto January 18th
Great tutorial was watching them on my iPhone but itunes is missing some episodes (8-9,13 and 15 part 1).
could this maybe get fixed?
thanks a lot
( )Joanna January 25th
Thank you for posting this tutorial! Very appreciative.
( )Antonis January 28th
That helped me more than the jQuery intro guide! Thank you!
( )Geoserv January 29th
Wow, this is the biggest and most detailed jquery collection I have come across, thanks for sharing.
( )trendbender February 8th
good articles
( )Andy Gongea February 8th
Hopefully I will reserve myself some time in order to watch these great tutorials. Great work Jeff! Kudos!!!
( )Arvind February 22nd
Great tutorials..I made a code using if..else ( do slideup and slidedown in same case ). Check out guys
http://how-to-write-code.blogspot.com/2009/02/do-slideup-and-slidedown-in-one-click.html
( )munky February 25th
hi , i’m using on the same page lightbox2 plugin and a simple jquery script that i made using the tips from “day 5″, so this simple script adds or removes one upload field. my script works just fine when the lightbox files are not linked to the page but when the lightbox files are linked my script doesn’t work anymore; the order that the files are linked to the. i tried to change the order of linking but with same result
so…what am i doing wrong?
( )siyamak March 1st
It will be very useful .I really need this Thank you
can you explain blockui(http://malsup.com/jquery/block/index-old.html#overview ) in asp.net
for Example when we want update some row from gridview to database, page will be block and after update database, page will be unblock.
thanks a lot
( )Ersin Demirtas March 12th
Hi i watched the 1 and 2 day videos i have learned how to slide out, slide in, show and hide but i am trying to create a php photo gallery and on my admin panel i inserted a archor with id deletebtn to delete to show are you sure you want to delete with show. when i have more then one image it ofcourse is going to show delete button for each. for example i have 3 images so its going to show delete button under each delete archor with same id. when i click delete for photo it shows the div box are you sure you want to delete but for the second and third photo is not showing div box when i click delete.
( )Alfonso Perez V March 17th
I MUST congratulate you, this tutorials have speed up the learning curve of the guys at my office and has been great for reference for my self. Thank you once again and keep up the great job.
( )MC.VIJAY ANANDH March 23rd
really very helpful . thanks for ur tutors. can u post some simple gaming program
( )in jquery?
Pavel Fiskovich March 30th
I have all ‘Days’ on my HD in *.flv format & I can seed it on PB if authors give me their agreement.
( )So What April 4th
Hi . i am trying to watch day 1 but each time i clicked the link it send me to error page .,, Fix it plz
( )Matt April 9th
This series rocks! So does this website! Thanks so much for all the hard work you guys put in!
( )Ronnie Overby April 13th
I thought it would be neat to try this with asp.net instead of php. I was amazed at how easy it was to switch.
I created an aspx page called submit_to_db.aspx and added the following code to the Page_Load event handler:
==========================================================================================================
string name = Request.Form["name"];
string email = Request.Form["email"];
string comments = Request.Form["comments"];
using (SqlConnection conn = new SqlConnection(”Server=.;Database=my_db;Trusted_Connection=True;”))
{
SqlCommand cmd = new SqlCommand(”INSERT INTO comments (name, email, comments) VALUES (@name, @email, @comments)”, conn);
cmd.Parameters.AddWithValue(”@name”, name);
cmd.Parameters.AddWithValue(”@email”, email);
cmd.Parameters.AddWithValue(”@comments”, comments);
try
{
conn.Open();
cmd.ExecuteNonQuery();
Response.Write(”Thank you. We’ll be in touch with you shortly!”);
}
catch
{
Response.Write(”There was a problem. Please try again later.”);
}
==========================================================================================================
And in the html file where the form resides, I changed the 2 references to the php file to the aspx file.
That’s it!
Greate series!
( )Ronnie Overby April 13th
Oops I posted this on the wrong page. I meant to post this on the Day 13 page. Sorry.
( )siva April 15th
hi, i have seen this…..its amazing ……
can u help me to do like this…
http://stocktwits.com/streams/all
( )B.Turan April 21st
in 1 hour i was by DAY 7…
( )Great & Quick Tut. THX…
Binh April 25th
Hi,
( )This is very ambarrasing as I’ve already trouble finishing day1. But I gonna post my question anyway as I really can’t figure out what I did wrong. After downloading jquery-1.3.2.min.js from the jquery website, and saved in the same folder as my index.html, I followed the steps in the instruction video. However, the fading out is not working. I though I downloaded the wrong version of jquery, so I downloaded jquery-1.2.6.pack.js (as used in the instruction video). It’s working in IE, but not in firefox. Can anyone help me?
Camilo May 18th
hi jeff , i am new in web design , your tutorial are very nice .
( )Joe June 5th
I’ve been totally addicted to these tutorials! Great series. Thanks Jeff
( )vipin sahu July 14th
very very nics tutorial
( )Sajid November 4th
I hope it will help me a lot.
Thank you for the great work.
( )Edds November 10th
Hi Jeffrey!
Thnx for making these tutorials, i have a challenge for you,
here is one example of sortable’s.
http://interface.eyecon.ro/demos/sort.html
i have a 10 pictures inside the
All are 100×100 pixels,
they are generated by php and ordered from database field with order value, i need this: when i drag them and change places, in the same time it would be changing values in db!
im asking you because you make a very good tutorials
( )if you are not making a tutorial maybe you can point me to good resources:)
thnx
häns November 15th
hello,
your tuts are awsome! thanks!
i have a question: i want to make an effect (pictureslide and textfade) like on http://squaredeye.com/work/
i think with your tuts i almost can do it.
the question is just: how can i switch to the next ?
i know now how to get a specific but not how i can switch…
thanks for your help!
häns
( )