Affecting Elements

jQuery has many different methods for affecting elements.


.text()

Sets new text on an element

$(".hero-heading").text("Hello");

Gets the current text of an element

let heroHeadingText = $(".hero-heading").text();


.addClass()

Adds a class to an element.

$(".card").addClass("is-active");

Note: period not added before is-active because .addClass already indicates that we're passing in a class name.


.removeClass()

Removes a class from an element

$(".card").removeClass("is-active");


.toggleClass()

Adds a class if that class is not already on the element. Removes a class if that class is already on the element.

$(".card").toggleClass("is-active");


.hasClass()

Returns true or false based on if an element has a certain class

let menuButton = $(".menu-button");

menuButton.on("click", function () {
    menuButton.toggleClass("is-opened");
    if ( menuButton.hasClass("is-opened") ) {
        menuButton.text("Close Menu");
    } else {
        menuButton.text("Open Menu");
    }
});


.val()

Gets the value of a form field

let fieldValue = $(".form-field").val();

Sets a value on a form field

$(".form-field").val("New Value");

Clears the value of a form field

$(".form-field").val("");


.remove()

Deletes an element entirely from the page

$(".element-class").remove();


.appendTo()

Moves cta-card into the cms-list as the last child

$(".cta-card").appendTo(".cms-list");

Moves cta-card into the cms-list as the last child using variable

let cmsList = $(".cms-list");
$(".cta-card").appendTo(cmsList);

Makes a copy of cta-card and adds the copy as the last child of cms-list

$(".cta-card").clone().appendTo(".cms-list");

Creates a new div with class of "cta-card" and adds it as the last child of "cms-list"

$("<div class='cta-card'></div>").appendTo(".cms-list");


.prependTo()

Moves cta-card into the cms-list as the first child

$(".cta-card").prependTo(".cms-list");


.insertBefore()

Moves the cta-card to be right before the third cms-item

$(".cta-card").insertBefore(".cms-item:nth-child(3)");


.insertAfter()

Moves the cta-card to be right after the third cms-item

$(".cta-card").insertAfter(".cms-item:nth-child(3)");


.css()

Get or set the value of any css variable or css property like height, background-color, border-width, etc.

Gets the background color of the hero

let heroBackground = $(".hero").css("background-color");

Sets the background color of the hero

$(".hero").css("background-color", "#000");

Gets the value of the --swatch--brand css variable on the html element

let brandColor = $("html").css("--swatch--brand");

Sets the value of the --swatch--brand css variable on the html element

$("html").css("--swatch--brand", "red");


.attr()

Gets or sets the value of any attribute

let myUrl = $(".my-link").attr("href");
$(".my-link").attr("href", "https://www.google.com/");

Gets the source (url) of an image

$(".my-image").attr("src");

Sets the source (url) of an image

$(".my-image").attr("src", "https://www.your-website.com/person.jpg");

Get the arial-label of an element

let initialLabel = $(".my-button").attr("aria-label");

Set the arial-label of an element

$(".my-button").attr("aria-label", "Play Video");

Get the value of a custom data attribute

let attributeValue = $(".my-element").attr("attribute-name");

Set the value of a custom data attribute

$(".my-element").attr("attribute-name", "attribute-value");


.removeAttr()

Deletes an attribute and its value completely from an element

// removes all inline styles created on an element
$(".my-element").removeAttr("style");


.click()

Causes a click on an element

$(".my-element").click();


.clone()

Makes a copy of an element

// Create new element
let newElement = $(".my-element").clone();
// Do things to the cloned element
newElement.addClass("is-featured");
// Add new element to the page
newElement.appendTo("body");

Shortened version

$(".my-element").clone().addClass("is-featured").appendTo("body");


.html()

Gets the html inside an element

let elementContent = $(".my-element").html();

Replaces the html inside an element

$(".my-element").html("<div class='my-class'>Some text</div>");

Clears out the html inside an element

$(".my-element").html("");


.empty()

Deletes everything inside an element

$(".my-element").empty();


.wrap()

Wrap something around an element. New div with the class of "container" gets wrapped around my-element

$(".my-element").wrap("<div class='container'></div>");


.unwrap()

Deletes the direct parent of an element without deleting any of that parent's children

$(".my-element").unwrap();


.replaceWith()

Deletes element and replaces it with something else

Replace with existing element

The hero-card will be deleted and the footer-form will be moved to where the .hero-card was.

$(".hero-card").replaceWith( $(".footer-form") );

Replace with new element

The hero-card will be deleted, and a new h2 will be created in its place.

$(".hero-card").replaceWith("<h2 class='my-heading'>New heading</h2>");


.prop()

Gets or sets the value / state of a form element

Sets checkbox to checked

// get your checkbox's parent
let checkboxParent = $(".my-checkbox-parent");
// find the hidden input and set it to true
checkboxParent.find("input").prop("checked", true);
// find the visible checkbox div and add Webflow's checked class to it
checkboxParent.find(".w-checkbox-input").addClass("w--redirected-checked");

Sets checkbox to unchecked

// get your checkbox's parent
let checkboxParent = $(".my-checkbox-parent");
// find the hidden input and set it to false
checkboxParent.find("input").prop("checked", false);
// find the visible checkbox div and remove Webflow's checked class from it
checkboxParent.find(".w-checkbox-input").removeClass("w--redirected-checked");

Get value of checkbox

let isChecked = $(".my-checkbox-parent").find("input").prop("checked");

Get state of checkbox

let isDisabled = $(".my-checkbox-parent").find("input").prop("disabled");


.height()

Get the height of an element

let elementHeight = $(".my-element").height();

Set the height of an element

$(".my-element").height("2rem");


.width()

Get the width of an element

let elementWidth = $(".my-element").width();

Set the width of an element

$(".my-element").width("2rem");


.show()

Sets element to display block

$(".my-element").show();


.hide()

Sets element to display none

$(".my-element").hide();


.toggle()

Switches between display none and the original display setting

$(".my-element").toggle();


.focus()

Causes a focus on an element

$(".open-modal-button").on("click", function () {
    $(".name-field").focus();
});


.blur()

Causes a focus off of an element

let accessCodeField = $(".access-code-field");
accessCodeField.on("input", function () {
    // once field has 4 characters inside
    if (accessCodeField.val().length === 4) {
        // focus off of field
        accessCodeField.blur();
    }
});


.submit()

Causes a form to submit

$(".my-form-element").submit();

Last updated