The key to using this library is the jQuery. This function is triggered by the page loading box. Since, as a rule, this function contains code that manipulates the elements of a web page, then in this case it is naturally necessary that by the time the jQuery function is triggered, all these elements have been loaded. Therefore, it is customary to place this function at the very bottom of the html page, for example, before the closing body tag.
If, in the previous example with two buttons, we would mark the jQuery code in the head section, where we connect the library and other scripts, then in this case we would encounter an error, because by the time of connection the button used in the script would not have been created yet .
The jQuery function has the following syntax:
jQuery(document).ready(function(){
// jquery Code
});
The formal description of the jQuery function is: jQuery(document). In this case, the object is used as the object document, which represents virtually the entire DOM structure of the web page. And the handler is applied to it ready, which signals that the DOM model of the web page is loaded. An unnamed callback function is used as a handler parameter, which is fired when the web page is loaded.
That is, we are actually telling the web browser that after loading the entire web page object model represented by the object document, it should execute all the code that we put in the jQuery function.
There is also another way of declaring, which is also equivalent to the previous one:
$(document).ready(function(){
// jquery Code
});
The sign $represents a jQuery alias.
But we can also use shorthand jQuery functions:
$(function(){
// jquery Code
});
Or like this:
jQuery(function(){
// jquery Code
});