Page load after the completion of the implementation of JS jquery writing method and distinction

1, $(function () {
$(" # a "). Click (function () {
/ / adding your code here
});
});
2, $(document). Ready (function () {
$(" # a "). Click (function () {
/ / adding your code here
});
});
3, window.onload = function(){
$(" # a "). Click (function () {
/ / adding your code here
});
}
The HTML code is < Input type = "button" id = "a" > Click < / input> , and the page needs to reference jquery's js file

General load page when the js method is called as follows:

window.onload = function() { 
 $("table tr:nth-child(even)").addClass("even"); //This is the jquery code
}; 

This code is executed after the entire document of the page has been loaded. Unfortunately, this approach requires not only that the DOM tree of the page be fully loaded, but also that all external images and resources be fully loaded. More unfortunately, if external resources, such as images, take a long time to load, then this js effect will feel ineffective to the user.

But with jquery:

$(document).ready(function() { 
 //Any js special effects that need to be executed
 $("table tr:nth-child(even)").addClass("even"); 
}); 

Just load all the DOM structures, and perform the js effect before the browser puts all the HTML into the DOM tree. Including before loading external images and resources.

There's another way to write it short:

$(function() { 
 //Any js special effects that need to be executed
 $("table tr:nth-child(even)").addClass("even"); 
});