15 helpful jQuery methods and functions

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.

 

  1. 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 
  2. 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 
  3. 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
    }); 
  4. 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’);
    }); 
  5. 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’);
    }); 
  6. 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 
  7. 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'); 
  8. 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 
  9. Element’s HTML

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

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

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

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

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

    $("#elemID").animate({ opacity: 0.5 }, 800,function(){
    alert("I’m being animated");
    }); 
  12. 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 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 
  13. 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
    });
  14. 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. 
  15. append() and prepend()

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

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