Friday, October 7, 2011

keypress(Function)

keypress(Function fn) returns jQuery

Bind a function to the keypress event of each matched element.

Example:

$("p").keypress( function() { alert("Hello"); } );

HTML:
<p>Hello</p>

Result:
<p onkeypress="alert('Hello');">Hello</p>

dblclick(Function)

dblclick(Function fn) returns jQuery

Bind a function to the dblclick event of each matched element.

Example:

$("p").dblclick( function() { alert("Hello"); } );

HTML:
<p>Hello</p>

Result:
<p ondblclick="alert('Hello');">Hello</p>

focus(Function)

focus(Function fn) returns jQuery

Bind a function to the focus event of each matched element.

Example:

$("p").focus( function() { alert("Hello"); } );

HTML:
<p>Hello</p>

Result:
<p onfocus="alert('Hello');">Hello</p>

submit()

submit() returns jQuery

Trigger the submit event of each matched element. This causes all of the functions that have been bound to that submit event to be executed, and calls the browser's default submit action on the matching element(s). This default action can be prevented by returning false from one of the functions bound to the submit event.

Example:

Triggers all submit events registered to the matched form(s), and submits them.
$("form").submit();

submit(Function)

submit(Function fn) returns jQuery

Bind a function to the submit event of each matched element.

Example:

Prevents the form submission when the input has no value entered.

$("#myform").submit( function() {
return $("input", this).val().length > 0;
} );

HTML:

<form id="myform"><input /></form>

scroll(Function)

scroll(Function fn) returns jQuery
Bind a function to the scroll event of each matched element.

Example:

$("p").scroll( function() { alert("Hello"); } );

HTML:
<p>Hello</p>

Result:
<p onscroll="alert('Hello');">Hello</p>

Sunday, October 2, 2011

ready()

ready(Function fn) returns jQuery

Bind a function to be executed whenever the DOM is ready to be traversed and manipulated. This is probably the most important function included in the event module, as it can greatly improve the response times of your web applications.
In a nutshell, this is a solid replacement for using window.onload, and attaching a function to that. By using this method, your bound function will be called the instant the DOM is ready to be read and manipulated, which is when what 99.99% of all JavaScript code needs to run.
There is one argument passed to the ready event handler: A reference to the jQuery function. You can name that argument whatever you like, and can therefore stick with the $ alias without risk of naming collisions.

Please ensure you have no code in your onload event handler, otherwise $(document).ready() may not fire.

Example:

$(document).ready(function(){ Your code here... });

hover()

hover(Function over, Function out) returns jQuery

A method for simulating hovering (moving the mouse on, and off, an object). This is a custom method which provides an 'in' to a frequent task.

Whenever the mouse cursor is moved over a matched element, the first specified function is fired. Whenever the mouse moves off of the element, the second specified function fires. Additionally, checks are in place to see if the mouse is still within the specified element itself (for example, an image inside of a div), and if it is, it will continue to 'hover', and not move out (a common error in using a mouseout event handler).

Example:

$("p").hover(function(){
$(this).addClass("hover");
},function(){
$(this).removeClass("hover");
});

toggle()

toggle(Function even, Function odd) returns jQuery
Toggle between two function calls every other click. Whenever a matched element is clicked, the first specified function is fired, when clicked again, the second is fired. All subsequent clicks continue to rotate through the two functions.

Use unbind("click") to remove.

Example:


$("p").toggle(function(){
$(this).addClass("selected");
},function(){
$(this).removeClass("selected");
});

trigger()

trigger(String type, Array data) returns jQuery
Trigger a type of event on every matched element. This will also cause the default action of the browser with the same name (if one exists) to be executed. For example, passing 'submit' to the trigger() function will also cause the browser to submit the form. This default action can be prevented by returning false from one of the functions bound to the event.

You can also trigger custom events registered with bind.

Example:

$("p").trigger("click")

HTML:
<p click="alert('hello')">Hello</p>

Result:
alert('hello')

unbind()

unbind(String type, Function fn) returns jQuery
The opposite of bind, removes a bound event from each of the matched elements. Without any arguments, all bound events are removed. If the type is provided, all bound events of that type are removed. If the function that was passed to bind is provided as the second argument, only that specific event handler is removed.

Example:

$("p").unbind()

HTML:
<p onclick="alert('Hello');">Hello</p>

Result:
[ <p>Hello</p> ]

one()

one(String type, Object data, Function fn) returns jQuery

Binds a handler to a particular event (like click) for each matched element. The handler is executed only once for each element. Otherwise, the same rules as described in bind() apply. The
event handler is passed an event object that you can use to prevent default behaviour. To stop both default action and event bubbling, your handler has to return false.
In most cases, you can define your event handlers as anonymous functions (see first example). In cases where that is not possible, you can pass additional data as the second paramter (and the handler function as the third), see second example.

Example:


$("p").one("click", function(){
alert( $(this).text() );
});

HTML:
<p>Hello</p>

Result:
alert("Hello")

bind()

bind(String type, Object data, Function fn) returns jQuery

Binds a handler to a particular event (like click) for each matched element. The event handler is passed an event object that you can use to prevent default behaviour. To stop both default action and event bubbling, your handler has to return false.
In most cases, you can define your event handlers as anonymous functions (see first example). In cases where that is not possible, you can pass additional data as the second parameter (and the handler function as the third), see second example.
Calling bind with an event type of "unload" will automatically use the one method instead of bind to prevent memory leaks.

Example:

<div class="codeview">
$("p").bind("click", function(){
alert( $(this).text() );
});

HTML:
<p>Hello</p>

Result:
alert("Hello")
</div>

$.browser()

$.browser() returns Boolean
Contains flags for the useragent, read from navigator.userAgent. Available flags are: safari, opera, msie, mozilla
This property is available before the DOM is ready, therefore you can use it to add ready events only for certain browsers.
There are situations where object detections is not reliable enough, in that cases it makes sense to use browser detection. Simply try to avoid both!
A combination of browser and object detection yields quite reliable results.

Example:

Returns true if the current useragent is some version of microsoft's internet explorer
$.browser.msie

Example:
Alerts "this is safari!" only for safari browsers
if($.browser.safari) { $( function() { alert("this is safari!"); } ); }

$.map(Array,Function)

$.map(Array array, Function fn) returns Array
Translate all items in an array to another array of items.

The translation function that is provided to this method is called for each item in the array and is passed one argument: The item to be translated.
The function can then return the translated value, 'null' (to remove the item), or an array of values - which will be flattened into the full array.

Example:

Maps the original array to a new one and adds 4 to each value.
$.map( [0,1,2], function(i){
return i + 4;
});

Result:
[4, 5, 6]

$.unique(Array)

$.unique(Array array) returns Array
Reduce an array (of jQuery objects only) to its unique elements.

Example:

Reduces the arrays of jQuery objects to unique elements by removing the duplicates of x2 and x3
$.unique( [x1, x2, x3, x2, x3] )

Result:
[x1, x2, x3]

$.merge(Array,Array)

$.merge(Array first, Array second) returns Array
Merge two arrays together by concatenating them.

Example:

Merges two arrays.
$.merge( [0,1,2], [2,3,4] )
Result:
[0,1,2,2,3,4]

$.trim(String)

$.trim(String str) returns String
Remove the whitespace from the beginning and end of a string.

Example:

$.trim(" hello, how are you? ");

Result:
"hello, how are you?"

$.each(Object,Function)

$.each(Object obj, Function fn) returns Object
A generic iterator function, which can be used to seamlessly iterate over both objects and arrays. This function is not the same as $().each() - which is used to iterate, exclusively, over a jQuery object. This function can be used to iterate over anything.

The callback has two arguments:the key (objects) or index (arrays) as first the first, and the value as the second.

Example:

This is an example of iterating over the items in an array, accessing both the current item and its
index.
$.each( [0,1,2], function(i, n){
alert( "Item #" + i + ": " + n );
});

$.extend(Object,Object,Object)

$.extend(Object target, Object prop1, Object propN) returns Object
Extend one object with one or more others, returning the original, modified, object. This is a great utility for simple inheritance.

Example:

Merge settings and options, modifying settings
var settings = { validate: false, limit: 5, name: "foo" };
var options = { validate: true, name: "bar" };
jQuery.extend(settings, options);

Result:
settings == { validate: true, limit: 5, name: "bar" }

Saturday, October 1, 2011

css(String key, String|Number value)

css(String key, String|Number value) returns jQuery
Set a single style property to a value, on all matched elements. If a number is provided, it is automatically converted into a pixel value.

Example:

Changes the color of all paragraphs to red
$("p").css("color","red");

HTML:
<p>Test Paragraph.</p>

Result:
<p style="color:red;">Test Paragraph.</p>

css(Map)

css(Map properties) returns jQuery
Set a key/value object as style properties to all matched elements. This serves as the best way to set a large number of style properties on all matched elements.

Example:

Sets color and background styles to all p elements.
$("p").css({ color: "red", background: "blue" });

HTML:
<p>Test Paragraph.</p>

Result:
<p style="color:red; background:blue;">Test Paragraph.</p>

css(String)

css(String name) returns String

Access a style property on the first matched element. This method makes it easy to retrieve a style property value from the first matched element.

Example:

Retrieves the color style of the first paragraph
$("p").css("color");

HTML:
<p style="color:red;">Test Paragraph.</p>

Result:
"red"