Required Knowledge :

  • Understanding of Object Orientated Programming (OOP)
  • A base understanding how to use JavaScript and its syntax.
  • HTML
  • CSS

What is Jquery?

JQuery is a JavaScript Class that has many useful and magic capabilities that allows you to “Write less and do more”.

Its features include

  • AJAX
  • HTML/DOM manipulation
  • HTML event methods
  • CSS manipulation
  • Effects and animations

Load JQuery onto your website

Before you can do any coding you will need to import the JQuery JavaScript file. I suggest using the Google hosted version, as it is always accessible and has very fast loading times.

Here is the link to all their hosted library’s – https://developers.google.com/speed/libraries/

Here is the code you need to import just before the bottom of your <body> tag.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

Once Imported we can write something fun.

As an example we are going to make images disappear when we click on them.

But first we need to learn Jquerys Syntax.

JQuery Syntax

$(Selector).DoSomething()

Jquery starts by calling its class $, this requires you to enter a selected DOM element followed by a method that will ‘DoSomething?’.

The selector can be any DOM element, you can even allow it to find a class element or ID element. Such as the class ‘.Pictures’ or the ID ‘#Pic1’

Below is an example of hiding a object with the class name ‘pictures’

$('.pictures').hide()

JQuery Events

JQuery events are much like JavaScript events however all of the hard work is done for you. For example below I will talk about the document ready event.

$(document).ready()

One very useful and important JQuery function to use is the .ready() function. this is because it will execute the code after the DOM element has finished loading, in our case the document. If you did not use this and a image you are trying to hide has not loaded in, you will receive an error. Here is how to use it.

$(document).ready(function(){

//Your code here

});

Using this information lets create a page where we have 3 images and when they are clicked, the image clicked vanishes.

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<img src="http://placehold.it/120x120&text=image1">
<img src="http://placehold.it/120x120&text=image2">
<img src="http://placehold.it/120x120&text=image3">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
 $('img').click(function(){
 $(this).hide()
 });
});
</script>

</body>
</html>

Here is a list of all JQuery functions used

$().ready() // This will execute once the object has loaded into the DOM

$().click() // When a element is clicked this event is executed. it parses the object clicked into the function, you can access this through the variable "this"

$().hide() // This function will set the css of the element to display:none

 

 

Leave a Reply

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