JQuery for designers: 5 coding techniques anyone can learn

No more excuses — coding is now way too easy and fun to avoid it. Long gone are the days of Internet Explorer 6, browser compatibility issues and buggy scripts.

Things work pretty smoothly now and if you know HTML/CSS, there is absolutely no reason not to delve into jQuery. It’s the de-facto JavaScript library for designers, and more and more companies will be expecting you to know it.

It is also a great starting point for learning to program user interfaces and understand what browser offers under the hood. Let’s dive in.

Practicing with examples

The easiest way to practice with examples is through JSFiddle — it’s an online tool that allows you to code HTML, CSS and JavaScript directly in the browser and see the results when you click “Run”. Every example mentioned here has a JSFiddle link so you can jump to it immediately and start playing around.

If you prefer to work with your own HTML editor, load this HTML template then simply copy and paste code from the examples in the appropriate template sections.

Understanding how jQuery works

jQuery is a JavaScript library with very simple and readable syntax — it’s easy to tell it what to do and easy to figure out what it does (in case you’re reading someone else’s code).

Here is how you typically use it:

$(selector).doSomething();

Where $ is just an abbreviation for jQuery, selectoris an HTML id or class, and doSomething() is a jQuery method you want to use on that element.

It really is this simple — jQuery has a great syntax.

For example:

$(“#menu”).show();

… will do exactly what you think – it will select the html element with id=’menu’ and make it visible using the show() method.

Similarly, the following code will select all elements with class=”urgent” and add an additional class “red” by using the addClass() method.

$(“.urgent”).addClass(“red”);

Easy, isn’t it?

1. Adding interactivity

There is little use in programming unless you allow the user to actually do something — that is, to interact with the website.

That’s why responding to user events such as clicks, mouse overs and key strokes is almost always a starting point of any jQuery code. The best part? It’s dead simple. Here is an example to get you started:

Here is what happens above:

The $(“#big-button”) part tells jQuery to select the element with id=”big-button”.

The “.click “ tells jQuery we want to use click method and run showSomething function whenever user clicks the #big-button.

Function showSomething() contains the code we actually want to run on each click. In this case, it’s just a standard JavaScript “alert” method which displays a message to the user.

Tip: Try replacing show() and hide() with slideUp() and slideDown() method to get an interesting animation effect.

The code above is straightforward — we are using click method on #show-btn and #hide-btn, which run showMenu and hideMenu functions respectively.

However, this seems like a lot of work for a simple functionality. It would be much better if we had a way to use one button which toggles the state of the menu – show it if it’s hidden, and hide it if it’s visible. The toggle method does exactly that:

Voila! Our code is cut in half and we have a nice looking dropdown menu.

Tip: Replace toggle() with slideToggle() method to get an interesting animation effect.

3. Moving things around

Modifying web page layout on the fly is a huge use case for jQuery. The most common methods are appendTo and prependTo, which move the selection to another element.

The following example will allow you to move to-do items to the “Done” list simply by clicking on them.

Here is what we are doing in this script:

We are selecting all

elements from #to-do list and attaching a click handler function called markDone.

Inside the function, we are using something new — this keyword. This is a special keyword which represents the actual html element that the user clicked on, so we can do something with it. In this case, the element is one of the <li> items from the #to-do list.

We are passing this element to jQuery and calling appendTo method on it, specifying #done as the target container. This effectively moves the element from #to-do list to #done list.

Tip: The difference between appendTo() and prependTo() methods is slight but very useful — append will place your selection above everything else inside the target element, while prepend will do the opposite.

4. Manipulating styles and classes

Changing CSS with jQuery is extremely easy. There are few methods that are helpful here:

We pass two arguments to css method: the style property we want to change (in our case, ‘background-color’) and value we want to change it to (i.e. ‘#FF0000’). We can change any other css property in the same way.

Large text and small text buttons are calling the handler function which adds and removes .large-text class from the #text element, using add Class() and removeClass() methods. This is done using addClass() and removeClass() methods to which we simply pass a class name we wish to add or remove.

5. Loading new content without page refresh

Sometimes you don’t need to refresh the whole page in order to show just a piece of new content. For example, you might want to show a preview of news story and make the Load button load the entire story inside the same element.

In the script, we are attaching a click handler function to button #btn-load.

When button is clicked, the handler function will load the specified html file inside #tutorial element, replacing the preview content with the content of the file.

Important:jQuery load() method can only be used to load content which resides on the same server as your website — you cannot load content from other websites. To test the example above, use the provided HTML template and copy the code there, then run it in your browser.

Ready to move on?

I hope this article helped you understand how easy it is to get started with jQuery. Some examples are more verbose than necessary in order to make them easier to understand — once you start learning more, you will understand there are more efficient ways to achieve the same result.

Have any tips or questions about jQuery?

The author

Peter Vukovic is a seasoned designer & creative director with 10 years of experience in worldwide advertising agency.
He is a proud member of the 99designs community. You can view his 99designs profile here.

Any comments?

Something is seriously wrong with this article. I think it’s referring to code that doesn’t appear? For instance, “Here is an example to get you started:” And there’s no example!
Also, “Consider this example:

Thanks for bringing this to our attention! It looks like the embedded links were broken on this post. We’ve updated them so that they should be fully functional once again. Please let us know if you’re still having issues.

You're in!

You proved us right again. Our newsletter is only for the coolest kids. And you’re one of ‘em. Get ready for amazing stuff in your inbox.

Design tips & business trends in your inbox?

Subscribers to our newsletter have been scientifically proven to be smarter, better looking and at least 50% more awesome than average.