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

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

Create an object with 3 properties:

var object = {
  ID: 1,
  "name": "Tom",
  subobject: {
  }
};

Use dot . or bracket [] to access properties

snippet.javascript

object.ID = object.ID + 1;
object["ID"] = object["ID"] + 1;
// Bracket can be used to create new properties
object[name + "-full"] = "Tom Hanks";

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(){} ### Start a jQuery codeblock ```javascript $(function() { // jQuery methods go here... }); ``` is a short version of ```javascript $(document).ready(function() { // jQuery methods go here... }); ``` ```javascript (function ( $ ) { // jQuery methods go here... })(jQuery) ``` example: ```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);