jQuery tutorial TL;DR

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');
});

  • ehsan

    Nice one Anna…