Jquery for noobs

  • Hello Guest! Welcome to ConsoleCrunch, to help support our site check out the premium upgrades HERE! to get exclusive access to our hidden content.
  • Unable to load portions of the website...
    If you use an ad blocker addon, you should disable it because it interferes with several elements of the site and blocks more than just adverts.
  • Read Rules Before Posting Post Virus Scans with every program.

Psycho_Coder

Active Poster
Retired Staff
Active Member
Apr 12, 2014
642
481
133
UK
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.

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!
 
  • Like
Reactions: Younis
General chit-chat
Help Users
    Chat Bot: Christo has joined the room.