jQuery Cheat Sheet

Over the past few months I have seen numerous attempts at a jQuery Cheat Sheet. A jQuery Cheat Sheet is great for beginners, not only for reference but as a form of memorization, too. When starting out with jQuery most people go to the jQuery API documentation, but trolling those pages requires searches and numerous clicks to find what you are looking for. Wouldn’t it be nice if a condensed version of all jQuery functions were on a single page. I bring you my version of the jQuery Cheat Sheet. This one is all text, too! So, you can copy/paste to your heart’s content.

Just keep in mind that this is a condensed version of the jQuery Cheat Sheet and does not include all functions from the jQuery API documentation.

The All-HTML Text jQuery Cheat Sheet

Selectors

#id, HTML tag, .class

$(‘#myID’);, $(‘body’);, $(‘.myClass’);

This is similar to regular CSS selectors.

elem1, elem2, elem3

$(‘#myID, p, .myClass’);

Multiple elements being selected at once.

ancestor descendant

$(‘#myID .IDsChildren’);

This is similar to regular CSS selectors. We are selecting all children of #myID that have the class of .IDsChildren.

parent > child

$(‘body > #content’);

Here we are selecting all #content that is only one level deep from the body tag.

prev + next

$(‘#myID + ul’);

Selects the ul that immediately precedes #myID

prev ~ siblings

$(‘#myID ~ ul’);

:first or :last

$(‘ul li:first’);

Selects the first li within any ul.

:not(?)

$(‘ul *:not(li)’);

Selects all elements that is has ul as a parent and is not an li.

:even or :odd

$(‘ul li:even’);

Selects all li that are an even.

:eq(index)

$(‘ul li:eq(1)’);

Selects the second li inside of any ul.

:gt(index) or :lt(index)

$(‘ul li:gt(3)’);

Selects all li that have an index greater than 4.

:contains(“text”)

$(‘div:contains(“test”)’);

Selects all div that contain the text, “test”.

:empty

$(‘div:empty’);

Selects div elements that have no text and have no children.

:has(elem)

$(‘div:has(p)’);

Selects div elements that have a p tag as a child.

:parent

$(‘div:parent’);

Selects div elements that are a parent. This is the opposite of :empty.

elem[attr=val]

$(‘input[name="search"]‘);

Find an input tag that has an attribute of “name” with a value of “search”.

elem[attr^=val]

$(‘input[name^="sea"]‘);

Find an input tag that has an attribute of “name” with a value that starts with “sea”.

elem[attr$=val]

$(‘input[name$="rch"]‘);

Find an input tag that has an attribute of “name” with a value that ends with “rch”.

elem[attr*=val]

$(‘input[name$="arc"]‘);

Find an input tag that has an attribute of “name” with a value that contains “arc”.

elem[attr*=val][attr*=val]

$(‘input[name="button"][value="Go!"]‘);

Find an input tag that has an attribute of “name” with a value “button” and a attribute of value with a value of “Go!”.

:nth-child(index)

$(‘ul li:nth-child(2)’);

Grabs the second li in an ul. Counting starts at 1 not 0.

:first-child or :last-child

$(‘ul li:first-child)’);

Select the first li within any ul.

:only-child

$(‘ul li:only-child)’);

Find an li with ul as a parent but is the only child.

:enable or :disable

$(‘ul li input:enabled)’);

Selects any input within any ‘ul li’ as a parent that is also enabled.

:checked and :selected

$(‘input:selected)’);

Select any input that is currently selected by the user.

:hidden or :visible

$(‘div:hidden)’);

Select any div that is hidden.

:header

$(‘*:header)’);

Select any element that is an h1, h2, h3, h4…

:header or :input, or :text, or :radio, or :submit, or :image…

$(‘*:header)’);

Select any element that is an h1, h2, h3, h4…

.css(‘name’) or .css(‘name’, ‘value’)

$(this).css(‘color’, ‘#fff’);

The currently cached element (this)’s color is set to white.

.height(value) or .width(value)

$(this).height(’200px’);

Sets the height of the currently cached element.

.addClass(class) or .removeClass(class)

$(this).addClass(‘active’);

Sets class of the currently cached element.

.toggleClass(class);

$(this).toggleClass(‘active’);

Toggles (on/off) the class of the currently cached element.

.attr(key, value) or .removeAttr(name);

$(this).removeAttr(‘data’);

Removes the data attribute from the currently cached element.

Events

.bind(type, data, fn); and .unbind(type, data);

$(ul li a).bind(‘mouseenter’, function(){//code to run});

Binds an event to an element.

.one(type, data, fn);

$(ul li a).one(‘click’, function(){alert(‘FIRE!’);});

Binds an event to an element.

.trigger(type, data, fn);

$(ul li a).trigger(‘click’); //This will fire $(ul li a).click() somewhere else.

Triggers an event that is already declared and tied an element.

.mouseup(fn); .mousedown(fn); .mousemove(fn); .mouseout(fn); .mouseover(fn);

$document.mousemove(function(){console.log(‘The mouse has moved.’)});

Prints to the console when the mouse has moved.

.load(fn);

$(document).load(function(){console.log(‘The document has finished loading.’);});

This function fires after the document has loaded completely.

.scroll(fn); .resize(fn);

$(window).resize(function(){console.log(window.width());});

The width of the window is printed to the console as the user re-sizes it.

.error(fn);

$(document).error(function(){console.log(‘An error has occurred’);});

If the document is improperly loaded, this function will fire.

.keydown(fn); .keypress(fn); .keyup(fn);

$(‘input’).keyup(function(){console.log(‘The User has pushed a key’);});

Only after a key is pressed and released will this function fire. This works better than keydown because users can hold buttons down.

.ready(fn);

$(document).ready(function(){//ALL jQUERY FUNCTIONS HERE});

After the DOM has loaded (HTML Document), all functions will fire. .load() on the other hand waits for all images to load first. Almost all jQuery javaScript is incased in a document.ready().

.hover(fnIN, fnOUT); .toggle(fn-1stClick, fn-2ndClick);

$(‘#content > ul > li > a’).hover(function(){// HOVER IN}, function(){// HOVER OUT});

.hover() and .toggle() fire two events. One for the hover in, and a second on the hover out. Or, in the case of .toggle(), 1st click and 2nd Click.

.click(fn); .dbclick(fn);

$(‘ul > li > a’).hover(function(){alert(‘The User has clicked’);});

.click(), fire the handler function after a user clicks on this element.

.blur(fn); .focus(fn);

$(‘input’).blur(function(){alert(‘This element has lost its focus’);});

After the user clicks away from the input field, fire the containing function.

.change(fn);

$(‘input’).change(function(){alert(‘This element’s value has changed’);});

After the user manipulates an input field’s value, the function is fired.

Transversing

.hasClass(fn);

$(‘#myID div’).hasClass(‘active’);

Find the element with ID of “myID” and selects all children that are divs and have a class of “active”.

.each(fn);

$(‘#myList ul li’).each(…);

Applied the containing functions within .each(…) and applies them individually to each li. This acts somewhat as a basic for loop in javaScript.

.filter(“expr”);

$(‘#myList ul li’).filter(“:odd”);

Selects only odd numbered list elements.

.length;

$(‘#myList ul’).length;

Returns the number of elements inside ul. .size() can also be used, but is more expensive.

.is(“expr”); .not(“expr”);

$(‘#myList ul li’).is(‘:even’);

Selects all even list elements.

.get(‘index’); .index();

$(‘#myList ul li:last-child’).index();

Selects the last li in the list and returns its index as a numerical value. 0 counts as :first-child.

.children(); .siblings();

$(‘#myList ul’).children(‘li’);

Selects all li’s all levels down that are children of ‘#myList ul’.

.contents();

$(‘#myList’).contents();

Selects all elements and text nodes inside of “myList”.

.next(); .nextAll(‘expr’);

$(‘#myContent p:first-child’).next();

Find the first “p” of “myContent” and then selects the next “p”. This is a sibling not child of the original “p”.

.parent(); .parents(‘expr’);

$(‘#myList ul li’).parent();

Selects li’s parent, only one level up. Use .parents() for all levels up.

.andSelf();

$(‘#content p:first-child’).nextAll().andSelf();

Selects the first “p” inside of content and all elements after this “p” which are siblings (again, not children).

.end();

$(‘#content p:first-child’).nextAll().andSelf().css(‘border’,’1px solid #000′).end();

.end() resets the selection. “This” is reset.

manipulating

.append(‘content’); .prepend(‘content’);

$(‘#wrapper’).append(“The End</p<”);

Adds “The End</p<” as last child of “wrapper”.

.appendTo(‘elem’); .prependTo(‘elem’);

$(“The End</p<”).appendTo(‘#main’);

Adds “The End</p<” as last child of “main”.

.before(‘content’); .after(‘content’);

$(‘#wrapper’).before(“The Beginning</p<”);

Adds “The End</p<” as the first element directly outside of “wrapper”.

.wrap(‘content’); .wrapInner(‘content’);

$(‘#wrapper a’).wrap(“</p<”);

Selects each “p” inside of “wrapper” and wraps “</p<” as the first element directly outside of “wrapper”.

.replace(‘content’);

$(‘#wrapper div’).replace(“</p<”);

Selects each “div” inside of “wrapper” and replaces them with “</p<”.

.empty(); .clone();

$(‘#wrapper div’).empty();

Selects each “div” inside of “wrapper” and removes all contents from each. Clone will create do the opposite and create a duplicate.

Core UI Effects

.show(); .hide(); .toggle()

$(‘#wrapper div’).hide();

Selects each “div” inside of “wrapper” and hides them. (adds a display:none; to each)

.slideUp(); .slideDown(); .slideToggle();

$(‘#wrapper div’).slideUp();

Selects each “div” inside of “wrapper” and moves them up to a length equal to their height.

.fadeIn(speed, callback); .fadeOut(speed, callback);

$(‘#wrapper div’).fadeOut(‘slow’, function(){console.log(‘Fade finished!’)};);

Selects each “div” inside of “wrapper” and fades them out.

.animate(params, duration, easing, callback); .stop();

$(‘#wrapper div a’).animate({opacity:0});

Selects each “a” inside of “wrapper div” and reduces their opacity to 0 over the default time and speed. (I have not set these values in my example so defaults are used.)

That does it for my jQuery Cheat Sheet. Bookmark it, share it, use it.

Thanks for stopping in!

Quick Menu

Selectors
Events
Transversing
Manipulating
Effects

One Response to jQuery Cheat Sheet

Dan says:

November 19, 2012 at 10:02 pm

this=bookmarked

However I am looking for a way to select something and I’m having a bit of trouble. Perhaps you might be able to help me. If so, thank you so much.

Here’s the html I have:

Main Link 1

Sublink 1
Sublink 2

What I’m looking to do is select that first $(li a) element. (The one that says Main Link 1). However I am trying to do it specifically in the following way:

“Select all elements that have a tag following it.”

I’m trying to use addClass() to all tags that have a submenu. I’ve tried a number of different things but this one seems to be elusive.

Thanks again for any help you can provide. Great site!

Most Commented

Author's Picks

Tags

Randoms

jQuery Cheat Sheet

The All-HTML Text jQuery Cheat Sheet

That does it for my jQuery Cheat Sheet. Bookmark it, share it, use it.

Quick Menu

One Response to jQuery Cheat Sheet

Leave a Reply Cancel reply

Like this post?

Subscribe to the RSS Feed or to Email Updates, right now!

Explore

jQuery Cheat Sheet

The All-HTML Text jQuery Cheat Sheet

That does it for my jQuery Cheat Sheet. Bookmark it, share it, use it.

Quick Menu

Related Posts:

One Response to jQuery Cheat Sheet

Leave a Reply Cancel reply

Like this post?

Explore