What is the $w Selector
Exploring $w
By now you should be familiar with the Wix Editor and its Code Panel feature which allows you to write and apply code to your website. When you open the Code Panel, you’ll see default boilerplate code in all the files of a website. Files under the Main Pages section and the Global section in the Page Code side panel will have the following code (after ignoring the comments):
$w.onReady(function () {});
This code should be familiar, both reference the $w
syntax, which is unique to Wix. This namespace, or logical grouping of functions, gives us access to all the various parts that make up a Wix website.
In this case, the $w
and onReady(...)
syntax seen in the default code of the Page Code files ensures that our code runs when the website has completely loaded in the browser.
In Dev Mode, you can use the Velo API, the Application Programming Interface of Wix’s open development platform, to make requests to Wix to do things with your website. This includes customizing the website’s appearance and functionality, such as changing the styling of the website, adding animations, or retrieving information about the functionality of the website, such as what device is being used to view it.
In this article, we’ll take a look at how to use $w
to select different elements and manipulate them.
What is an element?
All websites are composed of HTML elements. These are all the parts of a website that a user interacts with: a body, headers, text, images, forms, buttons, etc.
With the Wix Editor, we can generate custom Wix elements for us rather than the traditional way of writing code ourselves. This can save us time and the effort of learning HTML or CSS or styling frameworks in-depth by providing default elements that are already styled and can be customized later.
Knowing that websites are composed of elements allows us to target specific parts of our website for customization through code we write in the Code Panel.
Selecting and Manipulating an Element
Let’s take a look at how to select a specific element of a website so we can manipulate it with code in the Code Panel.
In order to select a specific element, we need to look at one of two properties of an element, either its type
or id
.
A Wix element’s type
describes the purpose of the element and is generated by Wix.
In addition to type
, Wix elements are all assigned an id
property at the time of their creation. id
acts as a specific and unique name for each instance of an element on a webpage.
Hovering over an element in the Wix Editor or clicking on it will reveal its type
highlighted in blue and its id
prefixed with a #
. We can also access the Properties and Events panel of an element to find its type
or id
.
The name of the id
can be changed in the Wix Editor via the Properties and Events panel located in the bottom right corner. Remember, id
s are unique and attempting to reuse an id
name for another element will result in an error. An id
is particularly useful when we have several elements of the same type
but want to be specific and target only one of these elements with our code. For the rest of this article, we’ll focus on selecting elements with the id
.
Once we know the id
name of an element, we can use the $w
selector to select it using this syntax inside the boilerplate code in the Code Panel:
The $w
namespace allows us to access any Wix element. The id
of a specific element in between quotes is a string representing some identifier of a specific Wix element. The #
in the string denotes that the string being passed is an id
and not another property such as type. The id
name of an element is after the #
.
Let’s take a look at this website which has a heading element with some placeholder text:
With Dev Mode on, we can add code into the Code Panel. Inside the default code and under the // Write your JavaScript here
comment add the following code:
$w('#text1').text = 'Welcome to my Wix website!';
This code selects a Wix element with the id of text1
, which is the heading element. .text
is a property of the element we’re manipulating and refers to text contained within the selected element.
While we’re in the Wix Editor, any code changes we make to a website won’t be applied until we click the Preview button and won’t change a live website until we click the Publish button. Viewing the website in Preview, we can see that the heading’s placeholder text of “Heading 1” has been replaced with the text “Welcome to my Wix website!”
Recap
In this article, we covered:
- What elements are
- How Wix elements differ from traditional HTML elements
- How to select and manipulate an element of a Wix website
As your websites grow in complexity with more elements, being able to easily specify which of these elements you want to change becomes important. The Wix Editor provides the $w
selector function to quickly access the elements we want and use the Velo API) to manipulate the selected element. Later, we’ll learn how to change other Wix element properties to provide even more customization.
This is just one example and property of an element that can be accessed and manipulated after the selection of an element. While it might seem like a simple task, once you learn more about Wix and triggering events like clicking or scrolling, you’ll be able to create dynamic, captivating websites.
Author
'The Codecademy Team, composed of experienced educators and tech experts, is dedicated to making tech skills accessible to all. We empower learners worldwide with expert-reviewed content that develops and enhances the technical skills needed to advance and succeed in their careers.'
Meet the full teamRelated articles
Learn more on Codecademy
- Free course
Create a Professional Website with Velo by Wix
From beginners to experienced web developers, Wix offers a wide range of solutions to quickly create a website that you can proudly share.Beginner Friendly17 hours - Free course
Velo by Wix: Interactivity
Learn fundamental JavaScript syntax, including conditionals, functions, and scope, to work with Velo to further customize your Wix site.Beginner Friendly6 hours