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(){}

snippet.javascript

$(function() {
   // jQuery methods go here...
});

is a short version of

snippet.javascript

$(document).ready(function() {
   // jQuery methods go here...
});

snippet.javascript

(function ( $ ) {
   // jQuery methods go here...
})(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");
  }
});

Let's say we want to create a plugin that makes text within a set of retrieved elements green. All we have to do is add a function called greenify to $.fn and it will be available just like any other jQuery object method.

snippet.javascript

$.fn.greenify = function() {
    this.css( "color", "green" );
    return this;  // make your function chainable
}
$( "a" ).greenify(); // Makes all the links green.

JavaScript statements are executed line by line. However, with effects, the next line of code can be run even though the effect is not finished. This can create errors.

To prevent this, you can create a callback function.

A callback function is executed after the current effect is finished.

Typical syntax: $(selector).hide(speed,callback);

Example:

snippet.javascript

$("button").click(function(){
  $("p").hide("slow", function(){
    alert("The paragraph is now hidden");
  });
});

The following example chains together the css(), slideUp(), and slideDown() methods. The “p1” element first changes to red, then it slides up, and then it slides down:

snippet.javascript

$("#p1").css("color", "red").slideUp(2000).slideDown(2000);