jQuery for Absolute Beginners
basixvideos

jQuery for Absolute Beginners: The Complete Series

Share

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.

  • jQuery for Absolute Beginners

    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.

    Visit Article

  • jQuery for Absolute Beginners

    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.

    Visit Article

  • jQuery for Absolute Beginners

    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.

    Visit Article

  • jQuery for Absolute Beginners

    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.

    Visit Article

  • jQuery for Absolute Beginners

    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!

    Visit Article

  • jQuery for Absolute Beginners

    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.

    Visit Article

  • jQuery for Absolute Beginners

    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.

    Visit Article

  • jQuery for Absolute Beginners

    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.

    Visit Article

  • jQuery for Absolute Beginners

    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

    Visit Article

    View Demo

  • jQuery for Absolute Beginners

    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.”

    Visit Article

    View Demo

  • jQuery for Absolute Beginners

    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! ”

    Visit Article

    View Demo

  • jQuery for Absolute Beginners

    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.”

    Visit Article

    View Demo

  • jQuery for Absolute Beginners

    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. ”

    Visit Article

  • jQuery for Absolute Beginners

    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.”

    Visit Article

    View Demo

  • jQuery for Absolute Beginners

    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.”

    Visit Article

    View Demo

  • jQuery for Absolute Beginners

    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.

    Visit Article

    View Demo

Related Posts

Add Comment

Discussion 119 Comments

Comment Page 5 of 5 1 ... 3 4 5
  1. Global_1981 says:

    I would like to repeat previous requests for downloadable links

  2. John Crane says:

    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?

  3. Zeeshan Umar says:

    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 :)

  4. campolar says:

    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…!

  5. Juergen says:

    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

  6. Kamran says:

    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…..

  7. Vincent says:

    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!

  8. Liz says:

    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.

  9. Liz says:

    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?

  10. Thanks for all these tutorials, they will help a great deal!

    It’s going to take a while to go through them!

  11. Tom says:

    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?!

  12. Brad says:

    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

  13. Nasreddine says:

    Hi all,
    I am beginner in websites developing, I want to know If I have to start learning JavaScript before jumping to JQuery ?

Comment Page 3 of 3 1 2 3

Add a Comment

To add a code snippet to your comment, please wrap your code like so: <pre name="code" class="html">YOUR CODE</pre>. You can replace the class name with "js," "css," "sql," or "php." If there are any "<" or ">" within your code, please search and replace them with: &lt; and &gt; respectively.