20 Must Read JQuery Tutorials for Web Developers

JQuery is a very powerful tool for web developers to create extra ordinary effects. If you are looking a JQuery tutorials then your search ends here. In this post I am sharing a list of very useful JQuery Tutorials to help web developers.

In this list includes Form Validation, Form Submission without refreshing a page, Jquery Accordion Menu, Modal Window Tutorial, Vertical Scrolling menu with CSS and JQuery, Building Lightbox with JQuery and ASP.NET User Controls and jQuery etc.

Here's the following JQuery Tutorials list:

Simple JQuery Image Slide Show with Semi-Transparent Caption

I will show you how to create a simple image slide show with a semi-transparent caption with jQuery. This example is suitable to display news headlines, or a image slide show in your website frontpage.



Inline Image Enlargement with jQuery

So, having the day off, I decided to mess around a little with image manipulation. There are a ton of tutorials out there about LightBox and other similar jQuery plugins, but my goal was to make something simple without needing to have another page to load so I could see the image…to make it a little bit larger, so to say.



State-Saving jQuery Accordion Menu Without Reloading the Page

After finding jQuery, I fell in love with it's ease of use and relatively small code footprint. When I set out to create this site, I wanted something that: used the entire page, scaled well, looked nice, degraded gracefully and was SEO friendly. What I found was jQuery's accordion menu. You may recognize the second example (#list1b) as a smaller version of my Portfolio; however, I wanted to tweak it (of course) and make it so each section housed my page copy and could be bookmarked and re-accessed without having to re-click on that section. I also completely re-styled the menu with a CSS file but that is beyond this tutorial.



Tutorial : AJAX interface/menu using jQuery/PHP

This tutorial teaches you how to present data using AJAX (using jQuery) with some neat effects. We can use PHP/MySQL to store the data and call it. In this tutorial I`ll teach you how to do so with PHP.



Improving Search Boxes with jQuery

This time we will learn how to improve a little more our sites by adding some additional interactions to our search boxes like autofocus, highlighting, autoreplace default text and more by using jQuery



How to make a completely reusable jquery modal window

In this tutorial we will code a modal window with jQuery that is completely reusable, so we can put multiple modal windows without making a specific coding for it.



How to Validate Forms in both sides using PHP and jQuery

We are going to learn how to validate your forms using PHP and jQuery in both sides: client side (using javascript with jQuery) and server side (using PHP). It will be interesting to see how to use regular expressions to validate different kind of e-mails, passwords and more.



Create a Vertical Scrolling Menu with CSS and jQuery

So here it is, a fully reworked menu, with some new features, like text tooltips and loading message. As always this menu works in all major browsers and degrades gracefully when JavaScript is turned off.



JQuery – Star Comment Rating

Here is a nice little rating effect. This does not include the PHP, it is only the JavaScript, HTML, CSS, and Images. If you like this, I do have the PHP script that I created, but will not support, and I threw together quite quickly. But, what the heck, back to this post now.



Submit A Form Without Page Refresh using jQuery

In this tutorial I'll show you how easy it is to do just that -- submit a contact form that sends an email, without page refresh using jQuery! (The actual email is sent with a php script that processes in the background).



Building a Lightbox with JQuery

Rather than assume that you know what I mean by a lightbox, I’ll briefly explain it. The first experience I had with this UI pattern, and I believe the first real example of it, was by Lokesh Dhakar in 2005. Since then, this pattern of simple, unobtrusive script used to overlay images on the current page huddletogether.com is everywhere. It’s hard to find a modern site without some variant of the in-page popup element over a semi-transparent background.

jQuery Thumbnail with Zooming Image and Fading Caption Tutorial

Learn how to build thumbnail gallery with zooming effect and fadein and fadeout caption. This tutorial will walk you through the concept behind it and how to code it.

Making a jQuery infinite carousel with nice features

Due to high interest in the first tutorial on jQuery infinite carousel and a lot of suggestions from you all, i decided to take it a step further by improving the code a bit, and add some features.

ASP.NET User Controls and jQuery

If you like programing pure in client side to render every thing your self for more control , you should integrate your client side scripts with server side technology.

Create a Thumbnail with Fading Caption Using jQuery

This tutorial will show you how to create a fading caption for your thmbnail gallery. It uses jQuery framework and CSS to create this transparent and fading effect.

Client side filtering data with jQuery

In this tutorial we are going to make a really easy to build filtering system with jQuery. There will be no AJAX or PHP, just HTML and jQuery.

Making a jQuery Plugin Truly Customizable

Most if not all of the jQuery plugins out there have some level of customization. But very few of the plugin authors have mastered the very particular art involved.

How to load content via AJAX in jQuery

It’s a simple but useful tutorial for those who need to know how to load dynamically some static content in their websites via AJAX. I have decided to write it because Cyanade ( an user from our forums) asks some questions about dynamic content and ajax in their post Integrating jQuery into an app.

Turn Nested Lists Into a Collapsible Tree With jQuery

This can be countered by using JavaScript to turn the nested lists into a collapsible tree. And, while being at it, list items that include other lists should be represented as folders.

jQuery Thickbox and ColdFusion Dynamic Image Resizing

I want to build a page which will make use of the Thickbox plugin, but I don't want to hard code the images. Instead, I'll let ColdFusion scan a folder and create the list for me. Since I'm using ColdFusion 8, I can also use it to create the thumbnails as well. This means I can copy images right off my camera, dump them in a folder, and leave it at that. I like easy. Let's look at the code.

If have any opinion, please leave a comment.

Related Posts :