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: 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!");
});