What is it?
JQuery is a library of Javascript functions which are great for working actions on the content of your site. Jquery can add or remove content, make it change size, postion, even animate them. Most popular popups, slide-ins and other similar tools all use Jquery.
Step 1. – Preparation
Jquery is a javascript library which makes many actions easier for style changes to your website. It also covers most of the issues between the needs of different browsers.
The hardest part is setting the system up. You need two main things to prepare for using jquery. The first is to tell your system to include the jquery library for you. If you are going to use the code on your WordPress site, then you can ask WordPress to install Jquery for you. It probably already is.
The second thing you need is somewhere to save your javascript code. You can write it into a javascript file and then ask wordpress to include it, or you can include it by using a pluing like our twomin plugin.
When you write the code there is one other issue to be aware of. WordPress does not allow you to use the $ shorthand for Jquery, which is what you will see most exmaples and trainings written with. There are two ways round this problem. The first is to use ‘jQuery’ instead of ‘$’, which can be hard work, or, wrap your code in a protecting function.
jQuery(document).ready(function( $ ) {
// you code goes here
});
You should make sure all code uses a document ready function, becuase this ensures the web page is loaded before you try and perform any jquery on it. Which makes sense really, as you can not style an image tag, till the image tag has been written out!
step 2: Targetting
We can now use a library of jQuery functions to change the web page that has been renderred. We will just use a few of these to start with, so you can get the idea.
We always first need to identify our target for the code. We can do this by selecting code by its element, id or class. You may even need to select with a succession of elements, and may return multiple items, just in the same way we identify things in CSS.
So we could change the background color of an element, or perhaps more sensible, attach a class that changes the color. In this example I will turn all the box contents to red, and dissappear the first block and then make it come back over 500 milliseconds. You can see this incodeview.
[codepen_embed height=”265″ theme_id=”0″ slug_hash=”GNgJOz” default_tab=”html,result” user=”wpbusinessclub”]See the Pen <a href=’https://codepen.io/wpbusinessclub/pen/GNgJOz/’>Jquery in 5 steps – #1</a> by john (<a href=’http://codepen.io/wpbusinessclub’>@wpbusinessclub</a>) on <a href=’http://codepen.io’>CodePen</a>.[/codepen_embed]
step 3 – Capture on an action
You are probably quite impressed how easy that was to code and also wonder what the use was. CSS could do almost the same thing.
But jQuery is an event driven applicaiton. We can have those acitons wait for a particular event. The events include a key press and mouse click, or mouse over. What is more, they are attached to the element on which the aciton applies.
So clicking on one button can be different than clicking on another. And to set this up is almsot as easy as the previous step.
$('#mytarg').on('click',function() {
// action on the click
});
So what could you use this for;
- Have a search bar open up after press the search icon
- have a signup form appear when they click on signup now!
- Have faw answers appear when clicked on
- Make a more powerful
See this example in codeview, where I have added some buttons. i then use the id of the button press and use that identify which box i will change.
[codepen_embed height=”265″ theme_id=”0″ slug_hash=”GNgpxZ” default_tab=”html,result” user=”wpbusinessclub”]See the Pen <a href=’https://codepen.io/wpbusinessclub/pen/GNgpxZ/’>Jquery in 3 steps – #3</a> by john (<a href=’http://codepen.io/wpbusinessclub’>@wpbusinessclub</a>) on <a href=’http://codepen.io’>CodePen</a>.[/codepen_embed]
