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:

  • ^abcselects items that begin with ‘abc’

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

  • *abcselects items that contain ‘abc’

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

  • $abcselects 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<10; counter+=1)

{

//body of loop goes here

}

Some CSS Items

<style type="text/css">

selector { property:value; property:value;}

.className { property:value; etc }

#id_name { property:value; etc }

</style>

- Change a font type:font-family:value;

Some font types/values: serif, sans-serif, cursive, monospace, Arial, etc

- Change a font size:text-size:200%;  200% means double its usual size

- Change a foreground color:color:value;

- Change a background color:background-color:value;

- Place a border:border:solid

- Adjusts width:width:200px To mdify original size: width:75%

For use with certain questions:

Some Regular Expression Patterns

1