Most useful jQuery functions

In this article, I have provided list of most commonly used jQuery functions.


List of jQuery functions:


1. 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("This is the new html
");



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");


12. each() jQuery API function:

$("#DivID").each(function(index, value) {
    console.log('DivID' + index + ':' + $(this).attr('id'));
});


Here is the list of most commonly used jQuery API functions:

find(): Selects elements based on the provided selector string
hide(): Hides an element if it was visible
show(): Shows an element if it was hidden
html(): Gets or sets an inner HTML of an element
append() Injects an element into the DOM after the selected element
prepend() Injects an element into the DOM before the selected element
on(): Attaches an event listener to an element
off() Detaches an event listener from an element
css(): Gets or sets the style attribute value of an element
attr() Gets or sets any attribute of an element
val(): Gets or sets the value attribute of an element
text(): Gets the combined text of an element and its children
each(): Iterates over a set of matched elements