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.
Happy Learning 🙂
