JavaScript Documentation

Selectors

Select DOM elements

Method	Description
`$(".class")`	Select by class
`$("#id")`	Select by ID
`$("tag")`	Select by tag
`$(element)`	Wrap element

$(".btn").addClass("active");

$("#header").text("Hello");

$("p").css("color", "red");

DOM Manipulation

Modify page content and structure

Method	Description
`html([content])`	Get/set innerHTML
`text([content])`	Get/set textContent
`val([value])`	Get/set form value
`append(content)`	Add to end
`prepend(content)`	Add to start
`after(content)`	Insert after
`before(content)`	Insert before
`remove()`	Delete element
`empty()`	Clear content

$(".card").html("<h3>Title</h3>");

$(".list").append("<li>Item</li>");

$("#old").remove();

CSS & Classes

Modify styles and classes

Method	Description
`addClass(class)`	Add class
`removeClass(class)`	Remove class
`toggleClass(class)`	Toggle class
`hasClass(class)`	Check class
`css(prop, val)`	Set CSS property
`css({obj})`	Set multiple CSS

$(".btn").addClass("active");

$(".box").toggleClass("open");

$("div").css({"color":"red","padding":"1rem"});

Attributes

Get/set element attributes

Method	Description
`attr(name, [val])`	Get/set attribute
`removeAttr(name)`	Remove attribute
`prop(name, [val])`	Get/set property

$("img").attr("src", "photo.jpg");

$("input").prop("checked", true);

$("a").removeAttr("href");

Events

Handle user interactions

Method	Description
`on(event, fn)`	Attach event
`click(fn)`	Click event
`dblclick(fn)`	Double click
`keypress(fn)`	Key press
`keydown(fn)`	Key down
`keyup(fn)`	Key up
`submit(fn)`	Form submit
`change(fn)`	Input change
`focus([fn])`	Focus event/action
`blur([fn])`	Blur event/action
`mouseenter(fn)`	Mouse enter
`mouseleave(fn)`	Mouse leave
`scroll(fn)`	Scroll event
`resize(fn)`	Window resize

$(".btn").click(function() {

  alert("Clicked!");

});

$("#form").submit(function(e) {

  e.preventDefault();

  console.log("Submitted");

});

Show/Hide

Toggle element visibility

Method	Description
`show()`	Display element
`hide()`	Hide element
`toggle()`	Toggle visibility

$(".modal").show();

$(".error").hide();

$(".menu").toggle();

Animations

Animate elements smoothly

Method	Description
`fadeIn(duration, callback)`	Fade in element
`fadeOut(duration, callback)`	Fade out element
`fadeToggle(duration, callback)`	Toggle fade
`slideDown(duration, callback)`	Slide down
`slideUp(duration, callback)`	Slide up
`slideToggle(duration, callback)`	Toggle slide
`animate(props, duration, callback)`	Custom animation

$(".alert").fadeIn(300);

$(".panel").slideToggle(400, function() {

  console.log("Animation done");

});

$(".box").animate({

  opacity: 0.5,

  left: "100px"

}, 500);

Traversing

Navigate DOM tree

Method	Description
`parent()`	Get parent element
`parents([selector])`	Get all ancestors
`children([selector])`	Get child elements
`find(selector)`	Find descendants
`siblings([selector])`	Get siblings
`next([selector])`	Next sibling
`prev([selector])`	Previous sibling
`first()`	First element
`last()`	Last element
`eq(index)`	Element at index

$(".item").parent().addClass("active");

$("ul").children().css("color", "blue");

$(".card").find(".btn").click(handler);

Filtering

Filter element collections

Method	Description
`filter(selector)`	Filter by selector
`not(selector)`	Exclude by selector
`is(selector)`	Check if matches
`each(callback)`	Iterate elements

$("li").filter(".active").css("color","red");

$(".item").not(".hidden").show();

$(".card").each(function(i, el) {

  $(el).text("Card " + i);

});

Dimensions

Get/set element size

Method	Description
`width([value])`	Get/set width
`height([value])`	Get/set height

$(".box").width(200);

var h = $(".sidebar").height();

$(".img").width("100%");

AJAX

Make HTTP requests

Method	Description
`$.ajax(options)`	Custom AJAX request
`$.get(url, success)`	GET request
`$.post(url, data, success)`	POST request

$.get("/api/users", function(data) {

  console.log(data);

});

$.post("/api/save", {name: "John"}, function(res) {

  alert("Saved!");

});

$.ajax({

  method: "PUT",

  url: "/api/update",

  data: {id: 1},

  success: (data) => console.log(data)

});

⚡ JavaScript Documentation