DePaul University | DePaul University, Chicago



238 Mini-API / Cheat Sheet

YOU MAY DETACH THESE SHEETS

Selecting:

• select based on a selector: $(selectorIdentifier)

• select based on an ID: $('#idIdentifier')

• select based on a class name: $('.classIdentifier')

Selecting with an attribute Selector:

$('selector[attribute="some_value"]')

Wildcards:

• ^abc selects items that begin with ‘abc’

Example: $('img[src^="ball"]') will select images with an src that begins with the letters ‘ball’

• *abc selects items that contain ‘abc’

Example: $('img[src*="ball"]') will select images with an src that contains with the letters ‘ball’

• $abc selects items that end with ‘abc’

Example: $('img[src$="ball"]') will select images with an src that ends with the letters ‘ball’

Conditionals:

• Logical AND uses ‘&&’ e.g. if (name==’Bob’ && color==’blue’)

• Logical OR uses ‘||’ e.g. if (name==’Bob’ || name==’Lisa’)

Mini-API of jQuery (not JavaScript functions):

• html() – Returns the HTML contents of the first element in the set of matched elements.

• html( htmlString ) - Replaces any prior content of the selected element with ‘htmlString’

• fadeIn(duration) / fadeOut(duration) – Fades the selection in our out over a period of 'duration' milliseconds.

• text() – Returns the text ignoring any HTML tags.

• text( string ) – Replaces any prior content of the selected element with 'string' as plain text only.

• append( content ) - Inserts content, specified by the argument, to the end of each element in the set of matched elements.

• prepend( content ) - Inserts content, specified by the argument, to the beginning of each element in the set of matched elements.

• show() - Display all selected elements

• hide() - Hide all selected elements

• remove() - Removes all selected elements

• replaceWith( content ) - Replaces the content of selected items with ‘content’

• addClass(className) – Adds the class ‘className’ to the selector

• removeClass(className) – Removes the class ‘className’ from the selector

• css(propertyName) / css(propertyName, value) - See images below

• toggleClass( class name ) – Adds/Removes ‘className’ from the selector depending on whether or not it is currently applied

• Math.round(Number) – Returns ‘Number’ rounded to the nearest numeric value

• attr( attributeName ) – Returns the current value of ‘attributeName’

• attr( attributeName, value ) - Sets the attribute ‘attributeName’ to ‘value’

• removeAttr( attributeName ) – Removes attribute ‘attributeName’

• each( named or anonymousFunction ) – When applied to a selector, the function will be applied to every selected item

• focus(named or anonymousFunction) - Function is executed when selected element gains focus

• blur(named or anonymousFunction) - Function is executed when selected element loses focus

• click( named or anonymousFunction ) – Function is executed when selected element is clicked

• val() – Retrieves the value of the selected element

• prop("checked") - Returns ‘true’ if the selected element has been checked

• event.preventDefault(evt) - Default action of the event will not be triggered

Example of each() function that makes use of an anonymous function and the ‘this’ construct:

$('img').each( function() {

var currentImageName = $(this).attr('src');

alert(currentImageName);

});

Mini-API of JavaScript (not jQuery functions):

Reminder: A jQuery function must begin with ‘$’ whle a JavaScript function must not.

• push(String) - Add an element to the end of an array. For example, someArray.push(25); will add the number 25 to the end of the array ‘someArray’.

• How to declare an array: var arrayName = [element1, element2, … elementN). To declare an empty array: var arrayName = [];

• string.length – returns the length of the string

• indexOf(string) – will return the index of the first time ‘string’ occurs. So "hello".indexOf('llo') will return 2. If the string is not found, then indexOf() will return -1

• parseInt(string) – converts the string to its integer form. The string must “resemble” an integer. e.g. parseInt("231") will return the integer 231

• parseFloat(string) – does the same as parseInt() but returns a double. E.g. parseFloat("231.44") returns the number 231.44

• someString.search(string) - Returns the index at which the argument was found. If the argument is not found, returns -1. Can be used with regular expressions. For example: "Hello".search(/o/); will return 4.

• string.split(character to split on) - Breaks up a string into substrings and returns an array. For example: "hello goodbye okay".split(" "); will split the string on space characters, and return an array of size 3 with the values ["hello","goodbye","okay"]

Example of a for-loop:

for (var counter=0; counter ................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download