diff --git a/assets/jquery.js b/assets/jquery.js new file mode 100644 index 00000000..a758770b --- /dev/null +++ b/assets/jquery.js @@ -0,0 +1,300 @@ +//Collapsible credits https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_collapsible +//Search credits https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_filter_table +//Clipboard credits https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_copy_clipboard2 + +$(".collapsible").on("click", function () { + $(this).toggleClass("active"); + let content = $(this).next(); + if (content.css("display") === "flex") { + content.hide(); + } else { + content.css("display", "flex"); + } +}); + +$("#searchBox").on("keyup", function () { + console.log($(this).val().toUpperCase()); + let input = $(this).val().toUpperCase(); + $(".collapsible").each(function (index, element) { + console.log($(this).text().toUpperCase()); + if ($(this).text().toUpperCase().indexOf(input) > -1) { + $(this).show(); + } else { + $(this).hide(); + $(this).next().hide(); //Hides the collapsible + } + }); +}); + +$("code").on("mouseenter", function () { + $(this).parent().append("Copy to clipboard"); +}); + +$("code").on("mouseout", function () { + $(this).parent().find("span").remove(); +}); + +$("code").on("click", function () { + navigator.clipboard.writeText($(this).text()); + $(this).parent().find("span").text("Copied"); +}); + +//Magic starts here + +//Create an HTML element +$("#Function1Q button").on("click", function () { + let btn = $(""); + $(this).parent().append(btn); +}); + +//Remove an HTML Element +$("#Function2Q button").on("click", function () { + $(this).next().remove(); +}); + +// Append an HTML element +$("#Function3Q button").on("click", function () { + let pElement = $("

This is a paragraph

"); + $(this).parent().append(pElement); +}); + +// Prepend an HTML element +$("#Function4Q button").on("click", function () { + let pElement = $("

This is a paragraph

"); + $(this).parent().prepend(pElement); +}); + +//Create + add an html element after another element +$("#Function5Q button").on("click", function () { + let pElement = $("

Im also a paragraph

"); + $("#Function5Q button").next().after(pElement); +}); + +//Create + add an html element before another element +$("#Function6Q button").on("click", function () { + let pElement = $("

Im also a paragraph

"); + $("#Function6Q .demo p").last().before(pElement); +}); + +//Clone an HTML element +$("#Function7Q button").on("click", function () { + $("#Function7Q .demo p").first().clone().appendTo("#Function7Q .demo"); +}); + +//Add a class to an HTML item +$("#Function8Q button").on("click", function () { + $("#Function8Q .demo p").addClass("bgPastelBlue"); +}); + +//Remove a class to an HTML item +$("#Function9Q button").on("click", function () { + $("#Function9Q .demo p").removeClass("bgPastelBlue"); +}); + +//Toggle a class to an HTML item +$("#Function10Q button").on("click", function () { + $("#Function10Q .demo p").toggleClass("bgPastelBlue"); +}); + +//Add a disabled attribute to an HTML button +$("#Function11Q button").on("click", function () { + $("#Function11Q .demo button").last().prop("disabled", true); +}); + +//Remove the disabled attribute to an HTML button +$("#Function12Q button").on("click", function () { + $("#Function12Q .demo button").last().prop("disabled", false); +}); + +//Set a data-src attribute to a img element +$("#Function13Q button").on("click", function () { + $("#Function13Q .demo img").attr("data-src", "example"); +}); + +//Remove the data-src attribute of the img element +$("#Function14Q button").on("click", function () { + $("#Function14Q .demo img").removeAttr("data-src", "example"); +}); + +//Hide an HTML element on click (display: none) +$("#Function15Q button").on("click", function () { + $("#Function15Q .demo button").hide(); +}); + +//Fade in an HTML element using jQuery +$("#Function17Q button").on("click", function () { + $("#Function17Q .demo img").fadeIn(); +}); + +//Fade out an HTML element using jQuery +$("#Function18Q button").on("click", function () { + $("#Function18Q .demo img").fadeOut(); +}); + +//Animate an item after 2s from the initial page load +$("#Function19Q button").on("click", function () { + location.reload(); +}); + +$(document).ready(function () { + $(".sectionDiv").css("opacity", 0); + setTimeout(() => { + $(".sectionDiv").animate({ opacity: 1 }, 600); + }, 600); +}); + +// SELECTORS + +//Iterate a collection of elements +$("#Selector1Q button").on("click", function () { + $("#Selector1Q .demo p").each(function (index, element) { + $(element).addClass("bgPastelBlue"); + }); +}); + +//Get the parent element of a certain element +$("#Selector2Q button").on("click", function () { + $(this).parent().css("font-weight", "bold"); +}); + +//Get the collection of children of a certain element +$("#Selector3Q button").on("click", function () { + $(this).parent().children().css("font-weight", "bold"); +}); + +//Get all the elements that have a certain class +$("#Selector4Q button").on("click", function () { + $(".selector4Q").css("font-weight", "bold"); +}); + +//Get an item by id +$("#Selector5Q button").on("click", function () { + $("#pSelect5Q").css("font-weight", "bold"); +}); + +//Get all the elements that have a certain class and property +$("#Selector6Q button").on("click", function () { + $(".selector6Q:hidden").css({ display: "block", color: "blue" }); +}); + +//Get the selected option of a select element +$("#Selector7Q button").on("click", function () { + let selectedOption = $("#Selector7Q select").val(); + $("#Selector7Q span").text(selectedOption); +}); + +//Change the href attribute of the first element +$("#Selector8Q button").on("click", function () { + $("#Selector8Q a:first").attr("href", "https://duckduckgo.com/"); +}); + +//Show the value of a first input on the page +$("#Selector9Q button").on("click", function () { + alert($("#Selector9Q input:first").val()); +}); + +//Remove all items from a specific selector +$("#Selector10Q button").on("click", function () { + $("#Selector10Q p").remove(); +}); + +//EVENTS + +//HTML document loaded +let domLoadedQ = false; +$(document).ready(function () { + domLoadedQ = true; +}); + +$("#Event1Q button").on("click", function () { + $("#Event1Q span").text(domLoadedQ); +}); + +//HTML element clicked +$("#Event2Q button").on("click", function () { + $(this).text($(this).text() + " Clicked"); +}); + +//HTML element clicked +$("#Event3Q button").on("dblclick", function () { + $(this).text($(this).text() + " Double clicked"); +}); + +//Key pressed on keyboard + +$("#Event4Q button").on("click", function () { + $(document).on("keydown", function keyboardQ(event) { + $("#Event4Q span").text(event.key); + }); +}); + +//Mouse cursor moves +$("#Event5Q button").on("click", function () { + $(document).on("mousemove", function (event) { + $("#Event5Q span").text(event.pageX + ", " + event.pageY); + }); +}); + +//Value changed on text input +$("#Event6Q button").on("click", function () { + $("#Event6Q input").on("input", function (event) { + $("#Event6Q span").text(event.target.value); + }); +}); + +//Image loaded +let imgloadedQuery = false; +$("#Event7Q img") + .on("load", function () { + imgloadedQuery = true; + }) + .attr("src", "https://via.placeholder.com/150"); + +$("#Event7Q button").on("click", function () { + $("#Event7Q span").text(imgloadedQuery); +}); + +//Image load failed +let imgloadFailQuery = false; +$("#Event8Q img") + .on("error", function () { + imgloadedFailQuery = true; + }) + .attr("src", "fail.jpg"); + +$("#Event8Q button").on("click", function () { + $("#Event8Q span").text(imgloadedFailQuery); +}); + +//Form submited +$("#queryForm").on("submit", function (event) { + event.preventDefault(); + $("#Event9Q span").text("Form Submited!"); +}); + +//Option selected on select element +$("#Event10Q select").on("change", function () { + $("#Event10Q span").text("Value is: " + $("#Event10Q select").val()); +}); + +//When you position the mouse over an element +$("#Event11Q span").on("mouseover", function (event) { + $(event.target).text("Mouse is over"); +}); +$("#Event11Q span").on("mouseleave", function (event) { + $(event.target).text("Mouse is not over"); +}); + +//Checkbox checked or unchecked +$("#Event12Q input").on("change", function (event) { + if ($(event.target).is(":checked")) { + $("#Event12Q span").text("Checked"); + } else { + $("#Event12Q span").text("Unchecked"); + } +}); + +//Show the clicked item of an UL list +$("#Event13Q ol").on("click", function (event) { + $("#Event13Q span").text("Value clicked: " + $(event.target).text()); +}); diff --git a/assets/styles.css b/assets/styles.css new file mode 100644 index 00000000..026040ab --- /dev/null +++ b/assets/styles.css @@ -0,0 +1,200 @@ +/* http://meyerweb.com/eric/tools/css/reset/ + v2.0 | 20110126 + License: none (public domain) +*/ + +html, +body, +div, +span, +applet, +object, +iframe, +h1, +h2, +h3, +h4, +h5, +h6, +p, +blockquote, +pre, +a, +abbr, +acronym, +address, +big, +cite, +code, +del, +dfn, +em, +img, +ins, +kbd, +q, +s, +samp, +small, +strike, +strong, +sub, +sup, +tt, +var, +b, +u, +i, +center, +dl, +dt, +dd, +ol, +ul, +li, +fieldset, +form, +label, +legend, +table, +caption, +tbody, +tfoot, +thead, +tr, +th, +td, +article, +aside, +canvas, +details, +embed, +figure, +figcaption, +footer, +header, +hgroup, +menu, +nav, +output, +ruby, +section, +summary, +time, +mark, +audio, +video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; +} +/* HTML5 display-role reset for older browsers */ +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +menu, +nav, +section { + display: block; +} +body { + line-height: 1; +} +ol, +ul { + list-style: none; +} +blockquote, +q { + quotes: none; +} +blockquote:before, +blockquote:after, +q:before, +q:after { + content: ""; + content: none; +} +table { + border-collapse: collapse; + border-spacing: 0; +} +/* MY CODE STARTS HERE */ + +@import url(//fonts.googleapis.com/css?family=Open+Sans:400,700,800,300); + +body { + font-family: "Open Sans", "Helvetica Neue", Helvetica, sans-serif; +} + +header { + color: #ffffff; + background-color: #284b63; + padding: 80px 0; + text-align: center; +} +nav { + background-color: #549da0; + color: #ffffff; + padding: 40px 0; + text-align: center; +} +#searchBox { + width: 40%; + font-size: 16px; + padding: 12px 20px 12px 40px; + border: 1px solid #ddd; +} +section { + width: 100%; + background-color: peru; +} +.sectionDiv { + width: 80%; + margin: auto; +} +.collapsible { + background-color: #777; + color: white; + cursor: pointer; + padding: 18px; + width: 100%; + border: 1px line black; + text-align: left; + outline: none; + font-size: 15px; +} +.active, +.collapsible:hover { + background-color: #555; +} + +.content { + padding: 0 18px; + display: none; + overflow: hidden; + background-color: #f1f1f1; + justify-content: space-evenly; +} +.flex { + width: 50%; + display: flex; + justify-content: space-evenly; +} +footer { + background-color: #353535; + padding: 32px 0; + text-align: center; + color: #868686; +} +.bgPastelBlue { + background-color: #a7c7e7; +} diff --git a/assets/vanilla.js b/assets/vanilla.js new file mode 100644 index 00000000..c3f2dff1 --- /dev/null +++ b/assets/vanilla.js @@ -0,0 +1,404 @@ +//Create an HTML element +document + .querySelector("#Function1V button") + .addEventListener("click", function () { + let btn = document.createElement("button"); + btn.innerText = "This is a button"; + document.querySelector("#Function1V .demo").append(btn); + }); + +//Remove an HTML element + +document + .querySelector("#Function2V button") + .addEventListener("click", function () { + let pElement = document.querySelector("#Function2V .demo p"); + pElement.remove(); + }); + +// Append an HTML element + +document + .querySelector("#Function3V button") + .addEventListener("click", function () { + let pElement = document.createElement("p"); + pElement.innerText = "This is a paragraph"; + document.querySelector("#Function3V .demo").append(pElement); + }); + +//Prepend an HTML element + +document + .querySelector("#Function4V button") + .addEventListener("click", function () { + let pElement = document.createElement("p"); + let parentElement = document.querySelector("#Function4V .demo"); + pElement.innerText = "This is a paragraph"; + parentElement.insertBefore(pElement, parentElement.firstChild); + }); + +//Create + add an html element after another element + +document + .querySelector("#Function5V button") + .addEventListener("click", function () { + let pElement = document.createElement("p"); + let parentElement = document.querySelector("#Function5V .demo"); + let previousElement = document.querySelector("#Function5V .demo p"); + pElement.innerText = "Im also a paragraph"; + parentElement.insertBefore(pElement, previousElement.nextSibling); + }); + +//Create + add an html element before another element + +document + .querySelector("#Function6V button") + .addEventListener("click", function () { + let pElement = document.createElement("p"); + let parentElement = document.querySelector("#Function6V .demo"); + let lastElement = document.querySelector("#Function6V .demo p:last-child"); + pElement.innerText = "Im also a paragraph"; + parentElement.insertBefore(pElement, lastElement); + }); + +//Clone an HTML element + +document + .querySelector("#Function7V button") + .addEventListener("click", function () { + let pElement = document.querySelector("#Function7V .demo p"); + let clonedElement = pElement.cloneNode(true); + pElement.parentElement.append(clonedElement); + }); + +//Add a class to an HTML item + +document + .querySelector("#Function8V button") + .addEventListener("click", function () { + let pElement = document.querySelector("#Function8V .demo p"); + pElement.classList.add("bgPastelBlue"); + }); + +//Remove a class to an HTML item + +document + .querySelector("#Function9V button") + .addEventListener("click", function () { + let pElement = document.querySelector("#Function9V .demo p"); + pElement.classList.remove("bgPastelBlue"); + }); + +//Toggle a class to an HTML item + +document + .querySelector("#Function10V button") + .addEventListener("click", function () { + let pElement = document.querySelector("#Function10V .demo p"); + pElement.classList.toggle("bgPastelBlue"); + }); + +//Add a disabled attribute to an HTML button + +document + .querySelector("#Function11V button") + .addEventListener("click", function () { + let pElement = document.querySelector( + "#Function11V .demo button:last-child" + ); + pElement.disabled = true; + }); + +//Remove the disabled attribute to an HTML button + +document + .querySelector("#Function12V button") + .addEventListener("click", function () { + let pElement = document.querySelector( + "#Function12V .demo button:last-child" + ); + pElement.disabled = false; + }); + +//Set a data-src attribute to a img element + +document + .querySelector("#Function13V button") + .addEventListener("click", function () { + let pElement = document.querySelector("#Function13V .demo img"); + pElement.setAttribute("data-src", "example"); + }); + +//Remove the data-src attribute of the img element + +document + .querySelector("#Function14V button") + .addEventListener("click", function () { + let pElement = document.querySelector("#Function14V .demo img"); + pElement.removeAttribute("data-src"); + }); + +//Hide an HTML element on click (display: none) + +document + .querySelector("#Function15V button") + .addEventListener("click", function () { + let pElement = document.querySelector("#Function15V .demo button"); + pElement.style.display = "none"; + }); + +//Show an HTML element on click (display: block) + +document + .querySelector("#Function16V button") + .addEventListener("click", function () { + let pElement = document.querySelector( + "#Function16V .demo button:last-child" + ); + pElement.style.display = "block"; + }); + +//SELECTORS + +//Iterate a collection of elements + +document + .querySelector("#Selector1V button") + .addEventListener("click", function () { + let pElements = document.querySelectorAll("#Selector1V .demo p"); + pElements.forEach((element) => { + element.classList.add("bgPastelBlue"); + }); + }); + +//Get the parent element of a certain element + +document + .querySelector("#Selector2V button") + .addEventListener("click", function () { + let parentElement = document.querySelector( + "#Selector2V .demo button" + ).parentNode; + parentElement.style.fontWeight = "bold"; + }); + +//Get the collection of children of a certain element + +document + .querySelector("#Selector3V button") + .addEventListener("click", function () { + let childElements = document.querySelector("#Selector3V .demo").children; + for (let i = 0; i < childElements.length; i++) { + childElements[i].style.fontWeight = "bold"; + } + }); + +//Get all the elements that have a certain class + +document + .querySelector("#Selector4V button") + .addEventListener("click", function () { + let classElements = document.getElementsByClassName("selector4V"); + for (let i = 0; i < classElements.length; i++) { + classElements[i].style.fontWeight = "bold"; + } + }); + +//Get all the elements that have a certain class + +document + .querySelector("#Selector5V button") + .addEventListener("click", function () { + let pElement = document.getElementById("pSelect5V"); + pElement.style.fontWeight = "bold"; + }); + +//Get all the elements that have a certain class and property + +document + .querySelector("#Selector6V button") + .addEventListener("click", function () { + let elements = document.querySelectorAll(".selector6V"); + elements.forEach((element) => { + if (element.style.display == "none") { + element.style.display = "block"; + element.style.color = "blue"; + } + }); + }); + +//Get the selected option of a select element + +document + .querySelector("#Selector7V button") + .addEventListener("click", function () { + let selectedOption = document.querySelector("#Selector7V select").value; + document.querySelector("#Selector7V span").innerText = selectedOption; + }); + +//Change the href attribute of the first element + +document + .querySelector("#Selector8V button") + .addEventListener("click", function () { + let links = document.querySelectorAll("#Selector8V a"); + links[0].href = "https://duckduckgo.com/"; + }); + +//Show the value of a first input on the page + +document + .querySelector("#Selector9V button") + .addEventListener("click", function () { + let input = document.querySelectorAll("#Selector9V input")[0].value; + alert(input); + }); + +//Remove all items from a specific selector + +document + .querySelector("#Selector10V button") + .addEventListener("click", function () { + let pElements = document.querySelectorAll("#Selector10V p"); + pElements.forEach((element) => { + element.remove(); + }); + }); + +//EVENTS + +//HTML document loaded + +let domLoadedV = false; +document.addEventListener("DOMContentLoaded", () => { + domLoadedV = true; +}); + +document + .querySelector("#Event1V button") + .addEventListener("click", function () { + let spanElement = document.querySelector("#Event1V span"); + spanElement.innerText = domLoadedV; + }); + +//HTML element clicked +document + .querySelector("#Event2V button") + .addEventListener("click", function () { + let button = document.querySelector("#Event2V button"); + button.innerText += " Clicked"; + }); + +//HTML element double clicked +document + .querySelector("#Event3V button") + .addEventListener("dblclick", function () { + let button = document.querySelector("#Event3V button"); + button.innerText += " Double clicked"; + }); + +//Key pressed on keyboard +document + .querySelector("#Event4V button") + .addEventListener("click", function () { + let span = document.querySelector("#Event4V span"); + document.addEventListener("keydown", function keyboardV(event) { + span.innerText = event.key; + }); + }); + +//Mouse cursor moves +document + .querySelector("#Event5V button") + .addEventListener("click", function () { + let span = document.querySelector("#Event5V span"); + document.addEventListener("mousemove", function (event) { + span.innerText = event.pageX + ", " + event.pageY; + }); + }); + +//Value changed on text input +document + .querySelector("#Event6V button") + .addEventListener("click", function () { + let input = document.querySelector("#Event6V input"); + let span = document.querySelector("#Event6V span"); + input.addEventListener("input", function (event) { + span.innerText = event.target.value; + }); + }); + +//Image load +let imgloadedVanilla = false; +document.querySelector("#Event7V img").addEventListener("load", function () { + imgloadedVanilla = true; +}); +document + .querySelector("#Event7V img") + .setAttribute("src", "https://via.placeholder.com/150"); + +document + .querySelector("#Event7V button") + .addEventListener("click", function () { + document.querySelector("#Event7V span").innerText = imgloadedVanilla; + }); + +//Image load +let imgloadedFailVanilla = false; +document.querySelector("#Event8V img").addEventListener("error", function () { + imgloadedFailVanilla = true; +}); +document.querySelector("#Event8V img").setAttribute("src", "fail.jpg"); + +document + .querySelector("#Event8V button") + .addEventListener("click", function () { + document.querySelector("#Event8V span").innerText = imgloadedFailVanilla; + }); + +//Form submited +document + .querySelector("#vanillaForm") + .addEventListener("submit", function (event) { + event.preventDefault(); + document.querySelector("#Event9V span").innerText = "Form Submited!"; + }); + +//Option select on select element +document + .querySelector("#Event10V select") + .addEventListener("change", function (event) { + document.querySelector("#Event10V span").innerText = + "Value is: " + event.target.value; + }); + +//When you position the mouse over an element +document + .querySelector("#Event11V span") + .addEventListener("mouseover", function (event) { + event.target.innerText = "Mouse is over"; + }); +document + .querySelector("#Event11V span") + .addEventListener("mouseleave", function (event) { + event.target.innerText = "Mouse is not over"; + }); + +//Checkbox checked or unchecked +document + .querySelector("#Event12V input") + .addEventListener("change", function (event) { + if (event.target.checked) { + document.querySelector("#Event12V span").innerText = "Checked"; + } else { + document.querySelector("#Event12V span").innerText = "Unchecked"; + } + }); + +//Show the clicked item of an UL list +document + .querySelector("#Event13V ol") + .addEventListener("click", function (event) { + document.querySelector("#Event13V span").innerText = + "Value clicked: " + event.target.innerText; + }); diff --git a/index.html b/index.html new file mode 100644 index 00000000..886eb53a --- /dev/null +++ b/index.html @@ -0,0 +1,1730 @@ + + + + + + + + + + jQuery Cheat Sheet - Ibai Alberdi + + +

jQuery Cheat Sheet

+ +
+
+

Functions

+
+ +
+
+
+

JS Vanilla

+

Code:

+ let btn = document.createElement("button"); +
+
+ +
+
+
+
+

jQuery

+

Code:

+ let btn = $("<button> This is a button + </button>"); +
+
+ +
+
+
+
+
+ +
+
+
+

JS Vanilla

+

Code:

+ pElement.remove(); +
+
+ +

I will dissapear

+
+
+
+
+

jQuery

+

Code:

+ $("p").remove(); +
+
+ +

I will dissapear

+
+
+
+
+
+ +
+
+
+

JS Vanilla

+

Code:

+ div.appendChild(pElement); +
+
+ +
+
+
+
+

jQuery

+

Code:

+ $("div").append(pElement); +
+
+ +
+
+
+
+
+ +
+
+
+

JS Vanilla

+

Code:

+ parentElement.insertBefore(pElement, + parentElement.firstChild); +
+
+ +
+
+
+
+

jQuery

+

Code:

+ $("div").prepend(pElement); +
+
+ +
+
+
+
+
+ +
+
+
+

JS Vanilla

+

Code:

+
+                  
+                    let pElement = document.createElement("p");
+                    pElement.innerText = "Im also a paragraph";
+                    let previousElement = document.querySelector("p");
+                    parentElement.insertBefore(pElement, previousElement.nextSibling);
+                  
+                
+
+
+ +

Im a parapraph element

+
+
+
+
+

jQuery

+

Code:

+
+                  
+                    let pElement = $("<p> Im also a paragraph</p>"); 
+                    $("p").after(pElement);
+                  
+                
+
+
+ +

Im a parapraph element

+
+
+
+
+
+ +
+
+
+

JS Vanilla

+

Code:

+
+                  
+                    let pElement = document.createElement("p");
+                    pElement.innerText = "Im also a paragraph";
+                    let lastElement = document.querySelector("p");
+                    parentElement.insertBefore(pElement, lastElement);
+                  
+                
+
+
+ +

Im a parapraph element

+
+
+
+
+

jQuery

+

Code:

+
+                  
+                    let pElement = $("<p> Im also a paragraph</p>"); 
+                    $("p").before(pElement);
+                  
+                
+
+
+ +

Im a parapraph element

+
+
+
+
+
+ +
+
+
+

JS Vanilla

+

Code:

+
+                  
+                    let pElement = document.querySelector("p");
+                    let clonedElement = pElement.cloneNode(true);
+                  
+                
+
+
+ +

I will be cloned

+
+
+
+
+

jQuery

+

Code:

+
+                  
+                    $("p").clone().appendTo("#mainDiv");
+                  
+                
+
+
+ +

I will be cloned

+
+
+
+
+
+ +
+
+
+

JS Vanilla

+

Code:

+
+                  
+                    let pElement = document.querySelector("p");
+                    pElement.classList.add("bgPastelBlue");
+                  
+                
+
+
+ +

Colors will change

+
+
+
+
+

jQuery

+

Code:

+
+                  
+                    $("p").addClass("bgPastelBlue");
+                  
+                
+
+
+ +

Colors will change

+
+
+
+
+
+ +
+
+
+

JS Vanilla

+

Code:

+
+                  
+                    let pElement = document.querySelector("p");
+                    pElement.classList.remove("bgPastelBlue");
+                  
+                
+
+
+ +

Colors will change

+
+
+
+
+

jQuery

+

Code:

+
+                  
+                    $("p").removeClass("bgPastelBlue");
+                  
+                
+
+
+ +

Colors will change

+
+
+
+
+
+ +
+
+
+

JS Vanilla

+

Code:

+
+                  
+                    let pElement = document.querySelector("p");
+                    pElement.classList.toggle("bgPastelBlue");
+                  
+                
+
+
+ +

Colors will change

+
+
+
+
+

jQuery

+

Code:

+
+                  
+                    $("p").toggleClass("bgPastelBlue");
+                  
+                
+
+
+ +

Colors will change

+
+
+
+
+
+ +
+
+
+

JS Vanilla

+

Code:

+
+                  
+                    let buttonElement = document.querySelector("button");
+                    buttonElement.disabled = true;
+                  
+                
+
+
+ + +
+
+
+
+

jQuery

+

Code:

+
+                  
+                    $("button").prop("disabled", true);
+                  
+                
+
+
+ + +
+
+
+
+
+ +
+
+
+

JS Vanilla

+

Code:

+
+                  
+                    let buttonElement = document.querySelector("button");
+                    buttonElement.disabled = false;
+                  
+                
+
+
+ + +
+
+
+
+

jQuery

+

Code:

+
+                  
+                    $("button").prop("disabled", false);
+                  
+                
+
+
+ + +
+
+
+
+
+ +
+
+
+

JS Vanilla

+

Code:

+
+                  
+                    let imgElement = document.querySelector("img");
+                    imgElement.setAttribute("data-src", "example");
+                  
+                
+
+
+ + +
+
+
+
+

jQuery

+

Code:

+
+                  
+                    $("img").attr("data-src", "example");
+                  
+                
+
+
+ + +
+
+
+
+
+ +
+
+
+

JS Vanilla

+

Code:

+
+                  
+                    let imgElement = document.querySelector("img");
+                    imgElement.removeAttribute("data-src", "example");
+                  
+                
+
+
+ + +
+
+
+
+

jQuery

+

Code:

+
+                  
+                    $("img").removeAttr("data-src", "example");
+                  
+                
+
+
+ + +
+
+
+
+
+ +
+
+
+

JS Vanilla

+

Code:

+
+                  
+                    let buttonElement = document.querySelector("button");
+                    buttonElement.addEventListener("click", function (){
+                      buttonElement.style.display = "none";
+                    })
+                  
+                
+
+
+ +
+
+
+
+

jQuery

+

Code:

+
+                  
+                    $("button").on("click", function () {
+                      $(this).hide();
+                    });
+                  
+                
+
+
+ +
+
+
+
+
+ +
+
+
+

JS Vanilla

+

Code:

+
+                  
+                    let buttonElement = document.querySelector("button");
+                    buttonElement.addEventListener("click", function (){
+                      let otherButton = document.querySelector("#otherButton");
+                      otherButton.style.display = "block";
+                    })
+                  
+                
+
+
+ + +
+
+
+
+

jQuery

+

Code:

+
+                  
+                    $("button").on("click", function () {
+                      $("#otherButton").show();
+                    });
+                  
+                
+
+
+ + +
+
+
+
+
+ +
+
+
+

jQuery

+

Code:

+
+                  
+                    $("button").on("click", function () {
+                      $("img").fadeIn();
+                    });
+                  
+                
+
+
+ + +
+
+
+
+
+ +
+
+
+

jQuery

+

Code:

+
+                  
+                    $("button").on("click", function () {
+                      $("img").fadeOut();
+                    });
+                  
+                
+
+
+ + +
+
+
+
+
+ +
+
+
+

jQuery

+

Code:

+
+                  
+                    $(document).ready(function () {
+                      $(".sectionDiv").css("opacity", 0);
+                      setTimeout(() => ยด{
+                        $(".sectiondDiv").animate({opacity: 1}, 600);
+                      }, 600);
+                    });
+                  
+                
+
+
+ +
+
+
+
+
+
+

Selectors

+
+ +
+
+
+

JS Vanilla

+

Code:

+
+                  
+                    let pElements = document.querySelectorAll("p");
+                    pElements.forEach((element) => {
+                      element.classList.add("bgPastelBlue");
+                    });
+                  
+                
+
+
+ +

I am the first paragraph

+

I am the second parapgraph

+

I am the third paragraph

+

I am the fourth paragraph

+
+
+
+
+

jQuery

+

Code:

+
+                  
+                    $("p").each(function (index, element) {
+                      $(element).addClass("bgPastelBlue");
+                    });
+                  
+                
+
+
+ +

I am the first paragraph

+

I am the second parapgraph

+

I am the third paragraph

+

I am the fourth paragraph

+
+
+
+
+
+ +
+
+
+

JS Vanilla

+

Code:

+
+                  
+                    let parentElement = document.querySelector("button").parentNode;
+                    parentElement.style.fontWeight = "bold";
+                  
+                
+
+
+ +

I am the first paragraph

+

I am the second parapgraph

+

I am the third paragraph

+

I am the fourth paragraph

+
+
+
+
+

jQuery

+

Code:

+
+                  
+                    $("button").parent().css("font-weight", "bold");
+                  
+                
+
+
+ +

I am the first paragraph

+

I am the second parapgraph

+

I am the third paragraph

+

I am the fourth paragraph

+
+
+
+
+
+ +
+
+
+

JS Vanilla

+

Code:

+
+                  
+                    let childElements = document.querySelector("div").children;
+                    for (let i = 0; i < childElements.length; i++) {
+                      childElements[i].style.fontWeight = "bold";
+                    }
+                  
+                
+
+
+ +

I am the first paragraph

+

I am the second parapgraph

+

I am the third paragraph

+

I am the fourth paragraph

+
+
+
+
+

jQuery

+

Code:

+
+                  
+                    $("div").children().css("font-weight", "bold");
+                  
+                
+
+
+ +

I am the first paragraph

+

I am the second parapgraph

+

I am the third paragraph

+

I am the fourth paragraph

+
+
+
+
+
+ +
+
+
+

JS Vanilla

+

Code:

+
+                  
+                    let classElements = document.getElementsByClassName("selector4V");
+                    for (let i = 0; i < classElements.length; i++) {
+                      classElements[i].style.fontWeight = "bold";
+                    }
+                  
+                
+
+
+ +

I am the first paragraph

+

I am the second parapgraph

+

I am the third paragraph

+

I am the fourth paragraph

+
+
+
+
+

jQuery

+

Code:

+
+                  
+                    $(".selector4Q").css("font-weight", "bold");
+                  
+                
+
+
+ +

I am the first paragraph

+

I am the second parapgraph

+

I am the third paragraph

+

I am the fourth paragraph

+
+
+
+
+
+ +
+
+
+

JS Vanilla

+

Code:

+
+                  
+                    let pElement = document.getElementById("pSelect5V");
+                    pElement.style.fontWeight = "bold";
+                  
+                
+
+
+ +

I am the only paragraph

+
+
+
+
+

jQuery

+

Code:

+
+                  
+                    $("#pSelect5Q").css("font-weight", "bold");
+                  
+                
+
+
+ +

I am the only paragraph

+
+
+
+
+
+ +
+
+
+

JS Vanilla

+

Code:

+
+                  
+                    let elements = document.querySelectorAll(".selector6V");
+                    elements.forEach((element) => {
+                      if (element.style.display == "none") {
+                        element.style.display = "block";
+                        element.style.color = "blue";
+                      }
+                    });
+                  
+                
+
+
+ +

I am the first paragraph

+ + +

I am the fourth paragraph

+
+
+
+
+

jQuery

+

Code:

+
+                  
+                    $(".selector6Q:hidden").css({ display: "block", color: "blue" });
+                  
+                
+
+
+ +

I am the first paragraph

+ + +

I am the fourth paragraph

+
+
+
+
+
+ +
+
+
+

JS Vanilla

+

Code:

+
+                  
+                    document.querySelector("select").value;
+                  
+                
+
+
+ + +

Select an option and press the button:

+ +
+
+
+
+

jQuery

+

Code:

+
+                  
+                    $("select").val();
+                  
+                
+
+
+ + +

Select an option and press the button:

+ +
+
+
+
+
+ +
+
+
+

JS Vanilla

+

Code:

+
+                  
+                    let links = document.querySelectorAll("a");
+                    links[0].href = "https://duckduckgo.com/";
+                  
+                
+
+
+ + Google + Assembler + Apple +
+
+
+
+

jQuery

+

Code:

+
+                  
+                    $("a:first").attr("href", "https://duckduckgo.com/");
+                  
+                
+
+
+ + Google + Assembler + Apple +
+
+
+
+
+ +
+
+
+

JS Vanilla

+

Code:

+
+                  
+                    let input = document.querySelectorAll("#Selector9V input")[0].value;
+                    alert(input);
+                  
+                
+
+
+ + +
+
+
+
+

jQuery

+

Code:

+
+                  
+                    alert($("input:first").val());
+                  
+                
+
+
+ + +
+
+
+
+
+ +
+
+
+

JS Vanilla

+

Code:

+
+                  
+                    let pElements = document.querySelectorAll("p");
+                    pElements.forEach((element) => {
+                      element.remove();
+                    });
+                  
+                
+
+
+ +

I am the first paragraph

+

I am the second parapgraph

+

I am the third paragraph

+

I am the fourth paragraph

+
+
+
+
+

jQuery

+

Code:

+
+                  
+                    $("p").remove();
+                  
+                
+
+
+ +

I am the first paragraph

+

I am the second parapgraph

+

I am the third paragraph

+

I am the fourth paragraph

+
+
+
+
+
+
+

Events

+
+ +
+
+
+

JS Vanilla

+

Code:

+
+                  
+                    let domLoadedV = false;
+                    document.addEventListener("DOMContentLoaded", () => {
+                      domLoadedV = true;
+                    });
+                  
+                
+
+
+ + +
+
+
+
+

jQuery

+

Code:

+
+                  
+                    let domLoadedQ = false;
+                    $(document).ready(function () {
+                      domLoadedQ = true;
+                    });
+                  
+                
+
+
+ + +
+
+
+
+
+ +
+
+
+

JS Vanilla

+

Code:

+
+                  
+                    document.querySelector("button").addEventListener("click", function () {
+                      let button = document.querySelector("button");
+                      button.innerText += " Clicked";
+                    });
+                  
+                
+
+
+ +
+
+
+
+

jQuery

+

Code:

+
+                  
+                    $("button").on("click", function () {
+                      $(this).text($(this).text() + " Clicked");
+                    });
+                  
+                
+
+
+ +
+
+
+
+
+ +
+
+
+

JS Vanilla

+

Code:

+
+                  
+                    document.querySelector("button").addEventListener("dblclick", function () {
+                      let button = document.querySelector("button");
+                      button.innerText += " Double clicked";
+                    });
+                  
+                
+
+
+ +
+
+
+
+

jQuery

+

Code:

+
+                  
+                    $("button").on("dblclick", function () {
+                      $(this).text($(this).text() + " Double clicked");
+                    });
+                  
+                
+
+
+ +
+
+
+
+
+ +
+
+
+

JS Vanilla

+

Code:

+
+                  
+                    let span = document.querySelector("span");
+                    document.addEventListener("keydown", function keyboardV(event) {
+                      span.innerText = event.key;
+                    });
+                  
+                
+
+
+ + +
+
+
+
+

jQuery

+

Code:

+
+                  
+                    $(document).on("keydown", function keyboardQ(event) {
+                      $("span").text(event.key);
+                    });
+                  
+                
+
+
+ + +
+
+
+
+
+ +
+
+
+

JS Vanilla

+

Code:

+
+                  
+                    let span = document.querySelector("span");
+                    document.addEventListener("mousemove", function (event) {
+                      span.innerText = event.pageX + ", " + event.pageY;
+                    });
+                  
+                
+
+
+ + +
+
+
+
+

jQuery

+

Code:

+
+                  
+                    $(document).on("mousemove", function (event) {
+                      $("span").text(event.pageX + ", " + event.pageY);
+                    });
+                  
+                
+
+
+ + +
+
+
+
+
+ +
+
+
+

JS Vanilla

+

Code:

+
+                  
+                    let input = document.querySelector("input");
+                    let span = document.querySelector("span");
+                    input.addEventListener("input", function (event) {
+                      span.innerText = event.target.value;
+                    });
+                  
+                
+
+
+ + + +
+
+
+
+

jQuery

+

Code:

+
+                  
+                    $("input").on("input", function (event) {
+                      $("span").text(event.target.value);
+                    });
+                  
+                
+
+
+ + + +
+
+
+
+
+ +
+
+
+

JS Vanilla

+

Code:

+
+                  
+                    let imgLoaded = false;
+                    document.querySelector("img").addEventListener("load", function() {
+                      imgLoaded = true;
+                    })
+                    document.querySelector("img").setAttribute("src","image.jpg");
+                  
+                
+
+
+ + + +
+
+
+
+

jQuery

+

Code:

+
+                  
+                    let imgLoaded = false;
+                    $("img").on("load", function () {
+                      imgLoaded = true
+                    }).attr("src","image.jpg")
+                  
+                
+
+
+ + + +
+
+
+
+
+ +
+
+
+

JS Vanilla

+

Code:

+
+                  
+                    let imgFail = false;
+                    document.querySelector("img").addEventListener("error", function() {
+                      imgFail = true;
+                    })
+                    document.querySelector("img").setAttribute("src","imaggee.jpg");
+                  
+                
+
+
+ + + +
+
+
+
+

jQuery

+

Code:

+
+                  
+                    let imgfail = false;
+                    $("img").on("error", function () {
+                      imgFail = true
+                    }).attr("src","imaggee.jpg")
+                  
+                
+
+
+ + + +
+
+
+
+
+ +
+
+
+

JS Vanilla

+

Code:

+
+                  
+                    document.querySelector("form").addEventListener("submit", function(event) {
+                      event.preventDefault();
+                      document.querySelector("span").innerText = "Form Submited!";
+                    })
+                  
+                
+
+
+
+ + +
+ +
+
+
+
+

jQuery

+

Code:

+
+                  
+                    $("form").on("sumbit", function (event) {
+                      event.preventDefault();
+                      $("span").text("Form Submited!");
+                    })
+                  
+                
+
+
+
+ + +
+ +
+
+
+
+
+ +
+
+
+

JS Vanilla

+

Code:

+
+                  
+                    document.querySelector("select").addEventListener("change", function(event) {
+                      document.querySelector("span").innerText = "Value is: " + event.target.value;;
+                    })
+                  
+                
+
+
+ + +
+
+
+
+

jQuery

+

Code:

+
+                  
+                    $("select").on("change", function () {
+                      $("span").text("Value is: " + $("select").val());
+                    });
+                  
+                
+
+
+ + +
+
+
+
+
+ +
+
+
+

JS Vanilla

+

Code:

+
+                  
+                    document.querySelector("select").addEventListener("change", function(event) {
+                      document.querySelector("span").innerText = "Value is: " + event.target.value;;
+                    })
+                  
+                
+
+
+ Mouse is not over +
+
+
+
+

jQuery

+

Code:

+
+                  
+                    $("select").on("change", function () {
+                      $("span").text("Value is: " + $("select").val());
+                    });
+                  
+                
+
+
+ Mouse is not over +
+
+
+
+
+ +
+
+
+

JS Vanilla

+

Code:

+
+                  
+                    document.querySelector("input").addEventListener("change", function (event) {
+                      if (event.target.checked) {
+                        document.querySelector("span").innerText = "Checked";
+                      } else {
+                        document.querySelector("span").innerText = "Unchecked";
+                      }
+                    });
+                  
+                
+
+
+ Unchecked +
+
+
+
+

jQuery

+

Code:

+
+                  
+                    $("input").on("change", function (event) {
+                      if ($(event.target).is(":checked")) {
+                        $("span").text("Checked");
+                      } else {
+                        $("span").text("Unchecked");
+                      }
+                    });
+                  
+                
+
+
+ Unchecked +
+
+
+
+
+ +
+
+
+

JS Vanilla

+

Code:

+
+                  
+                    document.querySelector("ol").addEventListener("click", function (event) {
+                      document.querySelector("span").innerText =
+                        "Value clicked: " + event.target.innerText;
+                    });
+                  
+                
+
+
+

List:

+
    +
  1. Monday
  2. +
  3. Tuesday
  4. +
  5. Wednesday
  6. +
+ +
+
+
+
+

jQuery

+

Code:

+
+                  
+                    $("ol").on("click", function (event) {
+                      $("span").text("Value clicked: " + $(event.target).text());
+                    });                    
+                  
+                
+
+
+

List:

+
    +
  1. Monday
  2. +
  3. Tuesday
  4. +
  5. Wednesday
  6. +
+ +
+
+
+
+
+
+ + + + +