Wednesday, January 11, 2012

jQuery in short


What is jQuery?
jQuery is a library of JavaScript Functions.
jQuery is a lightweight "write less, do more" JavaScript library.
The jQuery library contains the following features:
  • HTML element selections
  • HTML element manipulation
  • CSS manipulation
  • HTML event functions
  • JavaScript Effects and animations
  • HTML DOM traversal and modification
  • AJAX
  • Utilities
Adding the jQuery Library to Your Pages
  • The jQuery library is stored as a single JavaScript file, containing all the jQuery methods.
  • It can be added to a web page with the following mark-up:

Basic jQuery Example

 




Downloading jQuery
Two versions of jQuery are available for downloading: one minified and one uncompressed (for debugging or reading).
Both versions can be downloaded from jQuery.com.
Alternatives to Downloading
If you don't want to store the jQuery library on your own computer, you can use the hosted jQuery library from Google or Microsoft.
The Document Ready Function
You might have noticed that all jQuery methods, in our examples, are inside a document.ready() function:

This is to prevent any jQuery code from running before the document is finished loading (is ready).
jQuery Syntax
The jQuery syntax is tailor made for selecting HTML elements and perform some action on the element(s).
Basic syntax is:  $(selector).action()
•A dollar sign to define jQuery
•A (selector) to "query (or find)" HTML elements
•A jQuery action() to be performed on the element(s)
Examples:
$(this).hide() - hides current element
$("p").hide() - hides all paragraphs
$("p.test").hide() - hides all paragraphs with class="test"
$("#test").hide() - hides the element with id="test"

jQuery Selectors
Use our excellent jQuery Selector Tester to experiment with the different selectors.
Selector
Example
Selects
*
$("*")
All elements
$("#lastname")
The element with id=lastname
$(".intro")
All elements with class="intro"
$("p")
All p elements
.class.class
$(".intro.demo")
All elements with the classes "intro" and "demo"



$("p:first")
The first p element
$("p:last")
The last p element
$("tr:even")
All even tr elements
$("tr:odd")
All odd tr elements



$("ul li:eq(3)")
The fourth element in a list (index starts at 0)
$("ul li:gt(3)")
List elements with an index greater than 3
$("ul li:lt(3)")
List elements with an index less than 3
$("input:not(:empty)")
All input elements that are not empty



$(":header")
All header elements h1, h2 ...
$(":animated")
All animated elements



$(":contains('W3Schools')")
All elements which contains the text
$(":empty")
All elements with no child (elements) nodes
:hidden
$("p:hidden")
All hidden p elements
$("table:visible")
All visible tables



s1,s2,s3
$("th,td,.intro")
All elements with matching selectors



$("[href]")
All elements with a href attribute
$("[href='default.htm']")
All elements with a href attribute value equal to "default.htm"
$("[href!='default.htm']")
All elements with a href attribute value not equal to "default.htm"
$("[href$='.jpg']")
All elements with a href attribute value ending with ".jpg"



$(":input")
All input elements
$(":text")
All input elements with type="text"
$(":password")
All input elements with type="password"
$(":radio")
All input elements with type="radio"
$(":checkbox")
All input elements with type="checkbox"
$(":submit")
All input elements with type="submit"
$(":reset")
All input elements with type="reset"
$(":button")
All input elements with type="button"
$(":image")
All input elements with type="image"
$(":file")
All input elements with type="file"



$(":enabled")
All enabled input elements
$(":disabled")
All disabled input elements
$(":selected")
All selected input elements
$(":checked")
All checked input elements
jQuery Effects
Here are some examples of effect functions in jQuery: 
Method
Description
Performs a custom animation 
(of a set of CSS properties) for selected elements
Removes all queued functions for the selected element
delay()
Sets a delay for all queued functions for the selected element
dequeue()
Runs the next queued functions for the selected element
Gradually changes the opacity, for 
selected elements, from hidden to visible
Gradually changes the opacity, for 
selected elements, from visible to hidden
Gradually changes the opacity, for 
selected elements, to a specified opacity
fadeToggle()

Hides selected elements
queue()
Shows the queued functions for the selected element
Shows hidden selected elements
Gradually changes the height, 
for selected elements, from hidden to visible
Toggles between slideUp() 
and slideDown() for selected elements
Gradually changes the height,
for selected elements, from visible to hidden
Stops a running animation on 
selected elements
Toggles between hide() and show(), 
or custom functions, for selected elements
Function
Description
$(selector).hide()
Hide selected elements
$(selector).show()
Show selected elements
$(selector).toggle()
Toggle (between hide and show) selected elements
$(selector).slideDown()
Slide-down (show) selected elements
$(selector).slideUp()
Slide-up (hide) selected elements
$(selector).slideToggle()
Toggle slide-up and slide-down of selected elements
$(selector).fadeIn()
Fade in selected elements
$(selector).fadeOut()
Fade out selected elements
$(selector).fadeTo()
Fade out selected elements to a given opacity
$(selector).animate()
Run a custom animation on selected element

jQuery Callback Functions

A callback function is executed after the current animation is 100% finished.
jQuery Callback Functions
JavaScript statements are executed line by line. However, with animations, the next line of code can be run even though the animation is not finished. This can create errors.
To prevent this, you can create a callback function.
A callback function is executed after the current animation (effect) is finished.
Typical syntax: $(selector).hide(speed,callback)
 The callback parameter is a function to be executed after the hide effect is completed:
jQuery HTML Manipulation
jQuery contains powerful methods (functions) for changing and manipulating HTML elements and attributes.
jQuery HTML Methods
The following table lists all the methods used to manipulate the DOM.
The methods below work for both HTML and XML documents. Exception: the html() method.
Method
Description
Adds one or more classes (for CSS) to selected elements
Inserts content after selected elements
Inserts content at the end of (but still inside) selected elements
Inserts content at the end of (but still inside) selected elements
Sets or returns an attribute and value of selected elements
Inserts content before selected elements
Makes a copy of selected elements
Removes (but keeps a copy of) selected elements
Removes all child elements and 
content from selected elements
Checks if any of the selected elements 
have a specified class (for CSS)
Sets or returns the content of selected elements
Inserts HTML markup or elements after selected elements
Inserts HTML markup or elements before selected elements
Inserts content at the beginning of 
(but still inside) selected elements
Inserts content at the beginning of 
(but still inside) selected elements
Removes selected elements
Removes an attribute from selected elements
Removes one or more classes (for CSS) from selected elements
Replaces selected elements with new content
Replaces selected elements with new content
Sets or returns the text content of selected elements
Toggles between adding/removing one or more classes 
(for CSS) from selected elements
Removes the parent element of the selected elements
Sets or returns the value attribute of the selected 
elements (form elements)
Wraps specified HTML element(s) around each selected element
Wraps specified HTML element(s) around all selected elements
Wraps specified HTML element(s) around the 
content of each selected element

jQuery CSS Manipulation

jQuery has one important method for CSS manipulation: css()
The css() method has three different syntaxes, to perform different tasks.
  • css(name) - Return CSS property value
  • css(name,value) - Set CSS property and value
  • css({properties}) - Set multiple CSS properties and values
$("p").css({"background-color":"yellow","font-size":"200%"});
$("#div1").height("200px");
$("#div2").width("300px");

CSS Properties
Description
$(selector).css(name)
Get the style property value of the first matched element
$(selector).css(name,value)
Set the value of one style property for matched elements
$(selector).css({properties})
Set multiple style properties for matched elements
$(selector).height(value)
Set the height of matched elements
$(selector).width(value)
Set the width of matched elements
jQuery CSS Methods
The following table lists all the methods used to manipulate CSS properties.
Method
Description
Adds one or more classes to selected elements
Sets or returns one or more style properties for selected elements
Checks if any of the selected elements have a specified class
Sets or returns the height of selected elements
Sets or returns the position (relative to the document) for selected elements
Returns the first parent element that is positioned
Returns the position (relative to the parent element) of the first selected element
Removes one or more classes from selected elements
Sets or returns the horizontal position of the scrollbar for the selected elements
Sets or returns the vertical position of the scrollbar for the selected elements
Toggles between adding/removing one or more classes from selected elements
Sets or returns the width of selected elements

jQuery Event Methods

Event methods trigger, or bind a function to an event for all matching elements.
Trigger example:
$("button").click() - triggers the click event for a button element.
Binding example:
$("button").click(function(){$("img").hide()}) - binds a function to the click event.
Event methods trigger, or bind a function to an event for all matching elements.
Trigger example:
$("button").click() - triggers the click event for a button element.
Binding example:
$("button").click(function(){$("img").hide()}) - binds a function to the click event.
The following table lists all the methods used to handle events.

Method
Description
Add one or more event handlers to matching elements
Triggers, or binds a function to the blur event of selected elements
Triggers, or binds a function to the change event of selected elements
Triggers, or binds a function to the click event of selected elements
Triggers, or binds a function to the dblclick event of selected elements
Add one or more event handlers to current, or future, specified child elements of the matching elements
Remove all event handlers added with the live() function
Triggers, or binds a function to the error event of selected elements
event.currentTarget
The current DOM element within the event bubbling phase
event.data
Contains the optional data passed to jQuery.fn.bind when the current executing handler was bound
Returns whether event.preventDefault() was called for the event object
event.isImmediatePropagationStopped()
Returns whether event.stopImmediatePropagation() was called for the event object
event.isPropagationStopped()
Returns whether event.stopPropagation() was called for the event object
The mouse position relative to the left edge of the document
The mouse position relative to the top edge of the document
Prevents the default action of the event
event.relatedTarget
The other DOM element involved in the event, if any
This attribute contains the last value returned by an event handler that was triggered by this event, unless the value was undefined
event.stopImmediatePropagation()
Prevents other event handlers from being called
event.stopPropagation()
Prevents the event from bubbling up the DOM tree, preventing any parent handlers from being notified of the event
The DOM element that initiated the event
This attribute returns the number of milliseconds since January 1, 1970, when the event is triggered
Describes the nature of the event
Which key or button was pressed for a key or button event
Triggers, or binds a function to the focus event of selected elements
Binds a function to the focusin event of selected elements
Binds a function to the focusout event of selected elements
Binds one or two functions to the hover event of selected elements
Triggers, or binds a function to the keydown event of selected elements
Triggers, or binds a function to the keypress event of selected elements
Triggers, or binds a function to the keyup event of selected elements
Add one or more event handlers to current, or future, matching elements
Triggers, or binds a function to the load event of selected elements
Triggers, or binds a function to the mouse down event of selected elements
Triggers, or binds a function to the mouse enter event of selected elements
Triggers, or binds a function to the mouse leave event of selected elements
Triggers, or binds a function to the mouse move event of selected elements
Triggers, or binds a function to the mouse out event of selected elements
Triggers, or binds a function to the mouse over event of selected elements
Triggers, or binds a function to the mouse up event of selected elements
Add one or more event handlers to matching elements. This handler can only be triggered once per element
Binds a function to the ready event of a document
(when an HTML document is ready to use)
Triggers, or binds a function to the resize event of selected elements
Triggers, or binds a function to the scroll event of selected elements
Triggers, or binds a function to the select event of selected elements
Triggers, or binds a function to the submit event of selected elements
Binds two or more functions to the toggle between for the click event for selected elements
Triggers all events bound to the selected elements
Triggers all functions bound to a specified event for the selected elements
Remove an added event handler from selected elements
Remove an event handler to selected elements, now or in the future
Triggers, or binds a function to the unload event of selected elements

What is AJAX?
AJAX = Asynchronous JavaScript and XML.

AJAX is a technique for creating fast and dynamic web pages.

AJAX allows web pages to be updated asynchronously by exchanging small amounts of data with the server behind the scenes. This means that it is possible to update parts of a web page, without reloading the whole page.
AJAX and jQuery
jQuery provides a rich set of methods for AJAX web development.
With jQuery AJAX, you can request TXT, HTML, XML or JSON data from a remote server using both HTTP Get and HTTP Post.
And you can load remote data directly into selected HTML elements of your web page!
Write Less, Do More
The jQuery load() method is a simple (but very powerful) AJAX function. It has the following syntax:
$(selector).load(url,data,callback)
Use the selector to define the HTML element(s) to change, and the url parameter to specify a web address for your data.
Only if you want to send data to the server, you need to use the data parameter. Only if you need to trigger a function after completion, you will use the callback parameter.
Low Level AJAX
$.ajax(options) is the syntax of the low level AJAX function.
$.ajax offers more functionality than higher level functions like load, get, and post, but it is also more difficult to use.
The option parameter takes name|value pairs defining url data, passwords, data types, filters, character sets, timeout and error functions.
Request
Description
$(selector).load(url,data,callback)
Load remote data into 
selected elements
$.ajax(options)
Load remote data into an 
XMLHttpRequest object
jQuery AJAX Methods
AJAX is the art of exchanging data with a server, and update parts of a web page - without reloading the whole page.
The following table lists all the jQuery AJAX methods:
Method
Description
Performs an AJAX request
Specifies a function to 
run when the AJAX request completes
Specifies a function to 
run when the AJAX request completes with an error
Specifies a function to 
run before the AJAX request is sent
Sets the default values 
for future AJAX requests
Specifies a function to 
run when the first AJAX request begins
Specifies a function to
run when all AJAX requests have completed
Specifies a function to 
run an AJAX request completes successfully
Loads data from a server 
using an AJAX HTTP GET request
Loads JSON-encoded data 
from a server using a HTTP GET request
Loads (and executes) a JavaScript 
from the a server using an AJAX HTTP GET request
Loads data from a server and 
puts the returned HTML into the selected element
Creates a serialized representation 
of an array or object (can be used 
as URL query string for AJAX requests)
Loads data from a server using 
an AJAX HTTP POST request
Encodes a set of form elements 
as a string for submission
Encodes a set of form elements as 
an array of names and values

JQuery versus Dojo versus YUI
In search for a reliable open source javascript library/framework that works cross-browser, I came across the following:

    JQuery
    YUI (The Yahoo! User Interface Library)
    Dojo Toolkit

JQuery

Pros:
- JQuery is the most popular one of them all.
- It is very easy to use and to understand.
- The core library is only 15Kb in size.
- Their statement is: ‘The Write Less, Do More, Javascript Library’.

Cons:
- Hard to use with object oriented programming
- JQuery supports plug-ins, but all these plug-ins are not verified.
- JQuery is a library


YUI

Pros:
- It is developed by Yahoo
- Fully documented, with a great API browser
- Very consistent and reliable
- Also contains unit testing framework
- YUI is a framework

Cons:
- Heavy page weight
- Very few utility or helper functions/methods
- Lacks the use of chaining methods together


Dojo Toolkit

Pros:
- Debug your code in Firebug
- Dojo integrated in Zend Framework
- Hierarchical package system speeds loading
- Dojo is a framework

Cons:
- Dojo fails in online documentation




No comments: