Hello and welcome to the second instalment of our jQuery web design series. If you haven’t been following the series already then please check out the first instalment here. You will have learnt how to embed jQuery into your website. Now we are ready to develop our first jQuery function.

Go ahead and open up the js.js file you made in the first part. This file is similar to a CSS file and will be storing all of your jQuery functions that your website uses. The first thing to do when developing with jQuery is to test that jQuery has been implemented successfully. To do this, save the following line of code into your js.js:

$( document ).ready(function() {
    alert("jQuery has been loaded successfully");
});

Once you have saved and opened up your index.html file in a web browser, with a bit of luck you’ll get a pop up on your screen notifying jQuery is loaded. Once you have done this, we will be ready to start designing a navigation system.

 

Lets take a quick look at the syntax for a moment. Jquery works in a similar manner to CSS when working with selectors. If you remember from the previous CSS tutorials, we learnt about classes and IDs for our HTML tags. jQuery works in the same manner. If we want to select a class, we use ‘.class’, for IDs, we use ‘#ID’. Take a look at the code snippet above. To initiate a jQuery line, we use a $ followed by the particular element we wish to reference. In this case, we want to check if the page is loaded, so we use ‘document’ as the selector. Once jQuery knows which element we wish to target, it is ready to perform functions on that element. In this case, we wish to check if the document is ready. For that, we use the ‘ready()’ command. Inside the brackets of this function, we place the instructions jQuery will perform if the document is indeed ready. In this case, we want to notify ourselves that jQuery has loaded correctly and everything is properly configured, so we use ‘alert()’ which will place a pop-up on the screen of the webpage.

 

Using this method, we ensure that jQuery functions will only ever be executed AFTER the page has loaded. This is crucial in many ways. Firstly, it ensures that the page loads quicker (as the browser will be downloading the content rather than running jQuery scripts) and it will also ensure that if the jQuery is referencing particular elements, that they are loaded in the browser before performing jQuery on them. It is good practise to start your jQuery document this way.

 

In addition, jQuery can use variables and maths, if required. This is useful for storing information such as heights or widths of documents, or changing content in the web page dynamically without reloading the page. To demonstrate variables and widths of elements, we can modify our code to give us the width of the document and then display that width in the pop-up as follows:

$( document ).ready(function() {
    $documentWidth = $( document ).outerWidth();
    alert("The document width is " + $documentWidth) + " px.";
});

 

Lets take a look at the syntax here.. Firstly, we wait until the document is loaded. Then we set up our new variable. All variables in jQuery usually use a $ sign before the name. It is not essential to do this, but it can help when using debug tools to have all variables signed this way. Then, we want to store our document width in the variable. We do this by using a jQuery selector to select the document, and using the ‘innerWidth();’ function. This function will provide the width, in pixels of the document. Lastly, we want to display this variable in our popup. I have used both strings of text and variables in this popup, and the syntax can be tricky to get around. For enclose strings in quotation marks and call strings on their own but if we want to combine both strings and variables in the same instance, we have to separate them with a plus as per the example.

 

There is a lot to learn when it comes to jQuery and practise makes absolute perfect. In the following tutorials we will be going through some practical examples, step-by-step to give you a taster of the power of jQuery.