Monday , September 25 2017
Home / jquery / JQuery Syntax Example Program

JQuery Syntax Example Program

JQuery syntax is used to construct the JQuery statements. Its having set of rules to construct. By following these rules, we can easily write a programs on JQuery.

The typical jQuery syntax having the elements and actions.

$(selector).action()

Here the $ sign denotes to define or access the JQuery library.

The selector denotes elements and

The action() denotes to be perform some actions on the selected element(s).

JQuery Syntax Example :

<script type=”text/javascript”>
    $(document).ready(function() {

        // Some code to be executed…

        alert(“My First JQuery Syntax Example”);

    });
</script>

In the above program, the <script> tag denotes that it is a JavaScript program. Since the JQuery is also a Java script library, we should write the JQuery code inside the <script> tag itself.

The $(document).ready(handler) statement represents the ready event. It executes when ever the DOM loaded successfully; and here handler is an callback function.The handler function will execute, when the document finishes its execution and ready to manipulate.

Example JQuery Program :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery Document Ready Demo</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $("p").text("Hello World!");
    });
</script>
</head>
<body>
    <p>Not loaded yet.</p>
</body>
</html>

The above program consist of the element, and function executed on that element. The element is document for the above program and the function having the selector (“p”). The line specifies the selector to select the text in the paragraph in the document.

Inside the function we can have number of syntaxes to handle any of the jQuery events, selectors or the effects. These are briefly studied after. For instance :

$(document).ready(function() {
$(“#button”).click(function() {
$(“p”).text(“Hello World!”);
});
});

The above code specifies click() event. Which is fired when ever the button is clicked and as per the logic inside the function it changes the DOM element <p> with given text.

About chandrashekhar

Hi Folks, you have reach this so far, that shows you like what you are learning. Then why don't you support us to improve for bettor tutorials by leaving your valuable comments and why not you keep in touch with us for latest updates on your favorite blog @ facebook , twitter , Or Google+ ,

Recommended

JQuery Remove Elements Example

In this tutorial we  are going to understand JQuery Remove Elements. Remove Elements in JQuery …

Leave a Reply

Your email address will not be published. Required fields are marked *