In your scripts file, you should always start with the following:
|
1 2 3 |
$(document).ready(function(){ //Everything else should go in here... }); |
This makes sure your page is fully loaded before any further interaction takes place.
Selectors
Selectors are how you select what element on your page that you want to interact with (element referring to the part of you html, an image for example). This interaction might be a click, hover or something else. You can select elements in a number of ways, most commonly you’ll use the element based on its class or id.
Selecting by class
|
1 |
$(".my-class") |
Selecting by id
|
1 |
$("#some-id") |
There are a number of ways that you can select elements, refer to this link for some more examples: jQuery Selectors
Events
Once you’ve selected your element, the next thing to do is bind an event to it. An “event” is basically, what user interaction do you want to respond to. The most common events are click and hover events. After you define the event you need to provide a function that will happen when that event occurs. which looks like this:
|
1 2 3 |
$("#some-id").click(function() { //Whatever you want to happen when a user clicks on this element... }); |
You can find more events here: jQuery Events
What happens next?
The body of the function (that is what occurs on the provided event) is completely up to you. This may range from a single line to show or hide something on the page, to a far more complex function spanning many many lines.
To simply hide something, you can do the following:
|
1 2 3 |
$("#some-id").click(function() { $("#another-id").hide(); }); |
Some of the most basic built-in functionality in jQuery are:
|
1 2 3 4 5 6 7 8 9 10 11 |
//Show or hide an element .show(); .hide(); //Show hide an element with a slide animation .slideUp(); .slideDown(); //Show hide an element with a fade animation .fadeIn(); .fadeOut(); |
There are also counterparts to each of these which will show it if it’s hidden and hide it if it’s showing:
|
1 2 3 |
.toggle(); .slideToggle(); .fadeToggle(); |
Changing Classes
jQuery makes it easy to change the css classes on our elements in a number of ways.
We can add or add a class to an element like this:
|
1 |
$("#some-id").addClass("my-class"); |
And remove one like this:
|
1 |
$("#some-id").removeClass("my-class"); |
There is also a toggle class function to remove a class if it is on the object and add it if it is:
|
1 |
$("#some-id").toggleClass("my-class"); |