jQuery Snippets

In this post, I am going to show some of the frequently used jQuery snippets in the real time in an easy way.

What is jQuery?
jQuery is a library of Javascript which allows the users to traverse the HTML DOM structure, animate things easily, event management, AJAX much simpler with easy-to-use API that works fine over multitude of browsers.

What is the difference between Library and Framework?
Simply put library means the coding to be used to make your program work is already done. You just need to call them as an inbuilt functions to achieve what you need 
i.e., the user don't have to write any additional programming to create any constructs rather he just needs to put his logical thinking forward for instance jQuery.

Where as Framework means a code skeleton is provided to the users on top of which we can write our coding to make it work. Here we need to write our own functions, or any other constructs that we actually need to make our program work.

How to use jQuery?
Before starting we need to make sure that we have a fully working jQuery library which is available for free from here.

At the time of this writing the latest release was 2.1.1 (stable). Click on any of the link whether minified or uncompressed (I prefer minified as the unwanted spaces are removed from the library which will be light weight). The link opens with a name 

jquery-2.1.1.min.js. In your project folder create a folder to save this file with the same name or different name and include it in your HTML file.

Snippet 1: Form Validation

In this snippet I am going to show how to validate a form having some HTML elements. I am having 3 registration form fields like NAME, AGE and MAIL ID and I have made all the fields as mandatory without which values the form doesn't submit. 

You can find a working example in one of my code pen here.

In this pen, I have used a button click event to trigger the code. That is on click of a submit button I am validating the form. I am initially putting all the ID values 'nametxt','mailtxt','agetxt' of all the HTML form elements into a jQuery array, just make sure the names are same or else the code wont work. 

There can be any number of HTML elements just make sure the elements ID value should be inside the array.

Then I am traversing the array using a jQuery FOR loop and checking whether the forms hold any value. If they don't have any value in them then I am setting a flag variable to true. If the control ever came in and the flag was true then the form will never submit.

Snippet 2: Enabling a button on checkbox check

This snippet will be helpful if you want to enable one form element only when some other action has been fulfilled. For instance here, I am enabling a button only when a checkbox is checked. While this example can be changed to your requirements, like the checkbox can be a radio button too.

You can find a working example in one of my code pen here.

In this example, as I said, I am enabling a button only when a checkbox is checked and if you uncheck it then the button would be disabled again.

var chkbtn = $("input[type='checkbox']") here we are just copying the reference inside a variable to make the code more compact. If you want to find a particular checkbox then you can make use id or a class attribute. Since I am having 2 checkboxes in my form I am using the type attribute here. 

var sbtbtn = $("input[type='button']") this is similar to the above code, to store the element reference in the variable.

Here I am using an on click event on the checkbox and I am checking whether it is checked or not. If checked I am enabling the button as shown below.

sbtbtn.attr("disabled",   !chkbtn.is(":checked"));

The sbtbtn is nothing but the button reference we took earlier and I am using attr function to access the attribute of the button. The "disabled" keyword will actually disable the button after traversing the HTML DOM. 

The !chkbtn.is(":checked") is used to keep a track of whether the checkbox was checked or not.

Snippet 3: Toggling content using jQuery

If there is anything on a web page you need to toggle then you can make use of animate() function. 

You can find a working example of this in one of my pen here. Here I am toggling contents in between a div tag. 

animate() function takes 4 arguments namely styles, speed, easing and a callback function.

The styles argument can be an array with more than one value. 
In my example in the pen,

animate({opacity: "toggle", height: "toggle", padding: "toggle"}, speed, easing, callback);

The content inside the curly braces are the styles parameter in which I have used opacity, height and padding where as you can use many more properties that can be animated such as background position, margins, max-height, min-height, max-width, min-width, font size, bottom, top, left, right, line height and so on..

The parameter speed is optional where we can specify the speed of the animation and it defaults to 400 milliseconds.

The parameter easing is optional where we can specify the speed of the animation in different point of time. an the default value is swing. Possible values are swing and linear. 

• swing - moves slower at the beginning/end, but faster in the middle.
• linear - moves in a constant speed.

The callback parameter is the function to be executed after the animation completes.

In the example I have used the animate() inside a jQuery function as a good programming practice. In future if there is any syntax changes for the animate(), then we do not have to change it all over the program instead we can change it at one place and reflect the changes every where.

Finally on click of a button I am calling the function on the div tag as shown below,

                $('#toggbtn').click(function(){  -> on click of a button.
$('#tog').slideFadeToggle();  -> calling animate function.

});