jQuery has many predefined important and useful functions to manipulate the DOM, perform animations and dealing with events easily. Let's browse some useful functions which often comes handy.

jQuery selectors

$("div").anything() // get all the element of a particular type 

$("#elemID").anything() // get element by id 

$(".className").anything() // get element by css class 

$("{id*=’val’}").anything() // get element by id which contains a string 

$(“{id^=’val’}").anything() // get element by id which starts with a string 

$("{id$=’val’}").anything() // get element by id where id ends with a string

 

jQuery Pseudo-Selectors

$(":parent") // all elements with child nodes 

$(":header") // all header elements h1 - h6 

$(":empty") // all elements with no child or text 

$(":contains(something)") // all elements with text "something" 

$("li:even") // all elements with even index li element 

$("li:odd") // all elements with odd index li element 

$("li:gt(2)") // all li elements with index greater than the specified
 
$("li:lt(2)") // all li elements with index less than the specified

 

jQuery show, hide and toggle functions

$("#elemID").hide() // hide the element 

$("#elemID").show() // show the element 

$("#elemID").toggle() // toggle show/hide the element 

$("#elemID").toggle(500) // toggle show/hide the element with transition 

$("#elemID").toggle(500,function(){
        alert("me was toggled"); // toggle and do something when animation is complete
}); 

$("#elemID").show(500,function(){
        alert("showed"); // show and do something when animation is complete
}); 

$("#elemID").hide(500,function(){
        alert("hidden"); // hide and do something when animation is complete
});

 

jQuery fade functions

$("#elemID").fadeIn(800); // fade in show 

$("#elemID").fadeOut(800); // fade out hide 

$("#elemID").fadeTo(800,0.5); // fade to specific opacity 

$("#elemID").fadeTo(800,0.5,function(){
        // fade to specific opacity and do something when animation is complete
        alert(‘me was faded to 0.5 opacity’);
});

$("#elemID").fadeIn(800,function(){
        // faded In and do something when animation is complete
        alert(‘me was faded in’);
});

$(“#elemID”).fadeOut(800,function(){
        // faded Out and do something when animation is complete
        alert(‘me was faded out’);
});

 

jQuery slide functions

$("#elemID").slideUp(800); // Slide Up 

$("#elemID").slideDown(800); // Slide Down 

$("#elemID").slideToggle(800); // Slide Toggle up/down 

$("#elemID").slideUp(800,function(){
         // slide up and do something when animation is complete
         alert(‘me was slide up’);
});

$("#elemID").slideDown(800,function(){
         // slide down and do something when animation is complete
         alert(‘me was slide down’);
});

$("#elemID").slideToggle(800,function(){
         // slide toggle and do something when animation is complete
         alert(‘me was slide toggled’);
});

 

jQuery add, remove and toggle CSS classes

$("#elemID").addClass(‘someClassName’); // add class to the element 

$("#elemID").removeClass(‘someClassName’); // remove class from the element

$("#elemID").toggleClass(‘someClassName’); // toggle – add/remove class to the element

$("#elemID").removeClass(‘someClassName’).addClass(‘newClass’); // remove and add classes together to the element

 

Change element’s CSS property

$("#elemID").css('font-size','18px'); 

$("#elemID").css('display','none'); 

$("#elemID").css('background','red'); 

$("#elemID").css('width','200px'); 

$("#elemID").css('opacity','0.6');

 

Element’s width and height

var width = $("#elemID").width(); // get the element’s width 

var height = $("#elemID").height(); // get the element’s height $("#elemID").width(500); // set the element’s width 

$("#elemID").height(200); // set the element’s height

 

Element’s HTML

var htmlContent = $("#elemID").html(); // get the element’s html 

$("#elemID").html("Hello world!"); // set the element’s html

 

Textbox values

var textVal = $("#inputID").val(); // get the value of textbox 

$("#inputID").val("Hello world!"); // set the value of textbox

 

jQuery Animate

$("#elemID").animate({ opacity: 0.5 }, 800); 

$("#elemID").animate({ opacity: 0.5 }, 800,function(){
        alert("I’m being animated");
});

 

data() and removeData()

If you wanted to store some data about an element then you can do it easily with data() method, which can set and get data to and from the element.

$("#elemID").data("dataKey","value"); // set the data having some value with a key 

// set multiple data
$("#elemID").data({keyOne: "dataOne", keyTwo: "dataTow"});  

var data = $("#elemID").data("dataKey"); // get the data by key 

$("#elemID").removeData("dataKey"); // remove the data

 

preventDefault()

The .preventDefault() function is used to stop element with a default action from firing like, form submit buttons, hyperlinks, keyboard shortcuts, etc. The function stops the hyperlink from going to its destination (the href). It’s very useful for stopping those default actions and running your custom JavaScript actions instead.

$("a").click(function(event){ // take the event
         event.preventDefault(); // prevent default behaviour
         alert("I was clicked"); // do something
});

 

delay()

To control the sequence of animations, we can use the delay() method to control the animation for a period of time.

$('elemID').show().delay(1500).hide(); // div will be visible for 1.5 seconds before hiding.

 

append() and prepend()

Using above function we can append/ prepend content on the desired place easily.

// selector can be anything like class or ID or element
$('selector').append(“Hello World!”);
#jQuery