Home arrow JavaScript arrow More Top jQuery Tutorials for Beginners

More Top jQuery Tutorials for Beginners

We recently showcased some of the top tutorials on the Web to help you jump into the world of jQuery. While that sampling offers a good starting point, there are many more tutorials available that can help you as well, and we will list them here.

Author Info:
By: wubayou
Rating: 5 stars5 stars5 stars5 stars5 stars / 2
February 09, 2012

print this article

We recently showcased some of the top tutorials on the Web to help you jump into the world of jQuery. While that sampling offers a good starting point, there are many more tutorials available that can help you as well, and we will list them here.

jQuery Tutorial for Beginners

The previous tutorial in this list focused on practices, and we said it was different from most.  This particular tutorial is exactly the opposite, as the author chose to skip any specific concepts or principles in favor of showing code examples that illustrate the power of jQuery.  So, if you are looking to jump right into things without being lectured, this is the tutorial for you.

The main value of the tutorial is its format, which lets beginners really immerse themselves into jQuery in as little time as possible.  By offering snippets of jQuerys power, you can jump from example to example and learn as you go.  Among the topics discussed are jQuery animations and effects, how to show and hide elements, dealing with events, manipulating CSS styles, and selecting elements, just to name a few.  It may be long in content, but the tutorial is easy to understand and offers a lot of valuable information, making it worthy of a bookmark.

Link: http://www.impressivewebs.com/jquery-tutorial-for-beginners/

jQuery Plugins/Authoring

This tutorial comes directly from the official jQuery site, so you at least know its a trusted source that goes by the book.  The tutorial is meant to be reviewed once you have gone over the basics of jQuery, and it describes how to create your own plugins.  Since plugins are a great way to extend jQuerys value, this is one tutorial worth reading, especially if you have some great ideas of your own that you would like to implement and share with others.

The context of jQuery plugins is discussed first, followed by a look at the basics with a sample plugin.  Wrapping things up is a review of some of the best practices you should employ while authoring plugins, as well as some mistakes that you should avoid to make the process as smooth as possible.

Link: http://docs.jquery.com/Plugins/Authoring

Ten Best Practices for jQuery Beginners

There is certainly no shortage of tutorials on the Web that show you steps on how to use jQuery to generate the functionality you desire.  While most of those are solid in their step-by-step formats, it also helps to have certain guidelines at your disposal that you can remember when using jQuery.  This tutorial offers just that in the form of ten best practices for jQuery beginners. 

Keeping this tutorial bookmarked as a frequent reference is a good idea to ensure that you are doing things the right way.  The author offers his ten tips along with some examples to put everything into perspective.  He offers tips to help you speed up your code by caching elements, and also includes pointers that suggest using callback functions, powerful selectors, and more.  The tutorial does differ from most out there, but that is what makes is worth visiting.

Link: http://tomsbigbox.com/10-best-practises-for-jquery-beginners/

jQuery Tutorials for Designers

If you are looking for a tutorial that offers a lot of bang for your buck, this is the one.  Why?  It basically has ten tutorials packed into one.  All of them are concise, offer tips on how to apply JavaScript effects with jQuery, and are easy to follow.

The tutorial begins with a quick visual on how jQuery works, followed by an explanation of how to write a jQuery function.  Once that is out of the way, its on to the ten mini tutorials.  You learn how to implement the following: simple slide panels, disappearing effects, chainable transition effects, different accordions, animated hover effects, clickable block elements, collapsible panels, and more.  Each topic is explained in a manner that is easy to understand and offers visuals and demos to help you see the final effects.  This is definitely one tutorial you want to bookmark to further your skills in jQuery mastery.

Link: http://webdesignerwall.com/tutorials/jquery-tutorials-for-designers

jQuery Essentials Slideshow

We have listed several standard jQuery tutorials that come in your usual Web format, as well as one in the previous list that comes in a video format.  This tutorial differs from the rest in the fact that it is a slideshow.  There are 115 slides in all that detail the jQuery essentials, and the presentation makes the content very easy to understand.  Another plus of this slideshow is that you can move to the next slide at your own pace so you are not rushed.  You can view it right through your browser, or download a PDF version as well.

Link: http://marcgrabanski.com/articles/jquery-essentials-slideshow

How jQuery Beginners can Test and Improve their Code

Optimizing your jQuery code is the entire basis of this tutorial.  Listed with a completion time of around 20 minutes, its a quick look at tips to make your jQuery life easier.  Some of the subtopics include improving DOM manipulation, adding scopes, avoiding jQuery waste, and how to properly use selectors.

Link: http://net.tutsplus.com/tutorials/javascript-ajax/how-jquery-beginners-can-test-and-improve-their-code/

Introduction to jQuery

Heres a tutorial geared towards fans of the video format.  Its a screencast that runs a little over 17 minutes, and it offers a basic introduction of what jQuery is, how you can get it on your web page, and how to write some very basic functions.  The author also wrote a second video that takes the basics explained in his first offering and goes a bit further to advance your knowledge.

Link: http://css-tricks.com/video-screencasts/20-introduction-to-jquery/

jQuery for Complete Beginners

Created for those with some experience with HTML and CSS, this tutorial is broken down into a series of several different articles.  Each is lengthy and builds upon its predecessor, allowing you to learn jQuery as if you were taking it in a class setting.  The way in which the tutorial is separated into different articles may make it easier for some beginners to digest.  It begins in Part 1 with an introduction to jQuery which then proceeds into writing actual code.

Link: http://www.1stwebdesigner.com/tutorials/jquery-beginners-1/

DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.

All JavaScript Tutorials
More By wubayou

blog comments powered by Disqus

- Project Nashorn to Make Java, JavaScript Wor...
- JavaScript Virus Attacks Tumblr Blogs
- Google Releases Stable Dart Version, JavaScr...
- Khan Academy Unveils New JavaScript Learning...
- Accessing Nitro? There`s an App for That
- JQuery 2.0 Leaving Older IE Versions Behind
- Fastest JavaScript Engine Might Surprise You
- Microsoft Adjusting Chakra for IE 10
- Brendan Eich: We Don`t Need Google Native Cl...
- An Overview of JavaScript Statements
- An Overview of JavaScript Operators
- Overview of JavaScript Variables
- More of the Top jQuery Social Plugins
- The Top jQuery Social Plugins
- More of the Top jQuery Slider Plugins

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 

Developer Shed Affiliates


© 2003-2019 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials