JQuery-Core

Hi
Here I'm going to start jquery training. First of all:
What is jquery?
It is a javascript framework which makes working with javascript easier and more comprehensible. It makes a good APIs for some usual javascript jobs and unify all of methods which are different in every browsers. For example in javascript we are not able to find the position(top and left) of each element. we should write exhausting script code to find it out and finally the behaviour is defferent in some browsers (specially in MSIE). but here in jquery we can call an API to find out it.

var pos = $("#elementId").offset();
alert('top:'+pos.top+' left:'+pos.lef);

you can dowload the latest version of the jquery from here. Both minified and regular versions are avalable in there and every time you can download it. the current verion of jquery is 1.5.
I devide jqurey course to 8 major seasons and in each post i will focus on one of them. The seasons are:

1. Core
2. DOM
3. CSS
4. JavaScript
5. Events
6. Effects
7. Ajax
8. Plugins

Ok let's start.
1. Core

1.1 $(String,Element|jQuery)
$(String expr, Element|jQuery context) returns jQuery

This function accepts a string containing a CSS or basic XPath selector which is then used to
match a set of elements.
The core functionality of jQuery centers around this function. Everything in jQuery is based
upon this, or uses this in some way. The most basic use of this function is to pass in an
expression (usually consisting of CSS or XPath), which then finds all matching elements.
By default, $() looks for DOM elements within the context of the current HTML document.

Example:
Finds all p elements that are children of a div element.
$("div > p")
HTML:
<p>one</p> <div><p>two</p></div> <p>three</p>
Result:
[ <p>two</p> ]

Example:
Searches for all inputs of type radio within the first form in the document
$("input:radio", document.forms[0])
 
Example:
This finds all div elements within the specified XML document.
$("div", xml.responseXML)

1.2 $(String)
$(String html) returns jQuery

Create DOM elements on-the-fly from the provided String of raw HTML.

Example:
Creates a div element (and all of its contents) dynamically,  and appends it to the element
with the ID of body. Internally, an element is created and it's innerHTML property set to the
given markup. It is therefore both quite flexible and limited.
$("<div><p>Hello</p></div>").appendTo("#body")

1.3 $(Element|Array<Element>)
$(Element|Array<Element> elems) returns jQuery

Wrap jQuery functionality around a single or multiple DOM Element(s).
This function also accepts XML Documents and Window objects as valid arguments (even
though they are not DOM Elements).

Example:
Sets the background color of the page to black.
$(document.body).background( "black" );

Example:
Hides all the input elements within a form
$( myForm.elements ).hide()

1.4 $(Function)
$(Function fn) returns jQuery

A shorthand for $(document).ready(), allowing you to bind a function to be executed when
the DOM document has finished loading. This function behaves just like
$(document).ready(), in that it should be used to wrap all of the other $() operations on your
page. While this function is, technically, chainable - there really isn't much use for chaining
against it. You can have as many $(document).ready events on your page as you like.
See ready(Function) for details about the ready event.

Example:
Executes the function when the DOM is ready to be used.
$(function(){
 // Document is ready
});

Example:
Uses both the shortcut for $(document).ready() and the argument to write failsafe jQuery
code using the $ alias, without relying on the global alias.
jQuery(function($) {
 // Your code using failsafe $ alias here...
});

1.5 length()
length() returns Number

The number of elements currently matched.

Example:
$("img").length;
HTML:
<img src="test1.jpg"/> <img src="test2.jpg"/>
Result:
2

1.6 size()
size() returns Number

The number of elements currently matched.

Example:
$("img").size();
HTML:
<img src="test1.jpg"/> <img src="test2.jpg"/>
Result:
2

1.7 get()
get() returns Array<Element>

Access all matched elements. This serves as a backwards-compatible way of accessing all
matched elements (other than the jQuery object itself, which is, in fact, an array of elements).

Example:
Selects all images in the document and returns the DOM Elements as an Array
$("img").get();
HTML:
<img src="test1.jpg"/> <img src="test2.jpg"/>
Result:
[ <img src="test1.jpg"/> <img src="test2.jpg"/> ]

1.8 get(Number)
get(Number num) returns Element

Access a single matched element. num is used to access the Nth element matched.

Example:
Selects all images in the document and returns the first one
$("img").get(0);
HTML:
<img src="test1.jpg"/> <img src="test2.jpg"/>
Result:
[ <img src="test1.jpg"/> ]

1.9 each(Function)
each(Function fn) returns jQuery

Execute a function within the context of every matched element. This means that every time
the passed-in function is executed (which is once for every element matched) the 'this'
keyword points to the specific element.
Additionally, the function, when executed, is passed a single argument representing the
position of the element in the matched set.

Example:
Iterates over two images and sets their src property
$("img").each(function(i){
 this.src = "test" + i + ".jpg";
});
HTML:
<img/><img/>
Result:
<img src="test0.jpg"/><img src="test1.jpg"/>

1.10 index(Element)
index(Element subject) returns Number

Searches every matched element for the object and returns the index of the element, if
found, starting with zero.  Returns -1 if the object wasn't found.

Example:
Returns the index for the element with ID foobar
$("*").index( $('#foobar')[0] )
HTML:
<div id="foobar"><b></b><span id="foo"></span></div>
Result:
0

Example:
Returns the index for the element with ID foo within another element
$("*").index( $('#foo')[0] )
HTML:
<div id="foobar"><b></b><span id="foo"></span></div>
Result:
2

Example:
Returns -1, as there is no element with ID bar
$("*").index( $('#bar')[0] )
HTML:
<div id="foobar"><b></b><span id="foo"></span></div>
Result:
-1

1.11 $.extend(Object)
$.extend(Object prop) returns Object

Extends the jQuery object itself. Can be used to add functions into the jQuery namespace
and to add plugin methods (plugins).

Example:
Adds two plugin methods.
jQuery.fn.extend({
 check: function() {
   return this.each(function() { this.checked = true; });
 },
 uncheck: function() {
   return this.each(function() { this.checked = false; });
 }
});
$("input[@type=checkbox]").check();
$("input[@type=radio]").uncheck();

Example:
Adds two functions into the jQuery namespace
jQuery.extend({
 min: function(a, b) { return a < b ? a : b; },
 max: function(a, b) { return a > b ? a : b; }
});

1.12 $.noConflict()
$.noConflict() returns undefined

Run this function to give control of the $ variable back to whichever library first implemented
it. This helps to make  sure that jQuery doesn't conflict with the $ object of other libraries.
By using this function, you will only be able to access jQuery using the 'jQuery' variable. For
example, where you used to do $("div p"), you now must do jQuery("div p").

Example:
Maps the original object that was referenced by $ back to $
jQuery.noConflict();
// Do something with jQuery
jQuery("div p").hide();
// Do something with another library's $()
$("content").style.display = 'none';

Example:
Reverts the $ alias and then creates and executes a function to provide the $ as a jQuery
alias inside the functions scope. Inside the function the original $ object is not available. This
works well for most plugins that don't rely on any other library.
jQuery.noConflict();
(function($) {
 $(function() {
   // more code using $ as alias to jQuery
 });
})(jQuery);
// other code using $ as an alias to the other library

1.13 eq(Number)
eq(Number pos) returns jQuery

Reduce the set of matched elements to a single element. The position of the element in the
set of matched elements starts at 0 and goes to length - 1.

Example:
$("p").eq(1)
HTML:
<p>This is just a test.</p><p>So is this</p>
Result:
[ <p>So is this</p> ]

1.14 lt(Number)
lt(Number pos) returns jQuery

Reduce the set of matched elements to all elements before a given position. The position of
the element in the set of matched elements starts at 0 and goes to length - 1.

Example:
$("p").lt(1)
HTML:
<p>This is just a test.</p><p>So is this</p>
Result:
[ <p>This is just a test.</p> ]

1.15 gt(Number)
gt(Number pos) returns jQuery

Reduce the set of matched elements to all elements after a given position. The position of
the element in the set of matched elements starts at 0 and goes to length - 1.

Example:
$("p").gt(0)
HTML:
<p>This is just a test.</p><p>So is this</p>
Result:
[ <p>So is this</p> ]

all rights reserved by Mostafa Rastgar and Programmer Assistant weblog