2011年最新的50个jQuery教程
50 Fresh jQuery Tutorials 2011
1. Parallax Slider with jQuery
Happy New Year! We will kick start 2011 with a vibrant image slider tutorial. We will make use of the parallax principle to move different backgrounds when we slide to an image in order to create some nice perspective. This will give a great depth to the whole slider when it’s in motion.
2. Animated Form Switching with jQuery
In this tutorial we will create a simple animated form switch with three very common forms. The idea is not to leave the page when the user goes to another form but instead make the new form appear within the same container, expanding or contracting to the dimensions of the new form.
3. Sweet Thumbnails Preview Gallery
In this tutorial we will create an image gallery with jQuery that shows a preview of each image as a little thumbnail. The idea is to hover over the slider dots and make the regarding thumbnail slide into the previewer. When clicking a slider dot, the full image will slide in from the right or left side, depending on the currently viewed image.
4. How To Create a Cool Animated Menu with jQuery
In this tutorial we’ll be building a cool navigation list complete with a sliding hover effect. Learn how to build the concept in Photoshop, lay out the basic HTML elements, style everything up in CSS then tie it all together with a few lines of jQuery to create a semantic, accessible and degradable menu design.
5. How to Make Auto-Advancing Slideshows
One of the most requested improvements over the tutorials presented on this site, when it comes to slideshows, is the ability to have the slides advance automatically. It is actually not that difficult to achieve this effect, and to demonstrate it, in this short tutorial we are going to make our HTML5 Slideshow auto advance with a few lines of jQuery
.
6. Digg Like URL Submitter Using JQuery and PHP
Today I want to create something that fetching the submitted url data, some kind that many social bookmarking have, beside 非死book, the other famous one is digg, this image below is something that I share in this post.
7. Simple JQuery Flickr Style Tooltip Menu
In today post I try to create the flickr style tooltip drop down menu, I mean the drop down menu when you see in the detail image page, the challenge creating this feature is the CSS, that contains gradient and manipulating box so that can look like a triangle in the tooltip menu after the main menu clicked.
8. Shuffle Between Images Using JQuery
Shuffle mean changing the position between each items position, I continue this shuffling images feature so that can be added to my previous post about creating collage image gallery using jquery, and better can be added with rotating feature too. I’m using the same layout and images position like before.
9. JQuery Expand Stacked Images Using Slider
This time the post will show how to expand the stacked images with jquery, for the illustration, there is a stack of images that have very small margin between each image, and the slider have a function to make the margin larger, really easy to imagine right? Now to make it look stacked I’m using jquery plugin, the rotate3Di and of course the JQuery UI slider
10. Thumbnails Preview Slider with jQuery
In this tutorial we will show you how to create and use a thumbnails preview slider with jQuery. Since we got a lot of requests to show how to make the preview slider work separately from the full image view, we decided to make a tutorial on how to use the little thumbnails preview part only.
11. jQuery’s Data Method – How and Why to Use It
jQuery’s data method gives us the ability to associate arbitrary data with DOM nodes and JavaScript objects. This makes our code more concise and clean. As of jQuery 1.4.3 we also have the ability to use the method on regular JavaScript objects and listen for changes, which opens the doors to some quite interesting applications.
12. Spotlight: jQuery replaceText
Every other week, we’ll take an ultra focused look at an interesting and useful effect, plugin, hack, library or even a nifty technology. We’ll then attempt to either deconstruct the code or create a fun little project with it.
13. XML banner fader in jQuery
More jQuery animation! This one puts a fading set of banners on your page. It uses simple XML to tell the javascript what banners to pull in, and the URLs you want the banners to link to. This is ideal for linking to top featured stories.
14. Overlay-like Effect with jQuery
Today we will create a slick overlay effect with jQuery that does not use an overlay. The idea is to change the opacity or the color of certain elements in order to make it look like as if we are covering the content with an overlay. This allows to focus certain elements in a web page while making others appear less prominent.
15. Fullscreen Gallery with Thumbnail Flip
In this tutorial we will create a fullscreen gallery with jQuery. The idea is to have a thumbnail of the currently shown fullscreen image on the side that flips when navigating through the images. The big image will slide up or down depending where we are navigating to. We will add navigation controls for the mousewheel and for keys. The thumbnail will have a zoom and and a fullscreen option, making the image in the background appear in fullscreen mode or as a complete image, resized to fit in the page.
16. Making a Flickr-powered Slideshow
Today we will be developing a jQuery plugin that will make it easy to create slideshows, product guides or presentations from your Flickr photo sets. The plugin will be using Flickr’s APIs and YQL to fetch the photos in the sets, after which it will create the markup of the slideshow and listen for events
17. Converting jQuery Code to a Plugin
When it comes to efficiently organizing jQuery code, one of the best options is turning certain parts of it into a plugin. There are many benefits to this – your code becomes easier to modify and follow, and repetitive tasks are handled naturally. This also improves the speed with which you develop, as plugin organization promotes code reuse.
Here is a jQuery example for a captcha in a registration form. In order to pass the “Are you human” test, the user has to drag the numbers from 1 to 6 into order.
19. Rounded Menu with CSS3 and jQuery
In this tutorial we are going to make use of the incredibly awesome rotating and scaling jQuery patch from Zachary Johnson that can be found here. We will create a menu with little icons that will rotate when hovering. Also, we will make the menu item expand and reveal some menu content, like links or a search box.
20. Jquery Advanced Ajax validation with CAPTCHA
jQuery offers a plugin called validate which will allow you to create stunningly user friendly sign up forms, login addresses, contact forms and much more. The plugin is written and maintained by Jörn Zaefferer, a member of the jQuery team, lead developer on the jQuery UI team and maintainer of QUnit. In this tutorial I’m going to teach you how to create a signup form with advanced AJAX validation and CAPTCHA.
It’s the age old (well, in webby terms) issue of how to populate one select box based on another’s selection. It’s actually quite easy compared with the bad old days, and incredibly easy with jQuery and a dash of Ajax. 
22. Spotlight: Constrained Stickies with jQuery
Today, we’re going to take a look at a plugin that implements a pretty neat effect — it’s pretty hard to explain in a sentence so you may as well click on the continue button to get started after the jump.
23. Fun with jQuery Templating and AJAX
In this tutorial, we’ll take a look at how jQuery’s beta templating system can be put to excellent use in order to completely decouple our HTML from our scripts. We’ll also take a quick look at jQuery 1.5′s completely revamped AJAX module.
24. Yahoo Instant Search with Jquery and Ajax
Yahoo instant search implementing with Yahoo Search Boss API using jquery and ajax. This is very similar to my previous post just changing few lines of code. I feel Yahoo search results better than Bing results. Use it and make your own search application.
25. Gravity Registration Form with Jquery
Sometimes registration form decides your web application success rate, I feel the first step(registration) should be less fields and eye catching it will surely impress the users. I had designed a new style registration form with gravitational effect. I hope you like this. Thank you!
26. Moving Boxes Content with jQuery
Today we will create a website template with some really sweet animations using jQuery. The idea is to have little boxes scattered around at the top of the site and when a menu item is clicked, the boxes animate to form the main content area. We will use some different animation effects that we will add as options to the menu item.
27. Expanding Image Menu with jQuery
In today’s tutorial we will create an expanding image menu with jQuery. The idea is to have some columns with black and white image slices that will make a content area slide out when we click on them. We will also slide in the colored version of the image, creating a neat effect.
28. Animated Content Menu with jQuery
Today we will create a slick animated content menu with jQuery for a restaurant theme. The menu items will be animated and when clicked, a content area with more information will appear. Also, he background image is going to change according to which menu item was clicked.
29. How to Make a Slick Ajax Contact Form with jQuery and PHP
This tutorial shows you how to build a nice-looking, smooth contact form that visitors can use without having to leave the page they're reading.
30. How to Make an Elegant Sliding Image Gallery with jQuery
Learn how to build a nice-looking sliding photo gallery using JavaScript and jQuery. Full code download included.
31. Drag-and-Drop with jQuery: Your Essential Guide
Learn how to use jQuery, and the jQuery UI Draggable and Droppable plugins, to create drag-and-drop interfaces in your web pages. Includes a full drag-and-drop card game example.
32. Creating a 5 star rating system using jQuery, PHP and MySQL
In this tutorial we will create a simple 5 star rating system using jQuery, MySQL, PHP and AJAX. We will use jQuery to highlight the star the mouse is over and the preceding stars, AJAX to send the vote to the server, PHP to process the vote and MySQL to store the vote.
Today I want to create a simple traditional memory game based on JQuery this example using only client side scripting, most people already know how to play this game, usually this game using some card, we must find the same card in two sequential time, if we found it the card would opened until we have all the card empty. 
34. JQuery Collapsible Load Scroll
Almost all blogger using 推ter, right now I always open 推ter in one of my firefox tab, sure I never check everyone newest status forever maybe I just check it once in two or four hours, and sometimes I off from 推ter for one or two days.
35. Making a Custom 非死book Wall with jQuery Templates
In this tutorial, we are going to create our own version of 非死book’s wall. We will be using 非死book’s Graph API with jQuery, and the template plugin. The jQuery.tmpl plugin will allow us to define templates within our page, and convert the posts we’ve obtained from the API into a real HTML page.
36. Drag and Drop Buttons-Tutorial-Jquery January 2011
Hello all :) This is my first tutorial on this site Hope you like this. We are creating a set of element which hold drag and drop capability:
In this tutorial we're going to use jQuery to make a slideshow 
38. Drag Drop Shopping Cart Using JQuery
There are a lot tutorial about creating drag and drop shopping cart, in this post I want to share my version still with JQuery, but the different is this example only shows the code on the client side, which mean all of data are hardcoded on the html, and counting price and total items will be handle by javascript.
39. Create Delicious Tag Field Using JQuery
Delicious is one of the popular social bookmarking, it make us easier to save our important links, and I amaze cause how easy to use tagging field when we want to save new link, right now I want to create something like that, well actually not really similar, I’m not implemented all the features.
40. Simple Vote Using JQuery Animate
This is a very short post and simple idea to use JQuery animate function in voting system, I post this maybe it will useful for replacing voting system that using many images, the idea is just expanding the div element (css width property) using animate function, we just need to add the same value on the width element.
Continue from my previous post, about detecting character in jquery, now try to some more sophisticated example, this game inspired by an old shark typing game, which is created by pop cap game, but it seems not available anymore. 
42. Photobooth with PHP, jQuery and CSS3
In this tutorial, we will be building a jQuery and PHP powered photobooth. It will allow your website visitors to take a snapshot with their web camera and upload it from a neat CSS3 interface.
43. Drag and Drop Template Management System with Jquery
I have been developing Template (User Interface) management system with drag and drop panel support for my future project. In this post I want to explain how to design database tables and implementing grids drag and drop usability with jqueryUI plugin. Using this system your web project will prove a choice to the end-user, they can manage their own template interface.
44. Better Check Boxes with jQuery and CSS
In this short tutorial, we will be creating a replacement for the default browser checkboxes in the form of a simple jQuery plugin. It will progressively enhance your forms but at the same time fall back to the default controls if JavaScript is unavailable.
45. Live Table Edit with Jquery and Ajax
I love Jquery framework, feels that we can do awesome things. Let’s take a look at how to implement live table edit with Jquery and real time database update using Ajax. This is an interesting concept playing with DOM objects. You know that majority of readers had requested this tutorial, hope you guys like it!
46. Multiple Ajax Requests with Jquery
Last few days I have been working with APIs for instant search results, I had an idea to implement a super instant search with multiple APIs like 推ter, 油Tube, yahoo and bing. But jquery older versions doesn’t support multiple ajax call-backs, luckily I had found Jquery 1.5 has released a new method called $.when finally I have developed super fast search at kokkoroko.com.
47. Shutter Effect Portfolio with jQuery and Canvas
In today’s tutorial, we will be using the HTML5 canvas element to create a simple photography portfolio, which displays a set of featured photos with a camera shutter effect. This functionality will come in the form of an easy to use jQuery plugin that you can easily incorporate into any website.
48. Bing Instant Search with Jquery and Ajax
Some days back I had posted a popular article '油Tube instant search with Jquery and Ajax'. I received a lot of request from my readers that asked to me how to instant web search results so I had coded Bing instant search with real time search results. Just few lines of code, reading Bing search JSON API file with Jquery.
49. 非死book Graph API Connect with PHP and Jquery
Last few days I have been working on labs.9lessons to connecting 非死book Graph API access token system, it’s very interesting. This post I had presented in easy way to connect and read the 非死book home timeline with PHP and Jquery. Explained how to store 非死book token and user id hope you like it. Thanks !
50. PHP Captcha Code
In this tutorial I want explain how to create a Captcha in PHP. We are using some of the features available in PHP for creating an image. This is very simple and basic tutorial and we are not using any custom fonts for generating captcha image. And we aleready know that captcha code used to avoid spam/abuse or auto-submission.
ajax