jQuery Tutorials and Examples

JSONP or “JSON with padding” provides a method to request data from a server having a different domain. Typical web browser prohibit cross domain request due to same read more

Javascript code snippet to submit a form using POST to server and process returned data. Here when submit button is clicked we serialize whole form read more

jQuery .load() can be used to make an Ajax call (GET or POST) and load the results into an element by settings result into its read more

jQuery method jQuery.getScript() can be used as a shorthand to load a script given its url. This by default disables cache by appending extra random read more

To post a form using jQuery Ajax, we can directly call jQuery .ajax() methods passing form data. The form data can be constructed using FormData. read more

It is sometimes useful to change color of table cells based on values for better presentation and readability. Here is quick code snippet to do read more

To check if an element is visible in window viewport after vertical scrolling the following approach can be used using jQuery. Note that this approach read more

Sometimes we need to display a message and then fade it out. jQuery fadeOut will make an element fadeOut (by animating css property opacity) will read more

Fitvids (github link) is an open source javascript library built by Chris Coyier and Paravel which makes the width of videos in a web page fluid. To be read more

jQuery code snippet to get class list of an element. We are using jQuery attr(“class”) to get the class list as string and then splitting read more

jQuery toggleClass can be used to toggle a class (add or remove depending upon current state) in an element (or set of matched elements). In read more

To make a div stick at top on scroll we can use css position property fixed. Here are the steps: Find initial position of div read more

We often need to display a table with alternate rows having different colors. We can do it either using CSS3 nth-child selector or using jQuery. read more

Right click can be disable by attaching a even listener to contextmenu event. It can be done using jQuery or vanilla Javascript. disable right click read more

jQuery can be used to handle these events on an input text field. change (when text input field changes and loses focus) $(‘input#field1’).on(‘change’, function(evt) { read more

Sometime we need to manually trigger a click event on an element (e.g. button). Here are Javascript and jQuery code snippets for this. This is read more

Jquery can be used to set content on and element (div, etc.) using text() and html() methods. Methods text(content) will first convert the content using read more

jQuery when used with selectors like element tag, class, id can potentially return a jQuery object with no element in it. Since jQuery contains number read more

To get total DOM elements including children use the following code (this includes root html element also) $(‘*’).length To get all DOM elements in body read more

jQuery .text() method sets text for an element (after taking care of html entities) and .html() gets the html for a dom element. Combining these read more

Sometime we need to read and modify same domain iframe content using jQuery. Here is code snippet which will modify the content of an iframe.

Sometimes we need to create inline iframe with content generate from jQuery/Javascript. This iframe will not have src attribute. One use case is to run read more

jQuery code to access select element’s selected index, selected value and selected option node text.

jQuery can be used to access checkbox value using jQuery.attr(“value”) and it checked state using jQuery.prop(“checked”). Note that we can not use jQuery.attr() for checked read more

jQuery when applied on a css selector, returns a wrapper object which contains 0 or more javascript objects. To get the javascript object from it, read more

to get jQuery version info the variable jQuery.fn.jquery (or $.fn.jquery if $ is being used for jQuery object) can be used. Some examples. jQuery version read more

jQuery .append() can be used to add text to an div. The text can contains tags inside it.

jQuery slideDown, slideUp, slideToggle can be used to display, hide or toggle and element in sliding motion. .slideDown( [duration ] [, complete_callback ] ) .slideDown( read more

jQuery ui can be used to make an element draggable/movable by mouse drag. Note that it does not work with touch events. Syntax: // After read more

jQuery ui can be used to create a slider with updated value also getting displayed. Syntax: Example – slider and input text box – one read more

jQuery ui can be used to create a slider with updated value getting displayed in an input text box and any update in text box read more