About jQuery

jQuery is a JavaScript library that's included in every Webflow project. It greatly simplifies the process of writing code in Webflow.

Do more with less lines of code

jQuery's simple syntax makes it faster to write, easier to read, and easier to memorize. This makes jQuery a great choice for designers learning how to code.

jQuery for adding a class to every menu-link

$(".menu-link").addClass("is-open");

JavaScript for adding a class to every menu-link

document.querySelectorAll(".menu-link").forEach(function(element) {
  element.classList.add("is-open");
});

---

Chainable methods

In jQuery, methods are chainable. We can have multiple actions happen on one line without having to reselect the element.

jQuery for adding a class to every video-button and setting its attribute

$(".video-button").addClass("is-paused").attr("aria-pressed", "true");

JavaScript for adding a class to every video-button and setting its attribute

document.querySelectorAll('.video-button').forEach(function(element) {
  element.classList.add('is-paused');
  element.setAttribute('aria-pressed', 'true');
});

---

Less likely to cause errors

JavaScript often requires us to check if an element exist on the page before affecting it. If we forget to check, it can cause an error that prevents the rest of our code from running.

This jQuery will not throw an error if h2 is not found on the page.

$("h2").text("Hello");

This JavaScript will throw an error if h2 is not found on the page.

document.querySelector("h2").textContent = "Hello";

---

Switching between jQuery & JavaScript

Some libraries like Swiper only accept JavaScript elements. We can convert a jQuery element to JavaScript for use in those libraries by adding [0] behind the jQuery element. Other libraries like Barba.js will return a JavaScript element like data.current.container. We can easily convert it to jQuery by wrapping it in $() to use our jQuery methods on it: $(data.current.container)

Converting jQuery element to JavaScript

let jQueryElement = $(".element-class");
// convert to javascript
jQueryElement[0];

Converting JavaScript element to jQuery

let javascriptElement = document.querySelector(".element-class");
// convert to jquery
$(javascriptElement);

---

How to add jQuery code in Webflow

jQuery code should be added in the Footer code inside site settings or page settings. It should be placed inside script tags like this.

<script>
// your code here
</script>