With jQuery you select (query) HTML elements and perform "actions" on them.
The jQuery syntax is tailor-made for selecting HTML elements and performing some action on the element(s).
Basic syntax is: $(selector).action()
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".
If you are completely new to the jQuery, you might think what that code was all about. OK, let's go through each of the parts of this script one by one.
<script> element — Since jQuery is just a JavaScript library, so the jQuery code can be placed inside the <script> element. However, if you want to place it in an external JavaScript file, which is preferred, you just remove this part.$(document).ready(handler); — This statement is typically known as ready event. Where the handler is basically a function that is passed to the ready() method to be executed safely as soon as the document is ready to be manipulated i.e. when the DOM hierarchy has been fully constructed.You might have noticed that all jQuery methods in our examples, are inside a document ready event:
$(document).ready(function(){
// jQuery methods go here...
});
This is to prevent any jQuery code from running before the document is finished loading (is ready).
It is good practice to wait for the document to be fully loaded and ready before working with it. This also allows you to have your JavaScript code before the body of your document, in the head section.
Here are some examples of actions that can fail if methods are run before the document is fully loaded: