heartlessg

var i = {one:1,two:3,three:[{four:8},2,3]} = Array format access by: i.one, i.two, i.three[0].four returns 8, i.three[2] returns 3.
var i = ['value','value2','value3'] = Another way to create array
i.one = To access a variable in an array
$.browser = Is an array that will loop through to find the browser you are using.It also contains the version.
$.support = Contains browser capability. To access it you go. $.support.[name], possible values are: boxModel: if browser supports w3c box model. cssFloat:if css float i used to acess css float value. hrefNormalized: doesnt alter the results of getAttribute('href'). htmlSerialize: if properly serialize using inneHTML. leadingWhitespace: if browser preserves whitespace with innerHTML. noCloneEvent: if does not clone handlers when cloned. objectAll: if getElementByTagName returns all elements. opacity: If browser supports opacity styling. scriptEval: if appenchild/createTextnode executes. style: if getAttribute('style') return the correct inline style. tbody: if browsers allow table without tbody.

JQuery Selectors

$('#id') = Selector of an element
$('p') = Select all P tag in the page
$('p.class1') = Select P with class1 as the class
$('div p.class1') = Select p class1 inside div
$('p').size() = return number of P in the page
$('p:first') = Select the first occurence of P
$('p:last') = Select the last occurence of P
$('p')[0] = Select the first occurence of P but NOT Jquery element just normal DOM.
$('p > strong') =Select <strong> with direct parent <p>
$('#div1 p:even') = Select :even p elements inside #div
$('#div1 p:odd') = Select :odd p elements inside #div
$('#div1 p:not(.class1)') = Select all p but not p with class1
$('#div1 p:eq(0)') = Select p first index
$('#div1 p:gt(5)') = Select all p with index greater than 5
$('#div1 p:lt(5)') = Select all p with index lower than 5
$('#div1 p:empty') = Select all p with no children.
$('#div1 p:contains(text)')= Select all p that contains specified text.
$('#div1 p:has(strong)') = Select all p that has strong tag.
$('#div1 p:visible') = Select all p that are visible.
$('#div1 p:hidden') = Select all p that are hidden.
$('#div1 p:[style]') = Select all p with style property
$('#div1 p:[border=1]') = Select all p with border=1 property
$('#div1 p:first-child') = Select all p that are first child of parent #div1
$('#div1 p:last-child') = Select all p that are last child of parent #div1
$('#div1 :input') = Select all input inside #div1.
$('#div1 :text') = Select all input text inside #div1.
$('#div1 :radio') = Select all input radio inside #div1.
$('#div1 :checkbox') = Select all input checkbox inside #div1.
$('#div1 :enabled') = Select all elements that are enabled inside #div1.
$('#div1 :disabled') = Select all elements that are disabled inside #div1.
$('#div1 :checked') = Select all elements that are checked inside #div1.
$('#div1 :selected') = Select all elements that are selected inside #div1.
$('#div1 p:nth-child(3)') = Select the 3rd p inside #div1.

---

JQuery Functions

Important Notes: Functions only work with () parenthesis format example '$(selector).function_name'
$('#id').remove() = removes the element itself from the page.
$('#id').val([value]) = Get/Set the value. If the element is a combo box it will return array of option selected.
$('#div1).is('div') = Return true if the #div is a div tag. Also works to check :selected,:checked,:enabled,:disabled,:visible,:hidden,:empty etc.
$('#div1 p').length = Count how many p are there. Also tells you if the selector exist or not. Check if selector exists $('#div1').length
$('#div1').children([selector]) = Return all elements inside an element. To count all children you can use .children().length
$('#div1').width([value]) = Get/Set the width of the element.
$('#div1').height([value]) = Get/Set the height of the element.
$('#div1').before('<tag></tag>') =Add content before #div1 this is like $(content).insertBefore(selector).
$('#div1').after('<tag></tag>') = Add content after #div1
$('#div1').wrap('<tag></tag>') = Wraps the #div1 inside the tag.
$('#div1').append(content) = Append the content of the #div element.Content can be a selector as well..
$('#div1').appendTo([selector]) = Another way of appending the first selector to the second element
$('#div1').clone([bool=default true]) = Creates a clone of the specified element. bool is if to copy the events as well related to the original. You can also use appendTo to quickly add it to the selector. eg $('p').clone().appendTo('div') will quickly append P inside DIV tag.
$('#div1').html(html) = Writes HTML to content.
$('#div1').text(text) = Writes text inside the element if pass as HTML it will be replaced with their entity.
$('#div1').find(selector) = Find the children of the #div1 element for eg. $('div').find('p'); will match all P inside all divs.
$.each(variable,function(i,val){ ... }); = Loop through group objects or array, i is the name of the object, val is the value
$('p').each(function(m){ ... }); = Go through each P elements use 'this' to refer to the element.m is the index number.
$('#div1').attr('attribute_name'); = Read the attribute and get the value.
$('#div1').removeAttr('attribute_name'); = Remove an attribute all together.
$('#div1').attr('attribute_name',value); = Set value of the attribute.
$('#div1 p').slice(0) = This selects all P from 0 - 4. Slice is similar to substring() function.
$('#div1 p').slice(0,1) = This only selects 1.
$('#div1 p').slice(2,3) = This only selects 3 only.
$.trim(text) = Trim both start and end value of a text.
$.inArray(searchterm,array) = return 0 or larger if the position if found, -1 if false
$.makeArray(document.getElementsByTagName(p) or $('p') ) = Convert an object like array to Native javascript array. For eg. var ar= $.makeArray($('p')); this creates dom value and put it in ar variable as array to iterate later on as ar[0],ar[1] etc.IT IS NO longer a JQUERY Array DOM.
$.map(array,function(n,i){ return (i+i); }) = Create an array from array for example doubling the value by returning a different value. i is the value, n assocname
$.grep(arrayvariable,function(n,i){ return (i>5); }) = Another way to filter array using grep.n is assocname,i is the value
$.grep(arrayvariable,function(n){ return (n>5); }) = Another way to filter array using grep.n is the value
array.reverse() = reverse the array if array is array
$.unique(array of elements) = This returns only unique page elements from the array Note: The array must contain Page elements not standard string or int.
$.isArray(array) = Return true if the array is an array.

Visual Effects

$('#id').show([duration],[function])/.hide(duration,function) = Show in milliseconds and call function when complete.
$('#id').animate(params,[duration],[easing],[function]) = Animate an element params can be css eg. '{ borderWidth: "5px" }' most properties must remove hypen eg. background-color to backgroundColor.

---

JQuery Events

$(document).ready(function( ) { ... }); shortcut is $(function(){ ... })

$('#div1').bind('event',data,function(event){ ... }); = You can just call .bind('onclick',function(event){}); data is optional variable to add some data in. Possible values for event: blur, focus,load, resize, scroll, unload, beforeunload,click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown,keypress, keyup, and error.

$('#div1').unbind('event',function) = Remove the handler from the element.
$('#div1').hover(overfunction,outfunction) = Function to trigger when mouse is hovering and element and out

$('#div1').click(function(event){ ... }); = This is the shortcut to event. blur( ), focus( ), load( ), resize( ), scroll( ), unload( ), beforeunload( ),click( ), dblclick( ), mousedown( ),mouseup( ), mousemove( ), mouseover( ),mouseout( ), mouseenter( ), mouseleave( ), change( ), select( ), submit( ), keydown( ),keypress( ), keyup( ), and error( ).

Event Properties = Contains values
event.altKey = Contains true if the Alt key was pressed.
event.ctrlKey = Contains true if the Ctrl key was pressed.
event.data = Contains the data passed to the jQuery bind( ) function.
event.keyCode = Contains the key code for the pressed key. Use keyCode.fromCharCode() to get the capital letter pressed.
event.pageX = Contains the X mouse coordinates relative to the client area.
event.pageY = Contains the Y mouse coordinates relative to the client area.
event.relatedTarget = Contains the element that the mouse was previously on.
event.result = Contains the last value returned by an event handler.
event.screenX = Contains the X mouse coordinates relative to the screen.
event.screenY = Contains the Y mouse coordinates relative to the screen.
event.shiftKey = Contains true if the Shift key was pressed.
event.target = Contains the element that issued the event.
event.timeStamp = Contains the timestamp (in milliseconds) indicating when the event happened.
event.type = Contains the name of the event.

event.isDefaultPrevented() = Returns true if event.preventDefault( ) was ever called on the event object.
event.isImmediatePropagationStopped( ) = Returns true if event.stopImmediatePropagation( ) was ever called on this event object.
event.isPropagationStopped( ) = Returns true if event.stopPropagation( ) was ever called on this event object.
event.preventDefault( ) = Stops the browser from executing the default action for this event eg.a tag wont take you to the url.
event.stopImmediatePropagation( ) = Stops the remainder of the handlers from being executed. If there is 2 click handler only the first one will be executed.

$('#div').one('click',function(event){ ... }) = This will only process once on click handler.

JQuery Ajax

Note: Ajax call back parameters for Ajax functions are all same with: responseText,statusText,httpobject

$.load(url,param,function(responseText,statusText,httpobject){...}) = Load automatically returns the data use $.post() or $.get() to manipulate the data. url is the path,param is the data to send, function is after complete. You can do it like this as well: $('#id').load(url) = it will directly write it to the element.ResponseText is the content returned, the status is 'success' or 'notmodified', and httpobj is the javascript xmlrequest object.

$.load(url,function(responseText,statusText,httpobject){...}) = Another format.
$.load('ajax.php',{data:1,data:2},getResult) = Format to pass data when there is data to past it become $_POST data.
$('#form_id').serializeArray(); = Converts FORM data to an array that can be pass to $.load function for eg. $.load('ajax.php,$('#form').serializeArray(), function(data){...});This return [{name:a,value:val},{name:b,value:val2}] this prevents duplication of same name with different value.

$('#form_element_id').serialize() = This serializes input object as well as the FORM itself. This return in this format "a=3%3&a=s" $.post("poster.php", {data: 1}, function(data){ $("div").text(data);}); = Post data is alot like $.load you can still use serializeArray. This will use POST to pass data.
$.get("poster.pho", {data: 1},function(data){ $(“div”).text(data); });

$.ajax({options}) = Use this to take full control of your ajax request instead of above functions.
Options:
{ type: 'post', = Type of request
url: 'path.php' = Location of the file,
data: [object,string], = {data:1,data:2} Format or serializeArray()
success: function(data,status){...} = When success request
beforeSend: function(data){ }, = Before to request is made you can edit the data to be send.
fglobal: [bool], = Set to true to register this request to the handler so the script would know if this request has finished.
error: function(httpxml,reason,exception){},= Handles when the request fails.

Other options
async: [bool], = If true this is a normal ajax if false you have to wait for request to complete.
cache: [bool], = To allow the page to be cached.
complete: function(data,status){...},= Is trigger just after the success function.
contentType: [string], = Is the contentype to use for the page like text/html etc.
dataFilter: function(){}, = Handles the data before the data gets return to the request page.
dataType: [xml,html,script,json,jsonp,text],= excepting what data is to return
ifModified: [bool], = This option lets the request be successful only if the response has changed since the last request.
jsonp: [string], = This option overrides the callback function name in a jsonp request.
password: [string], = Password in authenticated page
processData: [bool], = When you want to send objects or other nonprocessed data, set this option to false.
scriptCharset: [string],= This option causes the request to be interpreted using a certain character set. It can be used only for requests with the jsonp or script data type and the GET type.
timeout: number, = This option sets a timeout (in milliseconds) for the request.
username: string, = This option sets the username to be used in response to an HTTP access authentication request by the server.
xhr: xmlrequest = This callback function creates an XMLHttpRequest object. Override this function to create your own XMLHttpRequest object.

Global Ajax Events Handler: AjaxStart(),AjaxSuccess(),AjaxError(),AjaxComplete(),AjaxStop(); = Set flobal to true so that the ajax request will be recognize by these events. }

[Optional] JQuery Form Plugin

Jquery form is a plugin for JQuery to automatically submit Form using Ajax it has a powerful capability of uploading files as well.

$('#formId').ajaxForm([options]) = This initialize your form for ajax submission. Put it inside $(document).ready() function.
var options = {
success: function(responseText,statusText,xhr){...}, = The callback function when the submission is completed.
data: {key1:'value1',key2: 'value2'}, = Extra data to submit along with the form data.
beforeSerialize: function(formObject,options){...}, = Manipulate form data before retrieving the data. Use this if you want to add/edit value of the data.If you want to examine individual element do this: formObject.each(function(){ $(this).find('#elementID').val(value); }) or loop through the elements like this: formObject.each(function(){ $(this).val(newvalue); });
beforeSubmit: function (arr,formObject,options){...},= This is called before the form gets submitted, its adviseable to put your validation in here.Return 'false' to cancel the submission otherwise true to continue. arr argument is an array of all the elements in the form. formObject is the jquery object of the form, options is the option you pass to ajaxForm.
target: '#elementId', = Target is the element on the page to load response text. This can be $('#id'),Dom element, '#id'.(

Other Options -
url: 'process.php', = The url to submit the form to. If null the defauly will be used.
type: 'get', = This can be post or get.
dataType: 'xml', = Expected data to return 'null,xml,script,json'.
resetForm: bool,= If set to true the form get reset when submitted successfully. Reset means going back to their original value rendered by HTML.
clearForm: bool,= IF set to true the form get cleared. Meaning Text input, textarea will be blank.Checkboxes will be checked =false and select boxes to have -1 selectedIndex.
semantic: bool, = Set to true if your server has strict semantic requirements and form has input type="image".
iframe: BOOL, iframeSrc: 'about:blank','javascript:false', forceSync: BOOL = This default to false. Set to true when uploading files.Improve usability when displaying notifications such as 'please wait...'
}

Helpful Functions:
$('#formid').ajaxSubmit(); = Manually submits the form. Handy when you have your own $('#form').submit(function(){ ... return false; //Returning false prevents the form to submit twice. }) event handler.
$('#formid').resetForm() = Reset the form from their original value.
$('#formid').clearForm() = Clear all input to blans, unchecked and unselected.
$('#form input:text').clearFields() = Clear all text input field in the form.