jQuery: 15 Must-Know Tips and Tricks for Web Designers
The Internet is arguably one of the most used types of media nowadays, second only to the more common television. And as technology and science drives a swift bus known as evolution, the web is seen tagging along the ride.
jQuery is an open sourced program, meaning that developers can add their own plugins or tweak the application to suit their needs. It is also free and dual licensed (MIT License or the GNU General Public License, Version 2), which means that anybody can use it freely and publish their works online. jQuery was released in January of 2006 by John Resig and up until now has been updated constantly to improve its performance.
A person who has no background might be thinking that it would be impossible to use jQuery without having knowledge in programming, but there are numerous articles out there about using it, ranging from introduction for newbies to more advanced tricks a seasoned user can benefit from.
Here are some of the tips and tricks anybody can use to start with. They are split into two parts: the general tips and the more application-specific tricks inside the jQuery environment itself.
General Tips in Using jQuery
These tips are for those who are just starting to get the gist of using jQuery. Most articles with the same topic provide similar (if not the same) tips of advice and thus making these points a part of the “need to know” list.
- Use a cheat sheet. Memorizing all the codes requires a lot of time and, evidently it is very difficult to do. Instead, most people using jQuery create or look for cheat sheets. These can be in any form – be it just background wallpaper showing different terms and codes or a plugin for jQuery and created with jQuery itself. Adding this to the arsenal makes coding much easier and faster.
- Use the latest version. Since its launch in January 2006, jQuery has been updated regularly, improving its efficiency and usability. And since it is free, the updates that come along with it are free as well. Using the most recent version not only provides better performance but also lets the user know he/she is in line with the latest changes.
- Add interactivity. jQuery is a powerful tool for creating and designing graphics based websites, but it doesn’t stop there. The strings of code written in it can also be used for other purposes like creating animation and/or adding user input. It can also be used in conjunction with PHP, CSS and even HTML to create almost any kind of on-line media (forums, chatrooms, polls, etc.). Combine all to get the most out of the program.
- Use it every time. jQuery is a tool that provides convenience, efficiency, competitiveness and state-of-the-art designs and layouts. It would not be too far off the road to think that one day it would dominate how the World Wide Web is experienced.
- Look for other tutorials jQquery.com offers a comprehensive outline of tutorials and how-to’s for users of all levels. Add the fact that there are countless other websites and articles out there that provide helpful tips and tricks to aid the user in using jQuery.
Specific jQuery Tricks for Web Designers
This section discusses some of the best ways to achieve great results in jQuery. These tricks will both help all kinds of users (from beginner to advance) achieve better output with less effort and provide alternative ways in reaching the desired results.
Cody Lindley provided a few of the basic commands used in jQuery. The tutorial was designed in a way that would let the reader know what happens when using the commands by showing the effects it produces. jQuery beginners will benefit out of it the most.
* * *
This tutorial shows how to make sure that the format of a required field in a form should be inputted. It uses a mask that shows the audience how to type the information correctly (e.g. contact number, showing as (999) 999 9999). This helps not only the reader but also the object/person receiving the data.
* * *
This tutorial provided by 151daysofjquery.com gives detailed step-by-step instructions on how to create rounded-edged boxes. The author also points out other ways to achieve the same effect and explained them one by one.
* * *
This tutorial shows a lot of useful tips regarding different processes and tips on how to use the code in a “clean”, systematic way. It is very helpful for users trying to make their codes look more organized.
* * *
This is a useful tutorial for designers who want to add the cross-fading transition to pictures. The tutorial points out 3 different ways to use it (two of which uses jQuery).
* * *
This is an example of a cheat sheet for jQuery. The author created it almost entirely for version 1.2.6. The cheat sheet displays everything the user needs and gives detailed information and explanation on every topic.
* * *
This tutorial provides step-by-step instructions on how to create a chatroom using jQuery and PHP together. People who are familiar with only one of the two don’t need to worry because the author provided the codes for both platforms and described how to make them run together.
* * *
Jcrop is a jQuery plugin that handles picture cropping. It can be added to an already existing jQuery code and enables the web application to have image cropping functionality. The site acts as the plugin’s instruction manual complete with setup how-to’s and troubleshooting.
* * *
The author provided different methods on how to animate background images using jQuery. It includes the codes and information on the different transitions depicted in the tutorial. Besides, there’s a link to the demo of the created transitions.
* * *
There are tons of other programming environments out there. Each has its own share of pros and cons. Still why jQuery is deemed by users as one of the finest? The best way to figure it out is to experience and use it yourself.