Very simple tutorial for you all today.
Requirement
In your HTML document as the following near the top half of the HTML document.
In the document, it should look like this.
Firstly, Let's make a HTML element vanish.
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.
You have just created your first Jquery code!
Requirement
- Basic knowledge of HTML and CSS.
In your HTML document as the following near the top half of the HTML document.
Code:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>In the document, it should look like this.
Code:
<!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.
Code:
$(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.
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!