jquery logo on dark background

My Favorite jQuery Functions

I have been using jQuery since about 2013. Before then I barley used JavaScript. Learning jQuery taught me how powerful JavaScript can be and because of that I spent countless hours , for several months, learning and experimenting with this framework.

Since then, a plethora of other JavaScript libraries have been developed. As I began studying and using these other frameworks, like React and Vue, I find my self using jQuery less. I thought it would be a good idea to document some of my favorite and most used jQuery functions.

Below you will find a list of my favorite and most used jQuery Functions.

Disclaimer: This list is not in order from most to least favorite. Also, this does not include any jQueryUI or jQueryMobile functions either. The reason I decided to exclude those functions is because I believe that the functions in those frameworks tend to be equally important to one another.


ready()

This function I have probably used in every single jQuery application I created in my life. Prior to this, I would include multiple JavaScript files on my web pages. typically one in the <head></head> and another before the end of the “</body>” tag of my web pages. I would use that endbody.js file to interact with the DOM of my applications. The ready() function in jQuery made it easier to include all my JavaScript code in one main.js file that I can include in the <head></head> of my pages. For that reason, ready() has made this list!

$( document ).ready(function() {
  // add javascript here
});

toggleClass()

The toggleClass() function allows me to get the most out of my css style sheets. I can do tons of dynamic styling by using this function to add and remove a classes from DOM elements. For example I can add animations, hide and show elements, and more commonly dynamically change the look/style of any DOM element.

I have also included this in almost every jQuery application I have created.

$( "element" ).toggleClass( "newclass" );

on()

The on() function is my go to for event binding . I prefer this function over using functions like click() or mouseenter(). I have also included this in almost every jQuery application I have created.

$( "element" ).on( "click", function() {
  // code goes here.
});

find()

One of my most favorite aspects of jQuery is how easy it is to move around, or traverse, the DOM. The find() is be big reason why and maybe my most used JQuery function.

$( "ul" ).find( "li").css( "list-style", "none" );

each()

The find() function and each() function tend to come hand in hand. I have probably included this in almost every jQuery application I’ve created.

$( "element" ).each(function( index ) {
  console.log( index + ": " + $( this ).text() );
});

ajax()

Making Ajax requests also became so much easier for me with jQuery because of this function. I learned how to make server requests using this function before I learned how to do it in pure JavaScript. For that reason this maybe the most favorite and most powerful jQuery function I use.

$.ajax({
  url: "test.html",
  cache: false
})
  .done(function( html ) {
    $( "#results" ).append( html );
  });
$.ajax({
  method: "POST",
  url: "sample.php",
  data: { name: "John", location: "Boston" }
})
  .done(function( msg ) {
    $( "#message-box" ).append( "Data Saved: " + msg );
  });

append()

As used in the above example, append() is a very useful function when you want to add new content to your web page. I use this function often and prefer it over the pure JavaScript function of innerHTML

$("element").append("status + ": " + msg.");

jQuery() or $()

Last but not least is the jQuery() function. I love the dollar sign, $(), alternative function! This function made the learning curve into jQuery easy. It was easy because it allowed me to use my knowledge of css in my Js code. Another great characteristic of the $() function is it is extendable. I think these two things are what made jQuery so powerful.

$("element").append("status + ": " + msg.");

Written by 

The Armani.

Featured Posts

Leave a Reply