Enhancing Website Design and Development using jQuery

Posted by kevin williams on Dec 2, 2011 in Stuff we like | 15 comments

jQuery is a JavaScript library which is designed to simplify client side scripting. It is marketed as ‘The Write Less, Do More JavaScript library’, and we have found it very useful in enhancing our websites. It works alongside traditional JavaScript syntax, and simplifies the process of selecting DOM elements and manipulating them.

For instance, it is very easy to add or remove a CSS class from an individual or group of elements. This is done using the addClass() and removeClass() methods. To add a CSS class of Instructions to an element with the ID of text, you would use the addClass() method as follows – $("#text").addClass("Instructions");

jQuery methods can be chained, so you could also remove a CSS class and add a different one with a single line of code. To do the same as above, but also removing a class of Unread , the syntax would be –

$("#text").addClass("Instructions").removeClass(“Unread”);

There are many other useful built in methods available, for example the html() method can dynamically alter the HTML contents of matching elements.

$(“div.Instructions”).html(“<em>Example text</em>”);

The above would set the HTML string "<em>Example text</em>" as the contents of all DIV elements with the class of Instructions. To add to existing content of matching elements, the .append() method can be used.

There is a related framework called jQuery Mobile which facilitates the construction of mobile websites, with a strong emphasis on compatibility with all modern mobile devices. jQuery can also be extended by a large number of third party plugins which provide all kinds of additional client side functionality to a website (including some quite impressive visual effects).

Below are some examples to try to give a small flavour of the sheer variety of plugins available.

Roundabout (http://fredhq.com/projects/roundabout/) is a plugin that makes it easy to create an ‘interactive turntable’ effect from HTML elements such as ordered and unordered lists.

jRumble ( http://jackrugile.com/jrumble/ ) allows you to wobble HTML elements as required.

Visualize ( http://www.jqueryplugins.com/plugin/236/ ) provides a simple method for generating bar, line, area, and pie charts from an HTML table, and allows you to configure them in a variety of ways.

Tablesorter ( http://tablesorter.com/docs/ ) is a jQuery plugin for turning a standard HTML table with THEAD and TBODY tags into a sortable table without page refreshes.

BlogSlideShow (http://www.jqueryplugins.com/plugin/315/) is a free open-code JQuery plugin that enhances your blog pages with fancy image viewer, which provides nice transition effects including CSS3/HTML5-related ones.



user_avatar
About the author: kevin williams

Kevin is one of the founding members of Servon Design. He splits his time between new business opportunities and front-end web development. With a wealth of internet experience behind him, he is more passionate about what he does, than ever before. Google+

15 comments

Leave a Reply

Your email address will not be published. Required fields are marked *