Introduction to JQuery for Marketers
a 10 minute crash course to get you started with JQuery
JQuery can be a powerful instrument in any digital marketer’s toolbox. I wrote earlier on how to use JQuery to run pixel-perfect A/B experiments with Optimizely and how to style a page by injecting JQuery with Google Tag Manager, but application of JQuery goes way beyond that.
I strongly believe that every digital marketer needs to be comfortable with at least the basics of HTML, CSS and JQuery and hope this post will help some of you get started with JQuery.
Why use JQuery?
In some cases HTML and CSS are not enough. If HTML defines the structure, elements and order of elements of a page, and CSS defines how elements of the page are displayed, then JQuery allows manipulating those elements.
Here are a few things you can do with JQuery:
- Change attributes of elements, such as class, value, style;
- Change order of elements (i.e. rearrange items in the list);
- Add new elements to a page (from simple text to HTML blocks);
- Add interaction to elements (i.e. show warning when a button is clicked)
From my experience, I found that creating A/B experiments almost always requires the use of JQuery. You can get along with drag-and-drop functionality of Optimizely and custom CSS styling, but more complex experiments usually require a more advanced tweaking of the langing page.
Another use case is that in some case you might need to implement changes to a website very fast and the engineering resources are not available. In that case you can implement the changes by injecting JQuery code with Google Tag Manager.
Running JQuery on your website
First of all, for the JQuery commands to run on your page you need the JQuery library to be included on your page which usually is done by including the following line in the <head> section of the page:
<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
If JQuery library is included on your page, you’re good to go with writing your code (just don’t forget to wrap it with <script></script>). There are several options for running JQuery code on your website:
- Include it in the page code (through your Content Management System)
- Inject it with Google Tag Manager (as a custom HTML tag)
- Inject it with Optimizely (through <edit code> section)
A useful tool for developing and testing your JQuery code is Console, which is part of Chrome Developer Tools (but any modern browser has a similar functionality). Open your website in a browser and hit Ctrl + Shift + J on Windows or Cmd + Opt + J on Mac.
Now paste a line of JQuery code and hit Enter. If the code has no mistakes the command will be executed.
In the example above I removed an element with a class .hero-title, which is was my name. I use Sublime Text for writing code, as it gives syntax highlighting making spotting errors much easier. Then I use Console to test the code (you can paste and execute multiple commands in one go.
Structure of JQuery commands
In order to write JQuery code you need to understand how the commands are structured. There are three elements in each JQuery command:
$(‘element selector’).function(‘parameters’);
element selector: defines which page element to apply JQuery function to.
function: defines JQuery function to apply. Bookmark this reference to see the full list of JQuery functions available for your choice.
parameters: some of JQuery functions require parameters, some don’t (in this case you’d just leave empty brackets, i.e. remove().
Here are a few examples:
$(‘.footer’).remove();
The above live selects the element with class “footer”, and applies remove() function to it (which obviously, removes the element). remove() function doesn't require any parameters.
$(.header).append(‘<p>Extra line of text appended to header</p>’);
The above selects the element with class “header”, and applies append() function to it. append() inserts the parameter passed in the brackets, in this case it inserts <p>Extra line of text appended to header</p>.
Selecting the right element
In order to select the correct page element you need a bit of CSS knowledge, or you can use Element Inspector functionality of Chrome Developer Tools. To open Element Inspector, open the website in Chrome (again, both Firefox and Safari have similar functionality), select the element that you want to apply JQuery function to, right click and select “Inspect Element”.
Element Inspector will highlight the HTML code that renders the element that you selected, which helps you in finding the class and/or id of the element and thus, structure the selector. Below I show the basic syntax for selecting the element using it’s class and id.
#important-list // # symbol followed by the name
selects an element with id=”important-list”, for instance
<ul id=”important-list”>|
…
</ul>
.important-list // . followed by the name
selects an element with class=”important-list”, for instance
<div class=”important”>
…
</div>
.important-list:first-child, .important-list:last-child and nth-child(0)
selects either first, last or specific “child” of an element, for instance
<div class=”important-list”> <div> … </div> // .important-list:first-child <div> … </div> // .important-list:nth-child(2) <div> … </div> // .important-list:last-child
Alternatively, you right click on the element in Element Inspector and select “Copy CSS Path”, which will copy the selector of the element into the clipboard. Warning: you better learn how to write selectors on your own, as “Copy CSS Path” is not ideal.
Frequently used functions
As we now discussed why and how to run JQuery code, let’s dig into the most interesting part and explore some of the most frequently used functions:
Changing content of existing elements:
The above function allows you replacing the content of an element. For instance you if you want to change the text of H1 you run:
$(‘h1’).html(‘New and better header’);
Or you might be interested in changing a bigger element, such as footer:
$(‘.footer’).html(‘<div class=”footer-container”>….</div> ’);
.html() allows you to replace pretty much anything on the website (if used right. Hint: want to replace the whole page? Try $(‘body’).html(‘’);
Adding new elements to the page:
All three functions allow adding extra element to the page with the only difference being the location of where the element will be added at. For instance running
$(‘.footer’).after(‘<p>Paragraph that follows the footer</p>’);
will add a paragraph AFTER the closing </div> of the element <div class=”footer”></div>.
Changing class and style attributes of elements:
This function allows you changing the attributes of an element such as class, style or value. For instance, the below
$(‘#important-list’).attr(‘class’,’no-bullet-list’);
will change the class attribute to “no-bullet-list” of an element with id=”important-list”, so it would become
<div id=”important-list” class=”no-bullet-list”> … </div>
Alternatively, you can use .attr() to add CSS styling to an element:
$(‘#important-list’).attr(‘style’,’text-decoration:none;’);
which would change style attribute of important-list attribute:
<div id=”important-list” style=”text-decoration:none;”> … </div>
Wrapping element:
In some cases you want to wrap an element with extra <div></div> to apply extra CSS styling. Running
$(‘.footer’).wrap(‘<div class=”extra-footer-wrapper” />’);
will wrap the element with class=”footer” into
<div class=”extra-footer-wrapper”> <div class=”footer”> …
</div>
</div>
Changing order of elements:
What if you want to reorder element on your page? Let’s say you want to display button with id=”botton-2" BEFORE the button with id=”button-1":
$(‘#button-1’).insertBefore(‘#button-2’);
the above will take the element with id=”button-2" and insert it before the element with the id=”button-2".
Removing elements:
Removing elements is super easy:
$(‘#button-1’).remove();
the above will remove an element with id=”button-1" from the page completely.
Time to wrap up. As I mention earlier, visit JQuery API Documentation for more functions to add to you toolbox or just google it, as there is plenty of information about JQuery on the Internet.
Hope this will get you started with JQuery, but feel free to ping me on Twitter (@jevgenijs) if you need more tips.
p.s. thanks to Periscope.io for the inspiration!
Check out my other blog posts:
Image: http://www.student.ugent.be/
