To Documents

jQuery-JavaScript Dictionary

  jQuery   JavaScript 
$(document).ready(f);
$(f);		 window.addEventListener("load", f);
document.addEventListener(
    "DOMContentLoaded", f);
$(sel).click(f); document.querySelector("#id").
    addEventHandler("click", f);
Replace click and "click" in the preceding line with any other event. See the partial list of events above.
val t = $(sel).text( ); var t = document.querySelector(sel).innerHTML;
$(sel).text("abc"); document.querySelector(sel).innerHTML =
    "abc";
var v = $(sel).val( ); var v = document.querySelector(sel).value;
$(sel).val("abc"); document.querySelector(sel).value =
    "abc";
$(sel).css("color", "#808000"); document.querySelector(sel).style.color =
    "808000";
In the preceding row, replace "color" with any other CSS property and "#808000" with a corresponding property value.
$(sel).hide( ); document.querySelector(sel).
    style.display = "none";
$(sel).show( ); document.querySelector(sel).
    style.display = "block";

Two jQuery Examples

  1. Inside an event handler function, $(this) is the element that was the target of the event. For example:
    $( ( ) => {
    $("p").click(function( ) {
        $(this).css("color", "#FF0000");
    )};
});
    Be careful: when using $(this) inside the anonymous function passed in to $(sel).click, define this function using the function keyword, not ( ) =>.  Defining this function using arrow notation does not work for technical reasons.
  2. Also use $(this) inside a loop to consecutively to each of the elements defined by $(sel):
     $(( ) => {
    $("p").each(function(index) {
        var name = $(this).text( );
        $(this).text("Hello, " + name + "!");
    });
});
    Again, define the anonymous function passed to $(sel).each using the function keyword when $(this) is used in the body of the function. Do not use arrow notation.