The jQuery syntax is tailor-made for selecting HTML elements and performing some action on the element(s).
Basic syntax is: $(selector).action()
- A $ sign to define/access jQuery
- A (selector) to “query (or find)” HTML elements
- A jQuery action() to be performed on the element(s)
Examples:
$(this).hide() – hides the current element.
$("p").hide() – hides all <p> elements.
$(".test").hide() – hides all elements with class=”test”.
$("#test").hide() – hides the element with id=”test”.
<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.
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 DevopsSchool” using text() action method.
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.
