Published Tuesday 21st January 2014

A jQueryious explanation!

So, whilst I was at university I adopted a want for learning about how all this programming jazz worked. I remember working a weekend straight, completing an assignment (wrongly and badly coded), then scrapping the entirety of my code and starting again. This happened to me on more than one occasion! When I heard about jQuery, I didn't really understand why it was used, what it was used for and why someone would choose to use it. I wanted to learn all this coding, not use some library to bypass it. However, now that I do understand, I wanted to share what I've learnt with whoever may read this post.

jQuery, or $ for shorthand, is a javascript (JS) library with a lot of built in functions that are designed to make client side scripting (e.g. the animated parts of a website, the instantly refreshing parts of the website) a lot easier. I would recommend still practicing coding in general (PHP, Java, C++, C# etc) but using jQuery to speed up development.
jQuery takes CSS selectors and uses the document object model (DOM) to turn the selector into a JS object. This object will now have the functionality of jQuery.

So to include this powerful library you simply put this script inside your <head>:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>

Replace 1.8 with the version you wish to include, but we usually use 1.8 as it supports older versions of Internet Explorer. Now onto the deconstruction of a simple jQuery script:

$('#selector').click(function(e){
    //These are comments and will be ignored
    //Looks complicated already!!
});

$ is jQuery. An object built by John Resig; the creator of jQuery. It goes at the start of everything jQuery related and is essentially the access to the library.
The bit in the first set of brackets, ('#selector'), is the css selector. Note that this has quotation marks inside the brackets and then works in the exact same way as CSS.
The bit after the first set of brackets, .click(, is a function inside jQuery. This is an event type function and happens when someone has clicked on the #selector.
The bit after the second bracket, function(e){, is called a callback function. These are quite complicated to get your head around if you haven't used them before. The original creator of the first function (i.e. John Resig - .click) expects a function parameter and then calls it inside their function. It is basically an extension of a function that already exists, so you're effectively extending .click functionality by adding this in. The bit in brackets (e) is again defined by John Resig with whatever variable he wanted to have as the first callback parameter. In this case, an event object. It is ok if you don't understand this part as it is complicated.
The bit after the curly brace, {, is the code you want to add after a click event has happened. This can be anything from hiding or showing some text to animating the entire page.
The final curly brace, bracket and semi-colon , });, is to close your call back function, close the click function and terminate the code line.

Phew! That was a long explanation. Another thing to note is jQuery should always go inside $(document).ready(function(){ }); which I will show below. This, like the click function, works when the document (i.e. the page you're on) is completely loaded and jQuery is highly dependent upon it. Here are some quality examples of how you may use jQuery:

$(document).ready(function(){
    $('#myID').click(function(){
        //These are comments and will be ignored
        //This below statement can be written as is
        $('#myID').slideToggle(); //Hides or shows with animation
        //Or it can be written like:
        $(this).slideToggle();
        //$(this) will select the element that jQuery
        //currently has
    });
    $('.myClass').each(function(count){
        //Get the 3rd .myClass, remember
        //code starts at 0, not 1
        if(count == 2){
            $(this).hide(); //Hides without any animation
        }
    });
    //Apply 20 pixel padding to td elements
    //on page load
    $('table.mySuperTable tr td').css('padding', '20px');
});

I hope this tutorial has helped someone. Please be sure to expand further by using the comment section below!

#javascript #jquery

Steven

Steven is a former QWeb Ltd director and continues to work with us as a contract developer. He's experienced with a number of front-end technologies but is primarily focussed on back-end development, particularly building complicated plugins and bespoke mechanisms for Wordpress.

Blog posts are written by individuals and do not necessarily depict the opinions or beliefs of QWeb Ltd or its current employees. Any information provided here might be biased or subjective, and might become out of date.

Discuss this post

Nobody has commented yet.

Your email address is used to notify you of new comments to this thread, and also to pull your Gravatar image. Your name, email address, and message are stored as encrypted text. You won't be added to any mailing list, and your details won't be shared with any third party.

Contact Us

You can call our office in Leeds on 0113 831 36 27, or use the contact form below to drop us an email. We endeavour to respond to all enquiries promptly.

A jQueryious explanation!

Steven

Discuss this post

Leave a comment

Contact Us