How to use JQuery

In this article I am going to explain about how to use jquery in our document.
  • 2237

jQuery Syntax

Through jquery we can perform every type of work such as manipulation, hide, sliding with Html element. for its we select Html element and perform action. For creating jquery function firstly have to defined "$(document).ready(function)".

Syntax

$(document).ready(function(){

 

   // write hear jquery function

 

});

Syntax for selecting Html element.

$(selector).action()


In above example selector specifies select Html element. Element can be selected by id, element name, class name and action specifies action that should be done. Action may be hide, slidedown, slideup, show etc.

 

Example

 

In following example we use hide method with "p" element. after clicking on button all "p" element will be hide.

 

<html>

<head>

    <script type="text/javascript" src="jquery.js"></script>

    <script type="text/javascript">

        $(document).ready(function () {

            $("button").click(function () {

                $("p").hide();

            });

        });

    </script>

</head>

<body>

    <h2>

        my Jquery program</h2>

    <p>

        Hello</p>

    <p>

        How are you</p>

    <button>

        Click</button>

</body>

</html> 

 

In following we used hide method with "myid". when we will click on button then element will be hide which id="myid".

 

html>

<head>

    <script type="text/javascript" src="jquery.js"></script>

    <script type="text/javascript">

        $(document).ready(function () {

            $("button").click(function () {

                $("#myid").hide();

            });

        });

    </script>

</head>

<body>

    <h2>

        My jquery program</h2>

    <p id="myid">

        click for hide</p>

    <button>

        Click</button>

</body>

</html>

 

Output


syntex.jpg

 

You may also want to read these related articles:here
 
Ask Your Question 
 
Got a programming related question? You may want to post your question here
 
© 2019 DotNetHeaven. All rights reserved.