Jquery for noobs

[Psycho_Coder]

Very simple tutorial for you all today.

Requirement

• Basic knowledge of HTML and CSS.

As with any other script like JavaScript we have to include to the jquery script to be able to execute the code.


In your HTML document as the following near the top half of the HTML document.

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

In the document, it should look like this.

<!DOCTYPE html>
<title></title>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</head>
<body>
<p>This tutorial is by dev and your content goes here.</p>
</body>
</html>

Firstly, Let's make a HTML element vanish.

$(document).ready(function(){
$("p").click(function()
{
$(this).hide();
})
});

This code is pretty self explanatory. $ = select. So for the first line we are selecting our document, and so we are selecting our document, we need to select our element, so again, we us the select symbol and assign it to the element p, since in our html document we have a paragraph, .click means when the user clicks on it, the line after will nly function correctly one the user has clicked on it and will execute the .hide(); which will hide the element.

full code.

<!DOCTYPE html>
<title></title>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p").click(function()
{
$(this).hide();
})
});
</script>
</head>
<body>
<p>This tutorial is by dev and your content goes here.</p>
</body>
</html>

You have just created your first Jquery code!