Beginners Guide To jQuery

November 06, 2009

A while back I faced the daunting prospect of learning yet another language, jQuery. At the time I had a little to average knowledge of javascript, I would recommend you to stop reading if you do not have any prior knowledge of javascript or other similar programming languages.

As web sites march forward and us programmers look for ever more elaborate and space saving ways of delightfully cramming our pages with as much content as we can whilst also doing it within a respectable time frame, some life saving javascript libraries have emerged. Elaborate javascript effects have always been possible, but for clients not willing to pay that bit extra for the time it would normally take to build and utilise such features and for programmers not willing to spend the time on some projects, these features have sat very much in the dark corner of the room. Untill now! In relatively simple commands using jQuery you can achieve some actually very complex and cross browser compatible javascript functionality. Which not only looks really cool, but in use is very, very practical!

How to use jQuery

Using jQuery couldn't be any simpler, head over to the jQuery website and simply download the library. This consists of only one file, which makes everything even more simple!

Upload this file to somewhere on your server and then include it to the head of the page you want to test something on, it should look something like this.

My jQuery Test

Im only going to touch on what you can do with jQuery in this topic as I want to focus on the main principles of switching from coding using your basic javascript mark up, to using jQuery. Alot of people refuse to make the move from javascript to jQuery or simply do not see the point. I think in alot of ways thats rather sad, especially when you consider the time it can save you and the simplicity in which otherwise complex javascript can be added to your pages. Yes like many other things it cannot do everything, but whats so great about it is that it can be mixed and matched with regular javascript.

The massive plus point for me using jQuery is its pretty much give or take cross browser compatible. At least the core of it is, this is a hugely important factor when choosing to use jQuery as we all know how javascript is rendered differently in every other browser. So leave the compatibility issues up to someone else and focus on your website, is what I say!

A Simple jQuery Example

Im simply going to show you the very core of any javascript or jQuery application. The selector! In regular javascript were all very used to using the following code to select an element from the dom (or page) by its id.

Add this div to the body of your test page:

About me

Hello! I'm David Heward, how are you going? I'm a Senior Devops/Build Engineer, specialising in AWS & Cloud Automation. Based in London. Strong 10+ year background in Software development. Have a read of my blog. Have a look at some of my working projects. Contact me at @davehewy or on Linkedin.