This Banner is For Sale !!
Get your ad here for a week in 20$ only and get upto 15k traffic Daily!!!

DOM & jQUery – Javascript Cheatsheet 2022




Be a part of the slack and discord neighborhood at devNursery.com

DOM/jQuery Video Playlist



Window Object

Represents your entire browser window

motion syntax notes
what browser is consumer utilizing window.navigator Read More
retailer knowledge in localStorage window.localStorage.setItem("identify", JSON.stringify(myObject)) Read More
get knowledge from localStorage const knowledge = JSON.parse(window.localStorage.getItem("identify")) Read More
take away knowledge from localStorage window.localStorage.removeItem("identify") Read More
ship consumer to a different webpage window.location = "https://www.google.com" Read More



choosing and creating DOM Nodes

The doc object represents the doc outlined by the <doctype!> tag, primarily this of doc as an object representing all the pieces throughout the <html> tags in your html file.

motion plain vanilla dom jquery Notes
choose a component primarily based on CSS selector doc.querySelector("#id") $("#id")
choose a number of parts primarily based on CSS selector doc.querySelectorAll(".class") $(".class")
run code after dom masses window.addEventListener("load", () => {...code right here}) $(() => {...code right here}) You possibly can additionally both transfer script tag to backside of physique or use defer key phrase in script tag
Create a brand new factor doc.createElement("h1") $("<h1>") with jQuery you might additionally add attributes within the string like $("<h1 id='cheese'>")



Manipulating DOM nodes

Under are methods to work with chosen parts. el will signify an parts chosen with plain javascript like const el = doc.querySelector("h1") and $el will signify a component chosen with jQuery akin to const $el = $("h1").

motion plain vanilla dom jquery Notes
edit textual content el.innerText = "new worth" $el.textual content("new worth")
edit html el.innerHTML = "<h1>new worth</h1>" $el.html("<h1>new worth</h1>")
add a css class el.classList.add("className") $el.addClass("className")
take away a css class el.classList.take away("className") $el.removeClass("className")
toggle a css class el.classList.toggle("className") $el.toggleClass("className")
get the worth of an attribute el.getAttribute("id") $el.attr("id")
set the worth of an attribute el.setAttribute("id", "new worth") $el.attr("id", "new worth")
take away an attribute el.removeAttribute("id") $el.removeAttr("id")
get the worth of a css property el.model.backgroundColor $el.css("background-color") each css property within the model object has camel case names
change a css property el.model.backgroundColor = "black" $el.css("background-color", "black") each css property within the model object has camel case names
empty the contents of the factor el.innerHTML = "" $el.empty()
take away the factor from DOM el.take away() $el.take away()
append factor as final little one of one other node goal.append(el) $goal.append(el)
prepend factor as final little one of one other node goal.prepend(el) $goal.prepend(el)
insert factor earlier than one other factor goal.earlier than(el) $goal.earlier than($el)
insert factor after one other factor goal.after(el) $goal.after($el)
pay attention for occasions on a component el.addEventListener("occasion", (occasion) => {...what occurs right here}) $el.on("occasion", (occasion) => {...what occurs right here})



Looping Over Knowledge to Create Parts

Plain Vanilla

// array of knowledge
const cheeses = ["gouda", "munster", "brie"]

// choose present ul factor, add an li for every cheese
const ul = doc.querySelector("ul")
for (cheese of cheeses){
    //create li
    const li = doc.createElement("li")
    // add textual content to the li
    li.innerText = cheese
    // append to ul
    ul.append(li)
}
Enter fullscreen mode

Exit fullscreen mode

jQuery

// array of knowledge
const cheeses = ["gouda", "munster", "brie"]

// choose present ul factor, add an li for every cheese
const $ul = $("ul")
for (cheese of cheeses){
    //create li
    const $li = $("<li>")
    // add textual content to the li
    $li.textual content(cheese)
    // append to ul
    $ul.append($li)
}
Enter fullscreen mode

Exit fullscreen mode



Looping Over Parts to Modify Theme

Plain Vanilla

// Choose all h1's on the web page to make them pink
const h1s = doc.querySelectorAll("h1")

// loop over h1s
for (h1 of h1s){
    h1.model.colour = "pink"
}
Enter fullscreen mode

Exit fullscreen mode

jQuery

// Choose all h1's on the web page to make them pink
const $h1s = $("h1")

// loop over h1s
for (h1 of $h1s){
    // flip the h1 node right into a jQuery object
    const $h1 = $(h1)
    // make it pink
    const $h1.css("colour", "pink")
}
Enter fullscreen mode

Exit fullscreen mode

The Article was Inspired from tech community site.
Contact us if this is inspired from your article and we will give you credit for it for serving the community.

This Banner is For Sale !!
Get your ad here for a week in 20$ only and get upto 10k Tech related traffic daily !!!

Leave a Reply

Your email address will not be published. Required fields are marked *

Want to Contribute to us or want to have 15k+ Audience read your Article ? Or Just want to make a strong Backlink?