jQuery Reference

Method

Description

Example

$.ajax()

Performs an AJAX request with the specified settings.

$.ajax({ url: 'example.json', method: 'GET', success: function(data) { console.log(data); } });

.add()

Adds elements to the set of matched elements.

$('#element1').add('#element2');

.addClass(className)

Adds a class to the selected elements.

$('#myElement').addClass('highlight');

.after(content)

Inserts content after the selected elements.

$('#myElement').after('<div>New content</div>');

.ajaxComplete(handler)

Specifies a function to be executed when an AJAX request completes.

$(document).ajaxComplete(function() { console.log('AJAX request completed.'); });

.ajaxError(handler)

Specifies a function to be executed when an AJAX request fails.

$(document).ajaxError(function(event, jqxhr, settings, thrownError) { console.log('AJAX request failed.'); });

.ajaxSend(handler)

Specifies a function to be executed before an AJAX request is sent.

$(document).ajaxSend(function(event, jqxhr, settings) { console.log('Sending AJAX request.'); });

.ajaxStart()

Registers a handler to be called when the first AJAX request begins.

$(document).ajaxStart(function() { console.log('First AJAX request started.'); });

.ajaxStop()

Registers a handler to be called when all AJAX requests have completed.

$(document).ajaxStop(function() { console.log('All AJAX requests completed.'); });

.ajaxSuccess(handler)

Specifies a function to be executed when an AJAX request succeeds.

$(document).ajaxSuccess(function(event, jqxhr, settings) { console.log('AJAX request succeeded.'); });

.all()

Selects all elements.

$('*');

.before(content)

Inserts content before the selected elements.

$('#myElement').before('

Before content
');

.blur(handler)

Binds a function to the blur event.

$('#myInput').blur(function() { console.log('Input blurred.'); });

.bind(event, handler)

Attaches an event handler function for one or more events to the selected elements.

$('#myElement').bind('click', function() { console.log('Element clicked.'); });

.change(handler)

Binds a function to the change event.

$('#myInput').change(function() { console.log('Input value changed.'); });

.children([selector])

Gets the children of each element in the set of matched elements, optionally filtered by a selector.

$('#parentElement').children('.childClass');

.click(handler)

Binds a function to the click event.

$('#myButton').click(function() { console.log('Button clicked.'); });

.clone(withDataAndEvents)

Creates a deep copy of the set of matched elements.

var clonedElement = $('#originalElement').clone(true);

.closest(selector)

For each element in the set, gets the first element that matches the selector by testing the element itself and traversing up through its ancestors in the DOM tree.

$('#myElement').closest('.parentElement');

.contents()

Gets the children of each element in the set, including text and comment nodes.

$('#myElement').contents();

.context()

The DOM node context originally passed to the jQuery() function.

var contextNode = $('#myElement').context;

.css(property, value)

Gets the computed style properties for the first element in the set of matched elements or sets one or more CSS properties for every matched element.

$('#myElement').css('color', 'red');

.data(key, value)

Store arbitrary data associated with the matched elements or return the value at the named data store for the first element in the set of matched elements.

$('#myElement').data('key', 'value');

.dblclick(handler)

Binds a function to the dblclick event.

$('#myElement').dblclick(function() { console.log('Double-clicked.'); });

.deferred()

Return a Deferred object to observe when all actions of a certain type bound to the collection, queued or not, have finished.

var deferredObject = $('#myElement').deferred();

.delay(duration, queueName)

Set a timer to delay execution of subsequent items in the queue.

$('#myElement').delay(1000).fadeOut();

.detach()

Remove the set of matched elements from the DOM.

$('#myElement').detach();

.die([eventType], [handler])

Remove event handlers previously attached using .live() from the elements.

$('#myElement').die('click', clickHandler);

.each(callback)

Iterate over a jQuery object, executing a function for each matched element.

$('li').each(function(index, element) { console.log(index, element); });

.empty()

Remove all child nodes of the set of matched elements from the DOM.

$('#myContainer').empty();

.end()

End the most recent filtering operation in the current chain and return the set of matched elements to its previous state.

$('#myElement').find('.nestedElement').end();

.eq(index)

Reduce the set of matched elements to the one at the specified index.

$('#myList li').eq(2).css('color', 'blue');

.fadeTo(duration, opacity)

Adjust the opacity of the elements in the set over a given duration.

$('#myElement').fadeTo(500, 0.5);

.fadeIn(duration, easing, callback)

Display the matched elements by fading them to opaque.

$('#myElement').fadeIn(1000);

.fadeOut(duration, easing, callback)

Hide the matched elements by fading them to transparent.

$('#myElement').fadeOut(500);

.fadeToggle(duration, easing, callback)

Toggle between fadeIn() and fadeOut() for the matched elements.

$('#myElement').fadeToggle(300);

.filter(selector)

Reduce the set of matched elements to those that match the selector or pass the function's test.

$('li').filter('.selected').css('background-color', 'yellow');

.find(selector)

Get the descendants of each element in the current set of matched elements, filtered by a selector, jQuery object, or element.

$('#myElement').find('p').css('color', 'blue');

.finish([queue])

Stop the currently-running animations, remove all queued animations, and complete all animations for the matched elements.

$('#myElement').finish();

.first()

Reduce the set of matched elements to the first in the set.

$('div').first().addClass('firstDiv');

.focus()

Bind an event handler to the "focus" JavaScript event, or trigger that event on an element.

$('#myInput').focus();

.focusin(handler)

Attach a handler to an event for the elements. The handler is executed at the beginning of the event.

$('#myElement').focusin(function() { console.log('Element focused.'); });

.focusout(handler)

Attach a handler to an event for the elements. The handler is executed when the element loses focus.

$('#myElement').focusout(function() { console.log('Element focus lost.'); });

.get([index])

Retrieve the DOM elements matched by the jQuery object.

var thirdElement = $('li').get(2);

.getScript(url, success)

Load a JavaScript file from the server using a GET HTTP request, then execute it.

$.getScript('script.js', function() { console.log('Script loaded.'); });

.has(selector)

Reduce the set of matched elements to those that have a descendant that matches the selector or DOM element.

$('div').has('p').addClass('hasParagraph');

.hasClass(className)

Determine whether any of the matched elements are assigned the given class.

if ($('#myElement').hasClass('active')) { /* Do something */ }

.height(value)

Get the current computed height for the first element in the set of matched elements or set the height of every matched element.

var elementHeight = $('#myElement').height();

.hide(duration, easing, callback)

Hide the matched elements.

$('#myElement').hide(300);

.hover(handlerIn, handlerOut)

Bind two handlers to the matched elements to be executed when the mouse pointer enters and leaves the elements.

$('#myElement').hover(function() { console.log('Mouse entered.'); }, function() { console.log('Mouse left.'); });

$.holdReady(hold)

Holds or releases the execution of jQuery's ready event.

$.holdReady(true); // Hold

.index([selector])

Search for a given element from among the matched elements and return its index within the matched set.

var index = $('#myElement').index();

.innerHeight()

Get the current computed inner height (including padding but not border) for the first element in the set of matched elements.

var innerHeight = $('#myElement').innerHeight();

.innerWidth()

Get the current computed inner width (including padding but not border) for the first element in the set of matched elements.

var innerWidth = $('#myElement').innerWidth();

.insertAfter(target)

Insert every element in the set of matched elements after the target.

$('#myElement').insertAfter('#targetElement');

.insertBefore(target)

Insert every element in the set of matched elements before the target.

$('#myElement').insertBefore('#targetElement');

.is(selector)

Check the current matched set of elements against a selector, element, or jQuery object and return true if at least one of these elements matches the given arguments.

var isChecked = $('#myCheckbox').is(':checked');

$.getJSON(url, data, success)

Load JSON-encoded data from the server using a GET HTTP request.

$.getJSON('data.json', function(data) { console.log(data); });

$.getScript(url, success)

Load a JavaScript file from the server using a GET HTTP request, then execute it.

$.getScript('script.js', function() { console.log('Script loaded.'); });

.jquery

A property containing the version of jQuery.

var version = $.jquery;

.keydown(handler)

Bind an event handler to the "keydown" JavaScript event.

$('#myInput').keydown(function(event) { console.log('Key pressed:', event.keyCode); });

.keypress(handler)

Bind an event handler to the "keypress" JavaScript event.

$('#myInput').keypress(function(event) { console.log('Key pressed:', event.charCode); });

.keyup(handler)

Bind an event handler to the "keyup" JavaScript event.

$('#myInput').keyup(function(event) { console.log('Key released:', event.keyCode); });

.last()

Reduce the set of matched elements to the final one in the set.

$('li').last().addClass('lastItem');

.length

The number of elements in the jQuery object.

var itemCount = $('li').length;

.load(url, data, complete)

Load data from the server and place it into the matched element.

$('#myDiv').load('content.html', function() { console.log('Content loaded.'); });

.map(callback)

Pass each element in the current matched set through a function, producing a new jQuery object containing the returned values.

var newArray = $('li').map(function(index, element) { return $(element).text(); });

.mousedown(handler)

Bind an event handler to the "mousedown" JavaScript event.

$('#myElement').mousedown(function() { console.log('Mouse down.'); });

.mouseenter(handler)

Bind an event handler to the "mouseenter" JavaScript event.

$('#myElement').mouseenter(function() { console.log('Mouse entered.'); });

.mouseleave(handler)

Bind an event handler to the "mouseleave" JavaScript event.

$('#myElement').mouseleave(function() { console.log('Mouse left.'); });

.mousemove(handler)

Bind an event handler to the "mousemove" JavaScript event.

$('#myElement').mousemove(function(event) { console.log('Mouse moved at', event.pageX, event.pageY); });

.mouseout(handler)

Bind an event handler to the "mouseout" JavaScript event.

$('#myElement').mouseout(function() { console.log('Mouse out.'); });

.mouseover(handler)

Bind an event handler to the "mouseover" JavaScript event.

$('#myElement').mouseover(function() { console.log('Mouse over.'); });

.mouseup(handler)

Bind an event handler to the "mouseup" JavaScript event.

$('#myElement').mouseup(function() { console.log('Mouse up.'); });

.next([selector])

Get the immediately following sibling of each element in the set of matched elements, optionally filtered by a selector.

$('li').next('.selected').addClass('nextItem');

.nextAll([selector])

Get all following siblings of each element in the set of matched elements, optionally filtered by a selector.

$('li').nextAll('.highlight').addClass('followingItem');

.nextUntil([selector], [filter])

Get all following siblings of each element up to but not including the element matched by the selector or the element that passes the filter.

$('li').nextUntil('.stop').addClass('followingItem');

$.noConflict([removeAll])

Relinquish jQuery's control of the $ variable.

var jq = $.noConflict(); // Relinquish control and assign jQuery to jq

.offset()

Get the current coordinates of the first element in the set of matched elements, relative to the document.

var position = $('#myElement').offset();

.offsetParent()

Get the closest ancestor element that is positioned.

var parent = $('#myElement').offsetParent();

.on(events, selector, data, handler)

Attach an event handler function for one or more events to the selected elements.

$('#myElement').on('click', function() { console.log('Element clicked.'); });

.one(events, selector, data, handler)

Attach a handler to an event for the elements. The handler is executed at most once per element.

$('#myElement').one('click', function() { console.log('Element clicked once.'); });

.outerHeight([includeMargin])

Get the current computed outer height (including padding, border, and optionally margin) for the first element in the set of matched elements.

var outerHeight = $('#myElement').outerHeight(true);

.outerWidth([includeMargin])

Get the current computed outer width (including padding, border, and optionally margin) for the first element in the set of matched elements.

var outerWidth = $('#myElement').outerWidth(true);

$.param(obj)

Create a serialized representation of an array or object, suitable for use in a URL query string or Ajax request.

var queryString = $.param({ name: 'John', age: 30 });

.parent([selector])

Get the parent of each element in the current set of matched elements, optionally filtered by a selector.

$('#myElement').parent().addClass('parentContainer');

.parents([selector])

Get the ancestors of each element in the current set of matched elements, optionally filtered by a selector.

$('#myElement').parents('.ancestorContainer').addClass('highlighted');

.parentsUntil([selector], [filter])

Get the ancestors of each element in the current set of matched elements, up to but not including the element matched by the selector or the element that passes the filter.

$('#myElement').parentsUntil('.stop').addClass('highlighted');

.position()

Get the current coordinates of the first element in the set of matched elements, relative to the offset parent.

var elementPosition = $('#myElement').position();

.prepend(content)

Insert content, specified by the parameter, to the beginning of each element in the set of matched elements.

$('#myContainer').prepend('

Content at the beginning

');

.prependTo(target)

Insert every element in the set of matched elements to the beginning of the target.

$('#myContent').prependTo('#myContainer');

.prev([selector])

Get the immediately preceding sibling of each element in the set of matched elements, optionally filtered by a selector.

$('li').prev('.selected').addClass('previousItem');

.prevAll([selector])

Get all preceding siblings of each element in the set of matched elements, optionally filtered by a selector.

$('li').prevAll('.highlight').addClass('precedingItem');

.prevUntil([selector], [filter])

Get all preceding siblings of each element up to but not including the element matched by the selector or the element that passes the filter.

$('li').prevUntil('.stop').addClass('precedingItem');

.promise([type], [target])

Return a Promise object to observe when all actions of a certain type bound to the collection, queued or not, have finished.

var animationPromise = $('#myElement').animate({ opacity: 0.5 }).promise();

.prop(propertyName)

Get the value of a property for the first element in the set of matched elements.

var checked = $('#myCheckbox').prop('checked');

$.queue(element, queueName, newQueue)

Show the queue of functions to be executed on the matched elements.

var animationQueue = $.queue('#myElement', 'fx');

.remove([selector])

Remove the set of matched elements from the DOM.

$('#myElement').remove();

.removeAttr(attributeName)

Remove an attribute from each element in the set of matched elements.

$('#myElement').removeAttr('data-custom');

.removeClass([className])

Remove a single class, multiple classes, or all classes from each element in the set of matched elements.

$('#myElement').removeClass('active');

.removeData([name])

Remove a previously-stored piece of data from each element in the set of matched elements.

$('#myElement').removeData('customData');

.removeProp(propertyName)

Remove a property set by .prop() from each element in the set of matched elements.

$('#myElement').removeProp('customProperty');

.replaceAll(target)

Replace each target element with the set of matched elements.

$('#newContent').replaceAll('.oldContent');

.replaceWith(newContent)

Replace each element in the set of matched elements with the provided new content and return the set of elements that was removed.

$('#myElement').replaceWith('

New content
');

$.ready.promise()

A promise-like object that provides a way to execute callback functions after a document is ready.

$.ready.promise().done(function() { console.log('Document is ready.'); });

.resize(handler)

Bind an event handler to the "resize" JavaScript event.

$(window).resize(function() { console.log('Window resized.'); });

.scroll(handler)

Bind an event handler to the "scroll" JavaScript event.

$(window).scroll(function() { console.log('Window scrolled.'); });

.scrollLeft(value)

Get the current horizontal position of the scroll bar for the first element in the set of matched elements or set the horizontal position of the scroll bar for every matched element.

var scrollLeft = $('#myElement').scrollLeft();

.scrollTop(value)

Get the current vertical position of the scroll bar for the first element in the set of matched elements or set the vertical position of the scroll bar for every matched element.

var scrollTop = $('#myElement').scrollTop();

.select()

Get the current selection of elements that match the selector, optionally filtered by another selector.

var selectedItems = $('input[type="text"]').select();

.serialize()

Encode a set of form elements as a string for submission.

var formData = $('#myForm').serialize();

.serializeArray()

Encode a set of form elements as an array of names and values.

var formArray = $('#myForm').serializeArray();

.show()

Display the matched elements.

$('#myElement').show();

.siblings([selector])

Get the siblings of each element in the set of matched elements, optionally filtered by a selector.

$('#myElement').siblings('.highlight').addClass('highlightedSiblings');

.size()

Get the current number of elements in the set of matched elements.

var elementCount = $('p').size();

.slice(start, end)

Reduce the set of matched elements to a subset specified by a range of indices.

$('li').slice(1, 3).addClass('selectedItems');

$.support

An object containing flags for the presence of various features in browsers.

var isTransitionSupported = $.support.transition;

.text()

Get the combined text contents of each element in the set of matched elements, including their descendants.

var elementText = $('#myElement').text();

.toArray()

Retrieve all the elements contained in the jQuery set as an array.

var elementArray = $('.items').toArray();

.toggle()

Display or hide the matched elements.

$('#myElement').toggle();

.toggleClass(className, state)

Add or remove one or more classes from each element in the set of matched elements, depending on either the class's presence or the value of the state argument.

$('#myElement').toggleClass('active');

$.trim(str)

Remove the white spaces from both ends of a string.

var trimmedString = $.trim(' Hello, World! ')

$.type(obj)

Determine the internal JavaScript [[Class]] of an object.

var objectType = $.type({});

$.unique(array)

Sorts an array of DOM elements, in place, with the duplicates removed.

var uniqueArray = $.unique([3, 2, 1, 2, 3, 4, 5, 4, 6]);

.unbind([events], [handler])

Remove a previously-attached event handler from the elements.

$('#myElement').unbind('click', clickHandler);

.undelegate([selector], [events], [handler])

Remove a handler from the event for all elements which match the current selector, based upon a specific set of root elements.

$('#myContainer').undelegate('a', 'click', clickHandler);

.unload(handler)

Bind an event handler to the "unload" JavaScript event.

$(window).unload(function() { console.log('Window unloaded.'); });

.unwrap()

Remove the parents of the set of matched elements from the DOM, leaving the matched elements in their place.

$('.item').unwrap();

.val([value])

Get the current value of the first element in the set of matched elements or set the value of every matched element.

var inputVal = $('#myInput').val();

.width([value])

Get the current computed width for the first element in the set of matched elements or set the width of every matched element.

var elementWidth = $('#myElement').width();

.wrap(wrappingElement)

Wrap an HTML structure around each element in the set of matched elements.

$('#myElement').wrap('<div class="wrapper"></div>');

.wrapAll(wrappingElement)

Wrap an HTML structure around all elements in the set of matched elements.

$('.items').wrapAll('<div class="container"></div>');

.wrapInner(wrappingElement)

Wrap an HTML structure around the content of each element in the set of matched elements.

$('p').wrapInner('');

$.zip(arrays)

Merge together the contents of two arrays, element-wise.

var array1 = ['a', 'b', 'c'];
var array2 = [1, 2, 3];
var result = $.zip(array1, array2);
// Result: [['a', 1], ['b', 2], ['c', 3]];


Quick Recap - Topics Covered

jQuery Reference

Practice With Examples in Compilers

The Concepts and codes you leart practice in Compilers till you are confident of doing on your own. A Various methods of examples, concepts, codes availble in our websites. Don't know where to start Down some code examples are given for this page topic use the code and compiler.

Example js

Example 1 Example 2 Example 3 Example 4 Example 5


Quiz


FEEDBACK

Rating


Message