Introduction to jQuery
If you’re like me, you’ve heard the term jQuery on every other website tutorial you’ve look at in the past few years. And if you’re like me, you’ve resisted taking the time to learn exactly what it can do and how to use it. After recently starting a new job and no longer having the luxury of NOT learning jQuery, I was forced to play catch up. With the help of a great book, an excellent teacher, and several projects later, I’m starting to wonder how I was able to sidestep such an important web developer tool.
The goal of this tutorial is not to teach you everything you need to know about jQuery. Not even necessarily to show you the basics. There are books for that. Specifically, this highly recommended book: JavaScript and JQuery: Interactive Front-End Web Development. After reading the first half of this book, I had more than enough knowledge to get started and learn the rest from stack exchange and the jQuery website. I’m not very impressed with the book binding as the pages came loose after several weeks of use but the content is killer.
My goal is to give you some very basic examples of what jQuery can do for your WordPress website. I believe once you see how easy the code is, you won’t be so intimidated to dig deeper.
First things first. You will not be able to test any of the following examples without referencing the jQuery library. If you’re using a modern WordPress theme like Elegant Theme’s Divi theme, jQuery is probably already loaded. You can skip straight to the first example and start playing around. If your theme does not load jQuery, you can use this guide to install it on your WordPress site: https://css-tricks.com/snippets/wordpress/include-jquery-in-wordpress-theme. And if you’re not sure if it’s loaded, just follow the first example and see if it works 🙂
* All of the examples below are based on the Divi theme but can be used on any theme with a little extra work.
Example One
1 2 3 4 5 6 7 8 |
<script type="text/javascript"> jQuery(document).ready(function(){ jQuery('.more-link').attr('target', '_blank'); jQuery('.more-link').text('continue'); }); </script> |
Since jQuery is just a library for Javascript, it must always be enclosed with the opening and closing script tags. The next thing of importance is the use of the word jQuery. Typically you would use the $ character to begin a jQuery statement but in WordPress, jQuery often runs in no-conflict mode so you’ll need to begin statements with the word jQuery. After the opening script tag, we begin with the document.ready function. This just wraps the next two lines in a function that doesn’t process until after the page has finished loading. This is important because jQuery’s main purpose is to manipulate HTML elements. If those elements haven’t finished loading on the page, jQuery won’t be able to find them and perform the tasks you assign it.
Inside our function are two statements. Both statements are applied to the class more-link, thus the dot notation for class. If we wanted to apply these statements to an element with an id of more-link, we would replace the dot with a pound symbol (#). So we are telling jQuery to look for the class named more-link.
The first statement then uses the .attr method, which allows you to add an attribute to the selected more-link class. The attribute we are adding is target and the value is _blank. Now all links with the class more-link will open in a new tab.
The second statement is using the jQuery text method to change the default text from “read more” to “continue”.
Now let’s add the code to our site and see it in action. If you’re using Divi, go to the WordPress Dashboard->Divi->Theme Options->Integration and paste the code above in the section labeled “Add code to the head of your blog”. Click on the Save button at the bottom. Typically you would add this code to your theme’s footer.php file just above the </body> tag but for practice, we’re taking a shortcut.
If you’re using Divi, all of your read more links on the site will have changed to “continue”. If you’re not using Divi, just create a new post, and add the following in the text editor:
1 |
<a class="more-link" href="http://www.google.com">Click Me</a> |
Not too difficult, right? Again, you can find a lot of great information in the jQuery documentation. You can also find a lot just by googling what you want to do: “jQuery remove class” for example. Let’s try something a little more complicated.
Example two
1 2 3 4 5 6 7 8 9 |
<script type="text/javascript"> jQuery(document).ready(function(){ jQuery(".more-link").mouseover( function() { alert('Click me!'); }); }); </script> |
We’re selecting the same link with class more-link. This time we’re using the mouseover function (similar to CSS hover) and creating a function that does something when the link is moused over. In this case, we are creating an alert pop up box with the text “Click me!”. Useful? Not really. But does it show just how easy jQuery is to use? Absolutely! Honestly the most complicated part about using jQuery is making sure everything is properly enclose with apostrophes, parenthesis and brackets. FYI, you might notice I used quotation marks for the .more-link but apostrophes for the alert text. You can use either. As long as you start and end with the same symbol. Let’s try one more example.
Example three
1 2 3 4 5 6 7 8 9 10 11 12 |
<script type="text/javascript"> jQuery(document).ready(function(){ jQuery(".more-link").mouseover( function() { jQuery(this).parent().css('background-color', 'blue'); }); jQuery(".more-link").mouseout( function() { jQuery(this).parent().css('background-color', 'transparent'); }); }); </script> |
There are a few new concepts here but again nothing too complicated. We’re selecting the same link with class more-link and applying the same mouseover function. This time we’re using this. In jQuery, this stands for the element you currently have selected. In this case, it’s the link with class more-link. Then we use the parent method which finds the element that the link is inside of. For example if you HTML looks like this:
1 2 3 |
<div class="container"> <a class="more-link" href="#">Click Me</a> </div> |
The parent element to the <a> element would be the div with class container. Because the link is INSIDE of that div, the link is a child and the div the parent. Next we use the CSS method to apply a background color of blue to the parent div. And below that we use the mouseout function to remove the background color when you hover off of the link. Test it out and you should see the parent element that contains your link change to blue when you hover over the link. And back to transparent when you hover off.
I realize none of these example are that useful. Again, my main goal is to show just how easy it is to use jQuery and to hopefully encourage others to give it a shot. Play around with the examples and try different methods which can all be found in the jQuery documentation. If you really want to learn jQuery, I highly recommend this book: JavaScript and JQuery: Interactive Front-End Web Development.
My goal is to use this tutorial as a spring board for some useful, in-depth tutorials that apply directly to the Divi theme. If you’re interested, please sign up for my Weekly Tweaks newsletter to receive future Divi jQuery tutorials.
11 Comments
Thanx. That was very useful. I’ve ordered “JavaScript and JQuery: Interactive Front-End Web Development.” Thank you for the recommendation 😉
April 19, 2016
Great! I find myself coming back to it for reference. Especially the Ajax section
May 19, 2016
Been trying to figure this out haha, thanks! WordPress and Divi are relatively new to me.
August 14, 2016
Looking forward to learning from you.
October 4, 2016
This site was… how do you say it? Relevant!!
Finally I have found something which helped me.
Cheers!
December 19, 2017
Your style is very unique compared to other people I’ve read stuff from.
Many thanks for posting when you’ve got the opportunity, Guess I will just bookmark this blog.
December 21, 2018
Please let me know if you’re looking for a writer for your site.
You have some really great articles and I believe
I would be a good asset. If you ever want to take some of the load off, I’d
love to write some material for your blog in exchange for a link back to mine.
Please send me an email if interested. Thank you!
December 13, 2019
It’s impressive that you are getting ideas from this piece of writing as well
as from our dialogue made here.
April 7, 2020
Greetings! Quick question that’s totally off topic. Do you know how to make your site mobile friendly?
My weblog looks weird when viewing from my iphone 4. I’m trying
to find a theme or plugin that might be able to correct this issue.
If you have any suggestions, please share. Thanks!
May 4, 2020
whoah this weblog is fantastic i really like reading your posts.
Stay up the good work! You know, many people are hunting around for this information, you can aid them greatly.
January 22, 2021
Wow, that’s what I was looking for, what a material!
present here at this weblog, thanks admin of this site.
January 28, 2021