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
hi … i can´t see the link on “Day 1″.
or just intro?
thank´s
Jeffrey – congratulations on the series. Your hard work is visible for all to see!
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
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!
thanks jeffrey, you’re awesome!
Thanks man! They were really helpfull for me to get some solid understanding about jQuery. Great videos!
Thanks so mutch, very usefull
Thanks mate. Very handy info.
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!!
Thanks! Very helpful
Great…
You’re the boss!
Great tutorials, a downloadable version would be great though :) torrent it even?
thanks
Agreed with te4ked. That would be great!
Hello, JW Is there link for Day 1?
@Htoo – Whoops. Sorry about that. It’s been fixed.
Thanks a lot!!!!!
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.
All the links are dead. Error 404.
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
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
Thank you for posting this tutorial! Very appreciative.
That helped me more than the jQuery intro guide! Thank you!
Wow, this is the biggest and most detailed jquery collection I have come across, thanks for sharing.
good articles
Hopefully I will reserve myself some time in order to watch these great tutorials. Great work Jeff! Kudos!!!
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
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?
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
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.
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.
really very helpful . thanks for ur tutors. can u post some simple gaming program
in jquery?
I have all ‘Days’ on my HD in *.flv format & I can seed it on PB if authors give me their agreement.
Hi . i am trying to watch day 1 but each time i clicked the link it send me to error page .,, Fix it plz
This series rocks! So does this website! Thanks so much for all the hard work you guys put in!
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!
Oops I posted this on the wrong page. I meant to post this on the Day 13 page. Sorry.
hi, i have seen this…..its amazing ……
can u help me to do like this…
http://stocktwits.com/streams/all
in 1 hour i was by DAY 7… :-)
Great & Quick Tut. THX…
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?
hi jeff , i am new in web design , your tutorial are very nice .
I’ve been totally addicted to these tutorials! Great series. Thanks Jeff
very very nics tutorial
I hope it will help me a lot. :)
Thank you for the great work.
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
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
Very nice and useful tutorials to web designers,
Thanks for posting.
nice one for beginners
very useful, thanks very much
These are just awesome! I’ve always had trouble understanding jQuery and these are just perfect – easy to understand, clear, piece by piece. Thanks so much :-)
I can’t get any of them to play…..? Tried several browsers too. :(
great tutorials, Thank you Jeffrey!