The HTML DOM is a standard for how to get, change, add, or delete HTML elements.

https://www.w3schools.com/js/js_htmldom.asp

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)

By default, jQuery uses “$” as a shortcut for “jQuery”.

Doing ````var $=function(){}```` is just defining a function called "\$“, it is very same as doing ````var a=function(){}````

$(function() {
  ...
});

is a short version of

$(document).ready(function() {
  ... 
});

(function (d) {
  ...
})(jQuery)

example:

$(document).ready(function() {        
    // Assign all list items on the page to be the  color red.  
    //      This does not work until AFTER the entire DOM is "ready", hence the $(document).ready()
    $('li').css('color', 'red');   
});

The pseudo-code for that block is:

When the document object model ````$(document) is ready .ready()````, call the following function ````function() { }````. In that function, check for all ````<li>````'s on the page ````$('li')```` and using the jQuery method .CSS() to set the CSS property “color” to the value “red” ````.css('color', 'red')````;

Example: hide the current element

$(this).hide() 

Example: select the element with id=”#p1“ and trigger an alert when mouse down event happens on them.

$("#p1").mousedown(function(){
  alert("Mouse down over p1!");
});

Example: define a new function “publish” in jQuery, with two variables

$.publish = function (topic, args) {
  ...
};

Example: use “on” method to attach multiple event handlers to <p> elements

$("p").on({
  mouseenter: function(){
    $(this).css("background-color", "lightgray");
  },
  mouseleave: function(){
    $(this).css("background-color", "lightblue");
  },
  click: function(){
    $(this).css("background-color", "yellow");
  }
});

For example, in ```$(selector).show(speed,callback);``` optional callback parameter is a function to be executed.