This is just a simple jquery tutorial, more of a reference guide for common jQuery methods and features. For complete documentation visit http://api.jquery.com/
A jQuery object contains a collection of DOM elements that have been created from an HTML string or selected from a document. The jQuery object itself behaves much like an array it has a length property and the elements in the object can be accessed by their numeric indices [0] to [length-1]
extend the jQuery fn prototype to create a custom function or plugin
jQuery.fn.customFunction = function (n) {
// custom function
}
get a jQuery object from an iframe to get a list of attached events
jQuery.data(document, 'events');
get element by id using jQuery
var element = $('#section')[0];
The .promise() method returns a dynamically generated Promise that is resolved once all actions of a certain type bound to the collection, queued or not, have ended.
$( "div" ).promise().done(function() { $( "p" ).append( " Finished! " ); });
chaining is possible because every setter method in jQuery returns the selection on which it was called.
var $elem = $( 'li' ).children('li').first().next();
delete a cookie
$.cookie("name", $(this).val(), { path: '/', expires: -1 }); $.cookie("name", $("cookie-value"), { path: '/', expires: -1 }); $.cookie("name", null);
effects in jQuery
$.cookie("name", $(this).val(), { path: '/', expires: -1 }); $.cookie("name", $("cookie-value"), { path: '/', expires: -1 }); $.cookie("name", null);
effects in jQuery
// .animate() .animate({ fontSize: "24px" }, 1500 ) // .delay() $("div.second").slideUp(300).fadeIn(400); // .fadeIn () .fadeOut() $("span").fadeIn(300); // .hide() $("p").hide("slow"); // .show() $("div").show("fast"); // .stop() $(".block").animate({left: '+=100px'}, 2000); $(".block").stop(); // .toggle() $("p").toggle();
retrieve json data using ajax
// jQuery.ajax() $.ajax({ url: 'ajax/test.html', success: function(data) { $('.result').html(data); alert('Load was performed.'); } }); // .ajaxSuccess() / .ajaxError() / .ajaxComplete() $("#msg").ajaxSuccess(function(evt, request, settings){ $(this).append("Successful Request!"); });
dom selectors
// * // selects all elements. var elementCount = $("*").length; // . // selects all elements with the given class. $(".myclass.otherclass") // # // selects a single element with the given id attribute. $("#myDiv") // :animated // select all elements that are in the progress of an animation at the time the selector is run. $("div:animated") // :button // Selects all button elements and elements of type button $(":button") // :checkbox // selects all elements of type checkbox. $("form input:checkbox") // :checked // matches all elements that are checked. $("input:checked") // :contains() // select all elements that contain the specified text. $("div:contains('Steven')") // :disabled // selects all elements that are disabled. $("input:disabled") // :empty // select all elements that have no children (including text nodes). $("td:empty") // :enabled // selects all elements that are enabled. $("input:enabled") // :eq() // select the element at index n within the matched set. $("td:eq(2)") // :even :odd // selects even / odd elements, zero-indexed. $("tr:even") // :file // selects all elements of type file. $("input:file") // :first-child // selects all elements that are the first child of their parent. $("div span:first-child") // :first / :last // selects the first / last matched element. $("tr:first") // :focus // selects element if it is currently focused. elem.toggleClass( "focused", elem.is(":focus") ); // :has() // selects elements which contain at least one element that matches the specified selector. $("div:has(p)") // :hidden :visible // selects all elements that are hidden / visible. $("div:hidden") // :image // selects all elements of type image. $("input:image") // :input // selects all input, textarea, select and button elements. $(":input"); // :text // selects all elements of type text. $("form input:text") // :not() // selects all elements that do not match the given selector. $("input:not(:checked)") // :password // selects all elements of type password. $("input:password") // :parent // select all elements that are the parent of another element, including text nodes. $("td:parent") // :radio // selects all elements of type radio. $("form input:radio") // :reset // selects all elements of type reset. $("input:reset") // :selected // selects all elements that are selected. $("select option:selected") // :submit // selects all elements of type submit. $(":submit")
changing styles in jQuery
// .addClass $("p").addClass("selected"); // .css() var color = $(this).css("background-color"); $(this).css("color","red"); // .hasClass $('#mydiv').hasClass('foo') // .removeClass $("p").removeClass("blue"); // .toggleClass $("p").click( function () { $(this).toggleClass("highlight"); });
traversing the dom in jQuery
// .add() $("p").add("Again") $("p").add("span").css("background", "yellow"); // .children() $("div").children() // .closest() var x = $("div").closest("li"); // .contents() $("p").contents() // .each() $("li").each(function(){ $(this).toggleClass("example"); }); // .end() $("p").showTags(0) .find("span") .css("background", "yellow") .end() .css("font-style", "italic"); // .eq() $("body").find("div").eq(2).addClass("blue"); // .find() var $allListElements = $('li'); $('li.item-ii').find($allListElements); // .first() $('li').first().css('background-color', 'red'); // .has() $('li').has('ul').css('background-color', 'red'); // .is() if ($(this).is(":first-child")) { // execute code } // .last() $('li').last().css('background-color', 'red') // .map() $(':checkbox').map(function() { return this.id; }).get(); // .next() / .prev() $('li.third-item').next().css('background-color', 'red'); // .nextAll() // begin at the third item, we can find the elements which come after it $('li.third-item').nextAll().css('background-color', 'red'); // .nextUntil() $("#term2").nextUntil("term6") .css("background-color", "red"); // .parent() $('li.item-a').parent().css('background-color', 'red'); // .parents() // begin at item a, we can find its ancestors: $('li.item-a').parents().css('background-color', 'red'); // .siblings() $('li.third-item').siblings().css('background-color', 'red'); // .slice() $('li').slice(2).css('background-color', 'red');
dom manipulation in jQuery
// .after() / .before() $("p").after("Hello"); // .append() / .prepend() $("p").append("Hello"); // .appendTo() / .prependTo() $("span").appendTo("#foo"); // .attr var title = $("em").attr("title"); // .clone() $("b").clone().prependTo("p"); // .detach() $("p").detach(); // .empty() $("p").empty(); // .height() / .width() $(this).height(30) // .html $("div").html("Wow..."); // .insertAfter() / .insertBefore() $("p").insertAfter("#foo"); // .offset() $("p:last").offset({ top: 10, left: 30 }); // .position() var position = $("p").position(); // .prop $("input[type='checkbox']").prop({ disabled: true }); // .remove() $("p").remove(); // .text() var str = $("p:first").text(); // .val() var value = $(this).val(); // .data() // data-id="abc"/data-value="somthing" var value = $(this).data("value"), id= $(this).data("id"); // .wrap() $("p").wrap(" ");
binding to events in jQuery
// .bind() // attach a handler to an event for the elements. $('#foo').bind('click', function() { alert('User clicked on "foo."'); }); // .unbind() // remove a previously-attached event handler from the elements. $('#foo').unbind(); // .change() // bind an event handler to the "change" javaScript event, or trigger that event on an element. $('.target').change(function() { alert('Handler for .change() called.'); }); // .click() / .dblclick // bind an event handler to the "click" javaScript event, or trigger that event on an element. $("#target").click(function() { alert("Handler for .click() called."); }); // .delegate() // attach a handler to one or more events for all elements that match the selector, now or in the future $("table").delegate("td", "click", function() { $(this).toggleClass("chosen"); }); // .die() // remove all event handlers previously attached using .live() from the elements. $("p").die( "click") // .error() // bind an event handler to the "error" JavaScript event. $("img") .error(function(){ $(this).hide(); }) // .focus() // bind an event handler to the "focus" javaScript event, or trigger that event on an element. $('#target').focus(function() { alert('Handler for .focus() called.'); }); // .hover() $(function () { $("#mapping").hover( function () { $(this).addClass("hover"); }, function () { $(this).removeClass("hover"); } ); }); // .keyup() / .keypress() / .keydown() $('#target').keyup(function() { alert('Handler for .keyup() called.'); }); // .mouseover() mousedown() ... // trigger a mouseover event. $('#outer').mouseover(); // .on() // attach an event handler function for one or more events to the selected elements. $("#dataTable").on("click", function(event){ alert($(this).text()); }); // .off() // remove an event handler. $("p").off( "click", "**" ) // .ready() // specify a function to execute when the DOM is fully loaded. $(document).ready(function() { // Handler for .ready() called. }); // .resize() // bind an event handler to the "resize" javaScript event, or trigger that event on an element. $(window).resize(function() { $('#log').append('Handler for .resize() called. '); }); // .scroll() // trigger a scroll $('#target').scroll(); // .select() // bind an event handler to the "select" javaScript event, or trigger that event on an element. $('#target').select(function() { alert('Handler for .select() called.'); }); // .submit() // bind an event handler to the "submit" javaScript event, or trigger that event on an element. $('#target').submit(function() { alert('Handler for .submit() called.'); return false; }); // .toggle() // bind two or more handlers to the matched elements, to be executed on alternate clicks. $('#target').toggle(function() { alert('First handler for .toggle() called.'); }, function() { alert('Second handler for .toggle() called.'); }); // .trigger() $(document).ready(function(){ $('#some-id').trigger('click'); });