jQuery basics

API: http://api.jquery.com/

Include by adding this in your page head section

<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js"></script>

jQuery provides a jQuery function object.

Remember that functions are first-class objects in JavaScript. This means that they can have properties like any other objects. Since properties are objects and so are functions, it follows that a function can have a property that is itself a function!

Applying this to jQuery, the jQuery function can have properties that are functions themselves. To illustrate

var jQuery = function(arg1, optionals) {...}
jQuery.ajax = function(arg1, arg2) {...//handling ajax }

So you can then call jQuery as a function itself (as in jQuery(...)) and call invoke a function that is a property of the jQuery function object itself (as in jQuery.ajax(...))

The jQuery function returns a jQuery object, i.e. object of type jQuery. The object it returns has a collection of elements from the DOM that match the argument you sent to the jQuery function.

And being a jQuery object, it has methods that can be applied on a jQuery object and the DOM elements it contains. Methods include .ready(func) which invokes the callback function func when the DOM is ready (remember the DOM is being populated sequentially while traversing down the page, and this takes an amount of time we cannot predict, i.e. asynchronous and hence the need for a callback.

Using jQuery to check if the DOM is ready.

jQuery(document).ready(function() {
// script code goes here.
});

Technically calling a jQuery function would look like jQuery(myArgument), but you can replace the word jQuery with a $ sign, so $(myArgument). So is an alias for the jQuery function. The above code snippet can therefore be shortened to

$(function() {
// script code goes here.
});

This shortening makes sense when you look at this snippet in the original jQuery.js source code.

...
// HANDLE: $(function)
// Shortcut for document ready
} else if ( jQuery.isFunction( selector ) ) {
 return rootjQuery.ready( selector );
}
...

The function sent in here is a callback function, which jQuery ‘calls back’ when the invoking jQuery object (specifically it’s contained DOM elements) are ‘ready’ to be worked with. Remember the hierarchy of window, document, and DOM elements.

To get a DOM element of a given type (e.g. body, p, etc), pass the node type to the jQuery method.

$('body')

To get a DOM element with id "myDomElement" pass the id into the jQuery method prepended by #.

$("#myDomElement")
//or
$('#myDomElement')
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s