jQuery tutorial for hiding the button
JQUERY Sample Codes

jQuery Tutorial for hiding the button

jQuery is a  JavaScript library created by John Resig in 2006. The purpose of jQuery is to make it much easier to use JavaScript on your website. That is, the usage of jQuery is to  simplifies HTML document traversing, Make your JavaScript code shorter, faster and cross browser, handles  events, adding effects to the html elements easily, manipulate your html elements (like showing or hiding something from the page) etc. jQuery’s syntax is designed to make it easier to write complicated JavaScript code in a simple way. Since jQuery is free and open source, it is the most popular JavaScript library in use today. This jQuery tutorial for beginners is a step by step guide on jQuery topics for how to use jQuery in web application development.

The jQuery library is a single JavaScript file, and you can reference it with the HTML <script> tag. But  the <script> tag should be inside the <head> section as shown below.

<head>
<script src=“jquery-3.3.1.min.js”></script>
</head>

 

Tip: The file name specified in the ‘src’ attribute of script tag  “jquery-3.3.1.min.js”  is a javaScript library. Place the downloaded file in the same directory as the pages where you wish to use it and rename the downloaded  library file name with its version (like jquery-3.3.1.min.js) and save with .js extension. For More web resources:

Adding jQuery library to Your Web Pages

There are several ways to start using jQuery on your web site. Either you can download the jQuery library from jQuery.com or Include jQuery from a CDN(Content Delivery Network), like Google, Microsoft.

Downloading jQuery

There are two versions of jQuery available in the internet for downloading. You can download it from the official site jQuery.com. The two versions are :

  • Production version – this is compressed version since it can be used for your live website.
  • Development version – since this is an uncompressed version usually used for testing and development.

jQuery CDN

You can also include jQuery library in your script tag from a CDN (Content Delivery Network). Both Google and Microsoft host jQuery library. Use one of the following methods (either from Google CDN or Microsoft CDN) to include jQuery library to your website:

Google CDN:

<head>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js”></script>
</head>

Microsoft CDN:

<head>
<script src=”https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js”></script>
</head>

One of the big advantage of using the hosted jQuery from Google CDN or Microsoft CDN is that it will provide the library from the server closest to your website when your website accessed by the end user, which leads to better or faster loading time.

jQuery Syntax

Basic syntax of jQuery is: $(selector).action(). The $ sign in the syntax is to define/access jQuery. The (selector) in the syntax is  to “query or find ” HTML elements in your HTML document. The  jQuery action() to be performed on the  selected element(s) in your current HTML document or HTML file.

Examples :

 $(this).hide() – hides the current element of the HTML document.

$(“p”).hide() – hides all <p> elements in your  HTML document.

$(“.test”).hide() – hides all elements in your  HTML document having attribute class=”test”.

$(“#test”).hide() – hides the element with id=”test” in your HTML document.

Ready Event in HTML Document

As you know the ready event will be fired when your HTML document is fully loaded in the browser. The jQuery methods included in the ready event to perform the actions when your document fully loaded in the browser. The document ready event using jQuery syntax is shown below.

$(document).ready(function(){

// jQuery actions go here…


});

 jQuery tutorial for hiding the Button

 Create a document named  jquerytest.php page as shown in the below image and save it in the root folder of php.

 

jquerytest1.php

<html>

<title>JQUERY TUTORIALS</title>

<head>

<script type=”text/javascript” language=”javascript” src=”jquery-3-2-1.js”></script>

<script>

$(document).ready(function()

{

    $(“button”).click(function()

            {

        $(this).hide();

    });

});

</script>

</head>

<body>

<p><h1>Introduction to Jquery: When you click on the button,it will hide<h1></p>

<button>Click Here to hide !!!<button>

</body>

</html>

Design of the above jQuery code is shown below.

 

jQuery tutorial for hiding the button
            Webpage Design for Hiding the Button Using jQuery

Output :

When you click on the button “Click Here to hide !!!”, it will hide and result is as shown below. You can also refer to know more about jQuery.

 

jQuery tutorial for hiding the button
Webpage showing the result of hiding the button using jQuery

3 Replies to “jQuery Tutorial for hiding the button

Leave a Reply

Your email address will not be published.