If you're new to jQuery, you should bookmark this page now. We have put together a simplified list of the most commonly used jQuery functions for your website along with examples of how to use them.
Note: In these examples, you'll see "1000" - this is referring to the speed of the animation. This can be replaced with any number or you can also use "slow", "fast" or leave blank.
Note: In these examples, you'll see "#DivID" - this can be substituted for any one of the jQuery selectors for different elements. It is not restricted to just divs.
So let's jump right in!
- Commonly Used jQuery Selectors
- jQuery Toggle, Show and Hide Functions
- jQuery Slide Functions
- jQuery Fade Functions
- jQuery Animate Functions
- Add & Remove CSS Classes
- Get & Set Textbox Values
- Get & Set Element's HTML
- Get & Set Element's Text
- Get & Set Element's Width & Height
- EXTRA: Change Element's CSS Property
1. Commonly Used jQuery Selectors:
//--- COMMON JQUERY SELECTORS ---//
// get element by id
$("#ElementID").whatever();
// get element by css class
$(".ClassName").whatever();
// get elements where id contains a string
$("[id*='value']").whatever();
// get elements where id starts with a string
$("[id^='value']").whatever();
// get elements where id ends with a string
$("[id$='value']").whatever();
// get all elements of certain type (can use "p", "a", "div" - any html tag)
$("div").whatever();
2. jQuery Toggle, Show and Hide Functions:
//--- JQUERY TOGGLE/SHOW/HIDE ---//
// toggle hide/show of an element
$("#DivID").toggle(1000);
// do something when animation is complete
$("#DivID").toggle(1000, function () {
alert("Toggle Complete");
});
// hide an element
$("#DivID").hide(1000);
// do something when animation is complete
$("#DivID").hide(1000, function () {
alert("Hide Complete");
});
// show an element
$("#DivID").show(1000);
// do something when animation is complete
$("#DivID").show(1000, function () {
alert("Show Complete");
});
3. jQuery Slide Functions:
//--- JQUERY SLIDE - SLIDE AN ELEMENT IN AND OUT ---//
// toggle slide up and down
$("#DivID").slideToggle(1000);
// do something when animation complete
$("#DivID").slideToggle(1000, function () {
alert("Slide Toggle Complete");
});
// slide up
$("#DivID").slideUp(1000);
// do something when animation is complete
$("#DivID").slideUp(1000, function () {
alert("Slide Up Complete");
});
// slide down
$("#DivID").slideDown(1000);
// do something when animation is complete
$("#DivID").slideDown(1000, function () {
alert("Slide Down Complete");
});
4. jQuery Fade Functions:
//--- JQUERY FADE - FADE AN ELEMENT IN, OUT & TO ---//
// fade in
$("#DivID").fadeIn(1000);
// do something when animation complete
$("#DivID").fadeIn(1000, function () {
alert("Fade In Complete");
});
// fade out
$("#DivID").fadeOut(1000);
// do something when animation is complete
$("#DivID").fadeOut(1000, function () {
alert("Fade Out Complete");
});
// fade to (fades to specified opacity)
$("#DivID").fadeTo(1000, 0.25);
// do something when animation is complete
$("#DivID").fadeTo(1000, 0.25, function () {
alert("Fade To Complete");
});
5. jQuery Animate Functions:
//--- ANIMATE (EXAMPLE USES OPACITY, BUT CAN USE ANY CSS PROPERTY. ---//
//--- NOTE SOME MY REQUIRE THE USE OF A PLUGIN SUCH AS JQUERY COLOR ANIMATION PLUGIN. ---//
$("#DivID").animate({ opacity: 0.25 }, 1000);
// do something when animation complete
$("#DivID").animate({ opacity: 0.25 }, 1000, function () {
alert("Opacity Animation Complete");
});
6. Add & Remove CSS Classes:
//--- ADD & REMOVE CSS CLASSES ---///
// add css class
$("#DivID").addClass("newclassname");
// remove css class
$("#DivID").removeClass("classname");
// add & remove class together
$("#DivID").removeClass("classname").addClass("newclassname");
// add & remove multiple classes
$("#DivID").removeClass("classname classname2").addClass("newclassname newclassname2");
7. Get & Set Textbox Values:
//--- GET & SET TEXTBOX VALUE ---//
//--- CAN ALSO BE USED ON ANY OTHER ELEMENT THAT HAS A VALUE PROPERTY ---//
// get the value of a textbox
var TextboxValue = $("#TextboxID").val();
// set the value of a textbox
$("#TextboxID").val("New Textbox Value Here");
8. Get & Set Element's HTML:
//--- GET & SET HTML OF ELEMENT ---//
// get element html
var DivHTML = $("#DivID").html();
// set element html
$("#DivID").html("<p>This is the new html</p>");
9. Get & Set Element's Text:
//--- GET & SET TEXT OF ELEMENT ---//
// get text of element
var DivText = $("#DivID").text();
// set text of element
$("#DivID").text("This is the new text.");
10. Get & Set Element's Width & Height:
//--- GET & SET ELEMENT'S WIDTH & HEIGHT
// get element height
var ElementHeight = $("#DivID").height();
// set element height
$("#DivID").height(300);
// get element width
var ElementWidth = $("#DivID").width();
// set element width
$("#DivID").width(600);
11. EXTRA: Change Element's CSS Property
//--- CHANGE AN ELEMENT'S CSS PROPERTY ---//
$("#DivID").css("background-color", "#000");
$("#DivID").css("border", "solid 2px #ff0000");
So there you have it! If you see any we missed, let us know! If we think it would be a good addition for this article, we'll definitely add it!
Good Luck!