JQuery Cheat Sheet

A cheat sheet for JQuery.

All source code can be found on GitHub here.

This post is part of my cheat sheet series.

 


// ******** JQUERY SELECTORS ********

// Selectors
$('#id');			// html id
$('a');				// html tag
$('.cssclass');			// css class
$('#navigationBar a'); 	    	// descendants
$('#body > a'); 		// child nodes
$('#h2 + div');			// adjacent siblings

// Compounds selections
= is exactly equal
!= is not equal
^= is starts with
$= is ends with
*= is contains
id
name
href

// Attribute Selectors
$('img[alt]');			// has attribute set
$('input[type=text]');		// has attribute value equal to
$('a[href^=http://]');		// has attribute value starting with
$('a[href$=.pdf]');		// has attribute value ending with
$('a[href*=google.com]'); 	// has attribute value containing

// Filters
$('tr:even');			// even elements
$('.strippedTbl tr:even');	// even elements
$('.strippedTbl tr:odd');	// odd elements
$('a:not(.myClass)');		// elements with exclusion filter
$('a:not([href^=http://])');	// elements with exclusion filter
$('li:has(a)');			// elements with inclusion filter
$('a:contains(Click Me!)');	// elements with inclusion text
$('div:hidden').show();		// elements with hidden filter

// ******** METHODS ********
$('.foo').show().width(300);	// Inline chaining
$('.foo').show()				// Multi line chaining
	.width(300)
	.height(300);

$('.foo').html();			// replaces Javascript innerHtml
$('.foo').html = '<br>';		// replaces Javascript innerHtml
$('.foo').text = '<br>';		// encodes html (to show code in html)

// Adding and replacing page content
$('.foo').append('<br>')	// adds as last child element of selected element
$('.foo').prepend('<br>')	// adds as first child element of selected element
$('.foo').before('<br>')	// adds element before
$('.foo').after('<br>')		// adds element aftter
$('.foo').remove()		// removes element
$('.foo').replace('<br>')	// replaces element
$('#AnID tbody:last').append("<tr><td></td></tr>"); // Add html into a section

// Setting and Reading Tag Attributes
$('.foo').addClass('class')		// adds CSS Class
$('.foo').removeClass('class')	    	// remove CSS Class
$('.foo').toggleClass('class')	    	// toggle add/remove CSS Class
$('.foo').css('background-colour')	// Get CSS property.
$('.foo').css('font-size', '200%')	// Set CSS property.
$('.foo').css({
			'background-colour' : '#FF0000',
			'font-size' : '200%'
			});								// Set multiple CSS properties.

// Reading, setting and removing HTML Attributes
$('img').attr('src')			// Get attribute
$('img').attr('src', 'foo.jpg');	// Set attribute
$('img').removeAttr('src');		// Remove attribute
$('img').fadeOut();			// Set attribute

// Examples
$("input[type=text]").val('');							// All text items
$("input[id^=ProductWrapperName][value='Foo']").get(0).id 			// Starts with and has value
$("input[id^=ProductWrapperProductType][value='" + productType + "']").get(0) 	// Starts with and has value
$("input[id^=TrustP][id$=Trustee][value='Yes']").size(); 			// Starts with and ends with and value
$("text[id^=ProductWrapperName]:contains('Foo')")  				// Text box id starts with html contains
$('#chktable' + asTable + 'Match' + jnRecordRow + ':checked').val() != null 	// Element is checked
$('#contributionsInputPanel input').val('');					// Id and input
$("#myid").length > 0								// Element by Id exists
$("#input").val("Hello");							// Set value
$("#input").val();								// Get value
$('#' + prefix + 'CrystallisedRegularIncomeRadioNo').attr("checked", true );    // Check item
$("input[name=DiscardOption]:checked").val();					// Item is checked
$(".selector").attr("checked", false); 						// Check item
$("input[name='Thirdpartytype1']:checked").val();				// Item is checked
$("input").attr("readOnly", true); 						// Set readonly
$("input").removeAttr("readOnly");						// Remove readonly
$("input").attr("disabled", true); 						// Disable
$("input").attr("disabled", ''); 						// Remove readonly
$("select").removeAttr("disabled");
$("input").show();
$("input").hide();

// ******** LOOPS *********

$('img').each(functionName);		// Named function
$('img').each(function(){		// Anon function
	this				// old school element
	$(this)				// jquery element
	});

var myData = { firstName: 'Bob', lastName:, 'Smith'};
$('#foo').bind('click', myData, functionName);
var fname = evt.data.firstName;
$('#foo').bind('click', functionName);

// ******** EVENTS ********
// Registered as functions (see each above)
// Mouse Events
$('.foo').click(functionName);			// called upon release
$('.foo').dblclick(functionName);		// called upon second release
$('.foo').mousedown(functionName);		// called upon left click down
$('.foo').mouseup(functionName);		// called upon release
$('.foo').mouseover(functionName);		// called when mouse enters area
$('.foo').mouseout(functionName);		// called when mouse leaves area
$('.foo').mousemove(functionName);		// called when mouse moves

// Document / window Events
$(document).load(functionName);			// called after everything loaded; ready better
$(window).resize(functionName);			// called upon release of resize (not always)
$(window).scroll(functionName);			// called upon release of scroll (not always)
$(window).unload(functionName);			// called upon exit (not always)

// Form Events
$('.foo').submit(functionName);			// called upon submit of form
$('.foo').reset(functionName);			// called upon reset of form
$('.foo').change(functionName);			// called entity change
$('.foo').focus(functionName);			// called entity focus recieved
$('.foo').blur(functionName);			// called entity focus released

// Keyboard Event
$('.foo').keypress(functionName);		// called upon key release
$('.foo').keydown(functionName);		// called upon key down
$('.foo').keyup(functionName);			// called upon key release

// JQuery Events

// You can chain events
$(document).ready(functionName)			// Called when javascript manimulation should be made
$('#id').hover(showFunc, hideFunc)		// Encompas mouseover and moustout events
$('#id').toggle(togOffFunc, togOffFunc)		// Encompas toggle on and off functions

// Event object
$(document).click(function(evt){});		// Passed into events
evt.pageX;				        // distance from mouse pointer to left page edge
evt.pageY;				        // distant from mouse poiner to top page edge
evt.screenX;			                // distance from mouse pointer to monitor edge x
evt.screenY;			                // distance fom mouse pointer to monitor edge y
evt.shiftKey;			                // boolean indicating if shift key press *
evt.which;				        // numeric code of key press
evt.target;				        // element bound upon
evt.data;					// data passed in with bind method

String.fromCharCode(evt.which);			// * Get char from key code

// Stoppnig and removing events
evt.preventDefault();				    // prevents other events getting raised
return false;					    // shorthand of preventDefault
evt.stopPropagation();				    // Prevents parent elements recieving bubble events
$(document).unbind('click')			    // remove registered events

JavaScript Cheat Sheet

A cheat sheet for JavaScript.

All source code can be found on GitHub here.

This post is part of my cheat sheet series.

<pre>
// Java Script Basics
document.write("
Hello!
");
name = prompt ("Please Enter Your Name.","Your Name Goes Here");

// ******** ARRAYS ********
var foo = [1,2,3];
var foo = new Array( 1,2,3);
foo[2];
foo[2]=3;
foo.length;
foo.push(4);  					// adds an element at the end
foo.push(5,6,7) 				// can take more than one element
foo.unshift(0); 				// adds an element at the beginning
var lastEl = foo.pop(); 		        // gets and removes last element
var firstEl = foo.shift(); 		        // gets and remove first element
var array.splice(index,howMany,e1,e2,ex) 	// adds and or removes elements. Returns remove elements
document.write(arrayFoo); 		        // writes comma separated to documented
foo.concat()  					// joins two or more arrays, and returns a copy of the joined arrays
foo.join() 					// joins all elements of an array into a string
foo.reverse() 					// reverses the order of the elements in an array
foo.slice() 					// Selects a part of an array, and returns the new array
foo.sort() 					// sorts the elements of an array
foo.toString() 					// converts an array to a string, and returns the result
foo.valueOf() 					// returns the primitive value of an array

// ******** LOOPS ********

for (i=0;i<=5;i++){}   		// for
while (i<=5){i++;}		// while
do{i++;} while (i<=5);		// do while
for (x in foo) {foo[x]};	// for in
break; 				// stop loop
continue; 			// continue next iteration

// ******** TRY CATCH THROW ********

try {	} catch(err) {	txt = err.description; }
try {	throw "Err1"; } catch(er)
{
  if(er=="Err1")
  {	alert("Error! The value is too high");
  }
}

// ******** CHARACTERS / STRING ********
// Escape characters
var txt="We are the so-called "Vikings" from the north.";

"\'"  	// single quote
"\"" 	// double quote
"\&" 	// ampersand
"\\" 	// backslash
"\n" 	// new line
"\r" 	// carriage return
"\t" 	// tab
"\b" 	// backspace
"\f" 	// form feed

"".charAt() 				// Returns the character at the specified index
"".charCodeAt() 	 		// Returns the Unicode of the character at the specified index
"".concat() 				// Joins two or more strings, and returns a copy of the joined strings
"".fromCharCode() 		        // Converts Unicode values to characters
"".indexOf() 				// Returns the position of the first found occurrence of a specified value in a string
"".lastIndexOf() 			// Returns the position of the last found occurrence of a specified value in a string
"".match() 				// Searches for a match between a regex and a string, and returns the matches
"".replace() 				// Searches for a match between a substring (or regex) and a string, and replaces
"".search() 				// Searches for a match between a regular expression and a string, and returns the position of the match
"".slice() 				// Extracts a part of a string and returns a new string
"".split() 				// Splits a string into an array of substrings
"".substr() 				// Extracts the characters from a string, beginning at a specified start position, and through the specified number of character
"".substring() 				// Extracts the characters from a string, between two specified indices
"".toLowerCase() 			// Converts a string to lowercase letters
"".toUpperCase() 			// Converts a string to uppercase letters
"".valueOf() 				// Returns the primitive value of a String object

// ******** DATE / TIME ********
today = new Date()
d1 = new Date("October 13, 1975 11:13:00")
d2 = new Date(79,5,24)
d3 = new Date(79,5,24,11,33,0)
myDate.setFullYear(2010,0,14)
myDate.setDate(myDate.getDate()+5);

getDate() 			// Returns the day of the month (from 1-31)
getDay() 			// Returns the day of the week (from 0-6)
getFullYear() 			// Returns the year (four digits)
getHours() 			// Returns the hour (from 0-23)
getMilliseconds() 	        // Returns the milliseconds (from 0-999)
getMinutes() 			// Returns the minutes (from 0-59)
getMonth() 			// Returns the month (from 0-11)
getSeconds() 			// Returns the seconds (from 0-59)
getTime() 			// Returns the number of milliseconds since midnight Jan 1, 1970
getTimezoneOffset() 	 	// Returns the time difference between GMT and local time, in minutes
Date.parse(datestring)		// Parse
setDate()  			// Sets the day of the month (from 1-31)
setFullYear() 			// Sets the year (four digits)
setHours() 			// Sets the hour (from 0-23)
setMilliseconds() 	        // Sets the milliseconds (from 0-999)
setMinutes() 			// Set the minutes (from 0-59)
setMonth() 			// Sets the month (from 0-11)
setSeconds() 			// Sets the seconds (from 0-59)
setTime() 			// Sets a date and time by adding or subtracting a specified number of milliseconds to/from midnight January 1, 1970
toDateString()  		// Converts the date portion of a Date object into a readable string
toDateString()  		// Converts the date portion of a Date object into a readable string
toGMTString() 			// Deprecated. Use the toUTCString() method instead
toLocaleDateString() 		// Returns the date portion of a Date object as a string, using locale conventions
toLocaleTimeString() 		// Returns the time portion of a Date object as a string, using locale conventions
toLocaleString() 		// Converts a Date object to a string, using locale conventions
toString() 			// Converts a Date object to a string
toTimeString() 			// Converts the time portion of a Date object to a string

// ******** NUMBER ********

Number.NaN
toExponential(x)  	 	// Converts a number into an exponential notation
toFixed(x) 			// Formats a number with x numbers of digits after the decimal point
toPrecision(x) 			// Formats a number to x length
toString() 			// Converts a Number object to a string
valueOf() 			// Returns the primitive value of a Number object

// ******** MATH ********

// Math.Constants
E 				// Returns Eulers number (approx. 2.718)
LN2 				// Returns the natural logarithm of 2 (approx. 0.693)
LN10 			     	// Returns the natural logarithm of 10 (approx. 2.302)
LOG2E 			    	// Returns the base-2 logarithm of E (approx. 1.442)
LOG10E 		        	// Returns the base-10 logarithm of E (approx. 0.434)
PI 				// Returns PI (approx. 3.14159)
SQRT1_2 	        	// Returns the square root of 1/2 (approx. 0.707)
SQRT2 			    	// Returns the square root of 2 (approx. 1.414)

// Math.Methods
abs(x) 				// Returns the absolute value of x
acos(x) 			// Returns the arccosine of x, in radians
asin(x) 			// Returns the arcsine of x, in radians
atan(x) 			// Returns the arctangent of x as a numeric value between -PI/2 and PI/2 radians
atan2(y,x) 			// Returns the arctangent of the quotient of its arguments
ceil(x) 			// Returns x, rounded upwards to the nearest integer
cos(x) 				// Returns the cosine of x (x is in radians)
exp(x) 				// Returns the value of Ex
floor(x) 			// Returns x, rounded downwards to the nearest integer
log(x) 				// Returns the natural logarithm (base E) of x
max(x,y,z,...,n) 		// Returns the number with the highest value
min(x,y,z,...,n) 		// Returns the number with the lowest value
pow(x,y) 			// Returns the value of x to the power of y
random() 			// Returns a random number between 0 and 1
round(x) 			// Rounds x to the nearest integer
sin(x) 				// Returns the sine of x (x is in radians)
sqrt(x) 			// Returns the square root of x
tan(x) 				// Returns the tangent of an angle

// ******** GLOBAL *******

// Properties
Infinity 			// A numeric value that represents positive/negative infinity
NaN 				// "Not-a-Number" value
undefined 			// Indicates that a variable has not been assigned a value

// Functions
decodeURI() 		    	// Decodes a URI
decodeURIComponent() 		// Decodes a URI component
encodeURI() 			// Encodes a URI
encodeURIComponent() 		// Encodes a URI component
escape() 			// Encodes a string
eval() 				// Evaluates a string and executes it as if it was script code
isFinite() 			// Determines whether a value is a finite, legal number
isNaN() 			// Determines whether a value is an illegal number
Number() 			// Converts an object's value to a number
parseFloat() 			// Parses a string and returns a floating point number
parseInt() 			// Parses a string and returns an integer
String() 			// Converts an object's value to a string
unescape() 			// Decodes an encoded string