Any Questions?

02476 252 345

What is jQuery?

It’s fair to say that jQuery has been the industries leading Javascript library for a good few years now. The code is a lot easier to read and apply than Javascript which therefore makes developers lives a lot more enjoyable. In this beginners tutorial i am going to show you a few basic examples of how to use jQuery on your own projects.

Getting Started With jQuery

Let’s jump straight in, open up your text editor or alternatively i would recommend using jsfiddle.net. jSFiddle allows you to experiment with HTML5, CSS3 and a range of different jQuery libraries. For the sake of the tutorial i am going to assume you are using jSFiddle. Ensure that on the left hand side you have chosen the jQuery library of your choice, i personally recommend 1.10.1.

Adding HTML to manipulate

So before we go any further with jQuery we need to insert some HTML that we will later go on to manipulate.

<p class="p1">Paragraph One</p>

<p class="p2">Paragraph Two</p>

<div class="examplehtml"></div>

<a href="javascript:void(0)" class="button">Click Me</a>

Basic Styling

To help illustrate the changes we are going to be making to the code, i have applied some very basic CSS to our document.

.examplehtml{height: 200px; width: 400px; background-color:#eee;}

.button{width: 100px; margin: 10px 0; display: block; background-color: blue; color:#fff; padding: 20px; text-decoration: none; text-align: center;} 

Document Ready

Lets begin to manipulate the document with jQuery. Firstly we need to include a function that executes as soon as the DOM is ready. For this we use jQuery’s .ready() function.

$(document).ready(function(){

});

Example Code

Before we delve any deeper lets experiment with a line of jQuery. Add the following line between your function and reload the page.

    $('p').css('color', 'red');

You should now be able to see that both paragraphs we added earlier on have now been changed to red. So lets have a quick look over the code and see whats going on. jQuery is tailor made for selecting HTML elements and then performing an action. As you can see in the above example, we have selected all <p> tags and changed the colour.

  • The $ sign at the start is a shortcut to accessing jQuery.
  • We then define our selector inside the curly brackets.
  • We then perform an action.

The Selector

jQuery has a range of different selectors that allow you to manipulate HTML. The principles are based on CSS selectors and should look familiar. I have provided a range of different selectors below.

Selects all p tags in the document


$('p')

Selects all div tags in the document


$('div')

Selects all p tags with the class .p1


$('p.p1')

Selects all elements with the class .button


$('.button')

Selects the first li element of a each ul with the class .list


$('ul.list li:first')

As you can see with have complete control over what elements we want to select. I would recommend getting familiar with as many jQuery selectors as possible. I would recommend reading the documentation on jQuery selectors found here http://api.jquery.com/category/selectors/

What are jQuery Events?

jQuery events represent the moment an action is made on the webpage. For example when you mouse over a HTML element or by clicking a button. These visitor actions trigger our jQuery Event to do something. I have updated a previous code with a .click() event.

$(document).ready(function(){
       $('.button').click(function(){
            $('p').hide();
       });
});

The above example ensures that when a HTML element with the class of .button is clicked it hides all p tags.

The .click function attaches an event handler to the HTML element, once clicked the function is executed and then runs our actions. When we add an event that triggers code we need to ensure we always pass a function to the event, otherwise it won’t no what to run!

Examples of jQuery Events

As i have done with selectors i have provided a small range of useful events below for you to try out.

On .click() of .button

$('.button').click(function(){
// Our Actions
});

On .dblclick() of .button

$('.button').dblclick(function(){
// Our Actions
});

On .mouseenter() of .button

$('.button').mouseenter(function(){
// Our Actions
});

On .mouseleave() of .button

$('.button').mouseleave(function(){
// Our Actions
});

Lets apply what we have learnt

Okay so lets apply what we have learnt whilst experiment with some new actions! On .click() of .button lets fade out our first <p> tag and have it append inside our <div class=”examplehtml”>.

$(document).ready(function(){
      $('.button').click(function(){
            $('p').fadeOut('slow');
            var html = $('p').html();
            $('.examplehtml').append(html);
     });
});

There are quite a few new concepts here that we will be running over in part two including .fadeOut(), variables, .html() and .append(). But i hope you can see the power we have to manipulate our HTML with only a few lines of easy to ready code.

Written by:

Creative Director - info@mash-webdesign.co.uk - 07541987924 - DOB: 02/1993/27

With over five years commercial experience in the web industry, Adam specialises in all things web related. Adam has a passion for CRO, ensuring that the websites he creates don't just look great but also make his clients money.

Mash Web Design