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:

snippet.javascript

$(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

snippet.javascript

$(this).hide() 

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

snippet.javascript

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

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

snippet.javascript

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

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

snippet.javascript

$("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.