jQuery for nontechnical users

Use these common jQuery functions in the custom code editor, even if you are primarily a Visual Editor user.

See Project Settings: jQuery and Project JavaScript settings.

What is jQuery, and how does Optimizely Experimentation use it?

Optimizely Experimentation runs your variations on your page by modifying the elements on the page. To do this, it needs a way to execute the changes. Optimizely Experimentation does this through jQuery, a JavaScript library.

A basic line of jQuery looks like:

$("#selector").html("Hello World");

The first part before the period is the selector, which specifies the element, ID, or class that is modified.

$("#selector")

The custom code editor will attempt to identify elements with IDs first because they tend to be the most unique. As in CSS, IDs are identified by the pound or hashtag symbol (#), and classes are identified by a leading period (.).

The second part after the period is the method.

.html("Hello World");

The method will make the changes to the selector. In the sample code above, the html() method changes the HTML contents of the selected element to the text "Hello World".

For example, you commonly use the Visual Editor to change the style of an element. This makes use of the css() method which changes the CSS properties of the selected element. You want to change the color of the 'Hello World' text to blue (hex value: #1964af). The selector is the same, and the html() method is replaced with css():

$("#selector").css({"color":"#1964af"});

The two items inside the curly braces { } and double quotes " " are the CSS property and value you want your element to take on. See the jQuery API documentation for a full list of available methods. 

Common jQuery Methods

Here are several different methods that you will see when you use the Visual Editor to make changes or that you can use to make simple changes yourself.

.attr()

The .attr() method will "Get the value of an attribute for the first element in the set of matched elements or set one or more attributes for every matched element" See jQuery's documentation on .attr() for more.

$(“#selector”).attr({“src”: “image.png”}); 

Here, the selector gets an image source assigned as an attribute, changing an existing image or adding one to the selected element.

$(“#selector”).attr({“href”: “example.com”});

Here, the selector is turned into a hyperlink that directs to the URL in quotes.

An .attr() method call is most commonly generated when using Change Image or Make Hyperlink features.

$(“#selector”).replaceWith(“<div>Hello World</div>”);

.replaceWith()

The .replaceWith() method will "Replace each element in the set of matched elements with the provided new content and return the set of elements that was removed." See jQuery's documentation on replaceWith() for more.

In this case, any selector with ID "selector" will have its contents replaced with a division, inside of which is the phrase “Hello World.” This method is most commonly generated in the Visual Editor when using "Edit HTML".

$(“#selector”).detach().insertBefore(“.class1”);

.detach().insertBefore() and .insertAfter()

The .detach().insertBefore() method will remove the selected element from its parents and children elements on the Document Object Model (DOM) and insert it before the class "class1" element. On the HTML tree, it is on the same "level" as the element it was inserted before. That is, it is neither child nor parent of $(“.class1”). You will see these methods generated in the Visual Editor when you rearrange elements on a page.

$(“#selector”).detach().insertAfter()

Same as .insertBefore(), except it will insert after rather than before. The Visual Editor calls this method when you rearrange elements on the page.

.prepend()

$(“#selector”).prepend(“#snazzy”);

The .prepend() method will add the selector before the element #snazzy. Like .insertBefore(), it is on the same level as the #snazzy. That is, it is neither child nor parent of #snazzy.

.append()

$(“#selector”).append()

Same as above except after. Oftentimes, an .append() method call is generated when inserting an element such as an image.  

See jQuery traversal methods.