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

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

var length = 16;                               // Number
var lastName = "Johnson";                      // String
var x = {firstName:"John", lastName:"Doe"};    // Object

Create an object with 3 properties:

snippet.javascript

var object = {
  ID: 1,
  "name": "Tom",
  grade: {
    math: 94
    physics:89
  }
  // When a function is used as an object property, it is called a method
  sum: function(a,b){
    return a+b;
  }
}

Use dot . or bracket [] to access or create properties

snippet.javascript

object.ID = object.ID + 1;
object["ID"] = object["ID"] + 1;
object.grade.math = 100;
// Method can be called in the same way
object.sum(1, 2);
 
// Create new properties or methods in the same way
object[name + "-full"] = "Tom Hanks";
object.minus = function(a,b) {
  return a-b;
};

Three use of question mark: Link

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

Example: 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.

Some tips on creating good plugins (Minimizing Plugin Footprint, using the each() Method)

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);

You might want to just have a function in jQuery to use the query features. However it could not be called outside of the jQuery namespace. Here's an example:

snippet.javascript

$(document).ready( function () {
    var MyBlah = function(blah) { alert(blah);  };
    MyBlah("Hello this works") // Inside the anonymous function we are cool.
 });
 
MyBlah("Oops") //This throws a JavaScript error (MyBlah is not a function)

This is (sometimes) a desirable behavior since we do not pollute the global namespace, so if your function does not need to be called from other part of your code, this is the way to go.

Declaring it outside the anonymous function places it in the global namespace, and it's accessible from everywhere.

If you want to call it anywhere, use the $. namespace:

snippet.javascript

$(document).ready( function () {
    $.MyBlah = function(blah) { alert(blah);  };
    MyBlah("Hello this works") // Inside the anonymous function we are cool.
 });
 
$.MyBlah("Oops") //This throws a JavaScript error (MyBlah is not a function)