Here we will learn basic syntax in jquery with examples and how to define standard jquery syntax to load and perform required actions on HTML elements with examples.
Generally, the jQuery statements will start with document ready event (document.ready) to run the jQuery code once the document loading is finished. The jQuery document ready event will contain a code to select and perform particular actions on HTML elements.
Following is the syntax of defining the most basic statement in jQuery with document ready event.
<script type="text/javascript">
$(document).ready(function(){
// your code
$(selector).action();
});
</script>
If you observe above jQuery syntax, we placed a jQuery code inside of </script> tag because jQuery is a just JavaScript library.
Following is a detailed explanation of the above jQuery syntax.
$ - The dollar sign ($) is just an alias name of jQuery and it is used to define or access the jQuery.
$(document).ready(function(){}) - It represents the document ready event and it is used to execute the jQuery code once the document is fully loaded and ready before working with it.
In above jQuery syntax, we written a $(selector).action() jQuery statement in document ready event to select and perform required actions such as setting the content or changing the color, etc. on HTML elements.
selector - It represents the HTML element of which manipulation needs to be done.
action() - It represents an action that needs to be performed on the given element.
The jQuery team provided a shorter way for document ready event (document.ready) with an anonymous function ($(function(){})).
By using document ready event shorter way, the above jQuery syntax can be rewritten as shown following.
<script type="text/javascript">
$(function(){
// your code
$("#selector").action();
});
</script>
Now we will see the simple example of using jQuery to set the div element text after the DOM is ready, for that write the code like as shown below.
<html>
<head>
<title>jQuery Syntax Example</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("div").text("Welcome to Tutlane");
});
</script>
</head>
<body>
<div>Test</div>
</body>
</html>
If you observe above example, we defined a document ready event with jQuery statement to find all the div (Here div is a jQuery selector) elements in the page and set the content to “Welcome to Tutlane” using text() action method.
When we run the above program, the div elements content automatically replaced with “Welcome to Tutlane”, once the document is ready like as shown below.
Suppose if we want to replace the div text, once the user performs some action, then we need to write the code as shown below.
<html>
<head>
<title>jQuery Syntax Example</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("div").text("Welcome to Tutlane");
})
});
</script>
</head>
<body>
<div>Test</div><br />
<button>click</button>
</body>
</html>
If you observe above example, we are changing the div elements text whenever the user clicks on button element.
This is how we can use jQuery in our applications based on our requirements.