A jQuery-powered introduction to jQuery - by Mario Alviano

Introduction
Select DOM elements
DOM manipulation
Events and animations
Simple Ajax
jQuery frameworks and resources

http://archives.alviano.com/teaching/jquery/seminario/

or

http://tinyurl.com/alviano-jquery

Back

Introduction

jQuery features

jQuery is a general-purpose JavaScript library
Common JavaScript interactions made easy by jQuery

HTML document traversing
Event handling
Animating
Ajax interactions

Strength of the framework

Lightweight footprint: few KBs of scripts
CSS3 compliant: support (and extends) CSS selectors
Cross-browser: runs in almost all browsers

Model-View-Controller HTML5

The jQuery wrapper

The framework relies on a JavaScript class wrapping an array of DOM elements
Instances of this class are obtained by calling the jQuery function

jQuery(selector) or $(selector)
Selects DOM elements according to a CSS selector
Example
- jQuery("div p a") or $("div p a")
  Selects all links contained in a paragraph which is contained in a div
- jQuery("div.content td.number") or $("div.content td.number")
  Selects all table cells with class number which are contained in a div with class content
jQuery(function) or $(function)
Adds a function to the onload method of the document
Example
- jQuery(function() { alert("Hello, World!!!"); }) or $(function() { alert("Hello, World!!!"); })
  Shows an alert after loading the document
jQuery(html code) or $(html code)
Creates DOM elements (to be attached to document)
Example
- jQuery("<strong>Hello!</strong>") or $("<strong>Hello!</strong>")
  Creates a string strongly emphasized
- jQuery("<div><img src='somewhere' /></div>") or $("<div><img src='somewhere' /></div>")
  Creates a div containing an image
A useful alias for the jQuery function: $(...) ShowHide

Setup the framework

Just include the jQuery script file in the 'head' section:

<script src="http://code.jquery.com/jquery-X.Y.Z.min.js"></script>

Back

Select DOM elements

A declarative approach for selecting DOM elements

jQuery supports all CSS3 selectors and filters
It also introduces new useful filters

Basic selectors Positional filters Other CSS3 filters New filters

Managing the wrapped set

Selected (or created) DOM elements are stored in a wrapped array
All operations on arrays are applicable to the wrapped set
The wrapped set can be modified by adding and removing elements

size()
get(index)
index(element)
slice(begin, end)
not(expression)
filter(expression)
has(expression)
Out of the scope of this talk!

Operations for manipulating DOM elements in the wrapped set

More interesting and discussed in the next slides!

Basic selectors

Selector	Description
*	Matches any element.
E	Matches all elements with tag name E.
E	F Matches all elements with tag name F that are descendants of E.
E>F	Matches all elements with tag name F that are direct children of E.
E+F	Matches all elements with tag name F that are immediately preceded by sibling E.
E~F	Matches all elements with tag name F preceded by any sibling E.
E.C	Matches all elements with tag name E with class name C. Omitting E is the same as *.C.
E#I	Matches all elements with tag name E with the id of I. Omitting E is the same as *#I.
E[A]	Matches all elements with tag name E that have attribute A of any value.
E[A=V]	Matches all elements with tag name E that have attribute A whose value is exactly V.
E[A^=V]	Matches all elements with tag name E that have attribute A whose value starts with V.
E[A$=V]	Matches all elements with tag name E that have attribute A whose value ends with V.
E[A!=V]	Matches all elements with tag name E that have attribute A whose value doesn't match the value V, or that lack attribute A completely.
E[A*=V]	Matches all elements with tag name E that have attribute A whose value contains V.

Positional filters

Selector	Description
:first	Matches the first match within the context. li a:first returns the first link that’s a descendant of a list item.
:last	Matches the last match within the context. li a:last returns the last link that’s a descendant of a list item.
:first-child	Matches the first child element within the context. li:first-child returns the first list item of each list.
:last-child	Matches the last child element within the context. li:last-child returns the last list item of each list.
:only-child	Returns all elements that have no siblings.
:nth-child(n)	Matches the nth child element within the context. li:nth-child(2) returns the second list item of each list.
:nth-child(even\|odd)	Matches even or odd children within the context. li:nth- child(even) returns the even list items of each list.
:nth-child(Xn+Y)	Matches the nth child element computed by the supplied formula. If Y is 0, it may be omitted. li:nth-child(3n) returns every third list item, whereas li:nth-child(5n+1) returns the item after every fifth element.
:even	Matches even elements within the context. li:even returns every even list item.
:odd	Matches odd elements within the context. li:odd returns every odd list item.
:eq(n)	Matches the nth matching element.
:gt(n)	Matches matching elements after and excluding the nth matching element.
:lt(n)	Matches matching elements before and excluding the nth matching element.

Other CSS3 filters

Selector	Description
:checked	Selects only checkboxes or radio elements in checked state.
:disabled	Selects only elements in disabled state.
:enabled	Selects only elements in enabled state.
:not(selector)	Negates the specified selector.

New filters

Selector	Description
:animated	Selects only elements that are currently under animated control.
:button	Selects only button elements (input[type=submit], input[type=reset], input[type=button], or button).
:checkbox	Selects only checkbox elements (input[type=checkbox]).
:contains(food)	Selects only elements containing the text food.
:file	Selects only file input elements (input[type=file]).
:has(selector)	Selects only elements that contain at least one element that matches the specified selector.
:header	Selects only elements that are headers; for example, <h1> through <h6> elements.
:hidden	Selects only elements that are hidden.
:image	Selects only image input elements (input[type=image]).
:input	Selects only form elements (input, select, textarea, button).
:parent	Selects only elements that have children (including text), but not empty elements.
:password	Selects only password elements (input[type=password]).
:radio	Selects only radio elements (input[type=radio]).
:reset	Selects only reset buttons (input[type=reset] or button[type=reset]).
:selected	Selects only
:submit	Selects only submit buttons (button[type=submit] or input[type=submit]).
:text	Selects only text elements (input[type=text]).
:visible	Selects only elements that are visible.

Back

DOM manipulation

Adding and removing CSS classes

addClass(names)
Adds the specified classes to the wrapped set
removeClass(names)
Removes the specified classes to the wrapped set
toggleClass(names)
Each specified class is removed from each element in the wrapped set that have the class, and added to the other elements.

Example 1

$("#addremove-example-1 div.thumb img").addClass("small"); Adds the 'small' class to all images contained in divs with class 'thumb' (within this block) Execute

$("#addremove-example-1 div.thumb img"). removeClass("small"); Removes the 'small' class to all images contained in divs with class 'thumb' (within this block) Execute

$("#addremove-example-1 div.thumb img").toggleClass("small"); Toggles the 'small' class to all images contained in divs with class 'thumb' (within this block) Execute

Example 2

Selector	Description
:checked	Selects only checkboxes or radio elements in checked state.
:disabled	Selects only elements in disabled state.
:enabled	Selects only elements in enabled state.
:not(selector)	Negates the specified selector.

$("#addremove-example-2 table tr:even").addClass("alt");
Adds the 'alt' class to all even rows of tables (within this block) Execute

$("#addremove-example-2 table tr:even").removeClass("alt");
Removes the 'alt' class to all even rows of tables (within this block) Execute

$("#addremove-example-2 table tr").toggleClass("alt");
Toggles the 'alt' class to all rows of tables (within this block) Execute

Setting element content (part 1)

html(content)
Sets the passed HTML fragment as the content of all matched elements
text(content)
Sets the passed text as the content of all matched elements

Example 1

This is a div with class 'inject'.

$("#setcontent-example-1 div.inject").html( "<p>Hello,</p><p>World!!!</p>" ); Execute

$("#setcontent-example-1 div.inject").text( "<p>Hello,</p><p>World!!!</p>" ); Execute

append(content)
Appends the passed content to the content of all matched elements.
If 'content' is a jQuery selection, the elements in the wrapped set are moved into the first target element and copied in the other elements.

Example 2

This is a div with class 'inject'.

$("#setcontent-example-2 div.inject").append( "<p>This paragraph has been appended!</p>" ); Execute

$("#setcontent-example-2 div.inject").append( $("#setcontent-example-2 div.inject p:first") ); Execute

prepend(content)
Prepends the passed content to the content of all matched elements.
If 'content' is a jQuery selection, the elements in the wrapped set are moved into the first target element and copied in the other elements.

Example 3

This is a div with class 'inject'.

$("#setcontent-example-3 div.inject").prepend( "<p>This paragraph has been prepended!</p>" ); Execute

$("#setcontent-example-3 div.inject").prepend( $("#setcontent-example-3 div.inject p:last") ); Execute

Setting element content (part 2)

before(content)
Inserts the passed content before each matched elements.
If 'content' is a jQuery selection, the elements in the wrapped set are moved before the first target element and copied in the other elements.

Example 4

This is a div with class 'inject'.

$("#setcontent-example-4 div.inject p:first").before( "<p>This paragraph has been inserted before " + "the first paragraph!</p>" ); Execute

$("#setcontent-example-4 div.inject p:first").before( $("#setcontent-example-4 div.inject p:last") ); Execute

after(content)
Inserts the passed content after each matched elements.
If 'content' is a jQuery selection, the elements in the wrapped set are moved after the first target element and copied in the other elements.

Example 5

This is a div with class 'inject'.

$("#setcontent-example-5 div.inject p:last").after( "<p>This paragraph has been inserted after!</p>" ); Execute

$("#setcontent-example-5 div.inject p:last").after( $("#setcontent-example-5 div.inject p:first") ); Execute

Similar functions with reverse targets-content order

appendTo(targets)
prependTo(targets)
insertBefore(targets)
insertAfter(targets)

Other manipulation functions

remove()
detach()
empty()
clone()

Getting and setting form content

val()
Returns the value of the input element in the wrapped set (or an array of values if the wrapped set contains more than one element)
val(content)
Sets the value of the input element in the wrapped set
serialize()
Returns a string representing all values in a form (useful for passing data to a server page)

Example 1

This is a div with class 'inject'.

$("#form-example-1 div.inject").text( $("#form-example-1 input[type=text][name='name']").val() ); Execute

$("#form-example-1 input[type=text][name='name']").val("Mario"); Execute

alert($("#form-example-1 form[name='myform']").serialize()); Execute

Back

Events and animations

Manage event handlers

bind(event, handler)
Adds a handler function to the specified event of all elements in the wrapped set
one(event, handler)
Like bind, but the handler is removed after firing
unbind(event, handler)
Removes a handler for the specified event of all elements in the wrapped set.
If handler is omitted, all handlers of the specified event are removed.

Example 1

This is a div with class 'inject'.

$("#event-example-1 input[name='button-1']").bind("click", function() { $("#event-example-1 div.inject").append( "<p>Appended by button-1.</p>" ); } ); Execute

$("#event-example-1 input[name='button-2']").one("click", function() { $("#event-example-1 div.inject").append( "<p>Appended by button-2.</p>" ); } ); Execute

var myListener = function(){ alert('Hello, World!!!'); }; (decleared in main.js) $("#event-example-1 input[name='button-3']").bind("click", myListener); $("#event-example-1 input[name='button-3']").bind("click", function() { alert('I will survive!'); } ); $("#event-example-1 input[name='button-4']").bind("click", function() { $("#event-example-1 input[name='button-3']") .unbind("click", myListener); } ); $("#event-example-1 input[name='button-5']").bind("click", function() { $("#event-example-1 input[name='button-3']") .unbind("click"); } ); Execute

Common events

Animate DOM elements

show(speed, callback)
Makes wrapped elements visible. An optional speed among 'slow', 'normal' and 'fast' can be specified. An optional function to be invoked after the animation can also be specified.
hide(speed, callback)
Makes wrapped elements invisible. An optional speed among 'slow', 'normal' and 'fast' can be specified. An optional function to be invoked after the animation can also be specified.
toggle(speed, callback)
Makes visible wrapped elements invisible, and invisible wrapped elements visibile. An optional speed among 'slow', 'normal' and 'fast' can be specified. An optional function to be invoked after the animation can also be specified.

Example 1

$("#animation-example-1 img").show(); Execute

$("#animation-example-1 img").hide('fast'); Execute

$("#animation-example-1 img").toggle('slow'); Execute

Similar functions

fadeIn(speed, callback)
fadeOut(speed, callback)
slideDown(speed, callback)
slideUp(speed, callback)
slideToggle(speed, callback)
fadeTo(speed, opacity, callback)

Example 2

$("#animation-example-2 img").fadeIn('slow'); Execute

$("#animation-example-2 img").fadeOut('slow'); Execute

$("#animation-example-2 img").slideDown('slow'); Execute

$("#animation-example-2 img").slideUp('slow'); Execute

$("#animation-example-2 img").slideToggle('slow'); Execute

$("#animation-example-2 img").fadeTo('slow', 0.5); Execute

Common events

Event
blur
change
click
dblclick
error
focus
focusin
focusout
keydown
keypress
keyup
load
mousedown
mouseenter
mouseleave
mousemove
mouseout
mouseover
mouseup
ready
resize
scroll
select
submit
unload

Back

Simple Ajax

What is Ajax?

An acronym for Asynchronous JavaScript and XML
A group of methods used on the client-side to create asynchronous web applications
Allows to send data to, and retrieve data from, a server in the background
Based on the XMLHttpRequest object
Unfortunately, it is not easy to use this tool...
Likely, jQuery provides high-level functions for Ajax interactions

How does it work?

$.load(url, parameters, callback)
Initiates an Ajax request to the specified URL with the request parameters. The response text replaces the content of all matched elements.
- url: the URL of the server-side resource
- parametes: data to be passed as request parameters (optional)
- callback: a function handling retrivied data (optional)

Example 1

This is a div with class 'inject'.

$("#ajax-example-1 div.inject").slideUp("fast", function() { $(this).load("animal.php", $("#ajax-example-1 form[name='myform']").serialize() ).slideDown("slow"); }); Execute

$.get(url, parameters, callback, type)
$.post(url, parameters, callback, type)
Initiates a GET/POST request to the server using the specified URL with any passed parameters as the query string.
- url: the URL of the server-side resource
- parametes: data to be passed as request parameters (optional)
- callback: a function handling retrivied data (optional)
- type: 'html', 'text', 'xml', 'json', 'script', or 'jsonp' (optional)

Example 2

This is a div with class 'inject'.

$.get('animal.php', $("#ajax-example-2 form[name='myform']").serialize(), function(data) { $("#ajax-example-2 div.inject").append( "<p>Image location retrivied from server: " + data.imageLocation + "</p>" ); $("#ajax-example-2 div.inject").append( "<img src='" + data.imageLocation + "' />" ); }, 'json' ); Execute

Back

jQuery frameworks

jQuery UI

A comprehensive set of core interaction plugins, UI widgets and visual effects
All this using a jQuery-style and a event-driven architecture
Focus on web standards, accessiblity, flexible styling, and user-friendly design
Compatible with IE 6.0+, Firefox 3+, Safari 3.1+, Opera 9.6+, and Google Chrome

jQuery UI demos

jQuery Mobile

A unified, HTML5-based user interface system for all popular mobile device platforms
Built on the rock-solid jQuery and jQuery UI foundation
Flexible, easily themeable design
Easily embeddable in a native iOS or Android app
Note: mixing jQuery Mobile and jQuery UI is not a good idea!
You already experienced jQuery Mobile possibilities during this presentation!

jQuery Mobile demos

Resources on the web

Free book: jQuery Fundamentals - by Rebecca Murphey Read the book
jQuery in Action labs Visit the site
Exercises (selectors)
Open the Selectors Lab
1. Select all images
2. Select all list items of second level or more
3. Select all list items of first level
4. Select all list items containing a link
5. Select all list items that don't contain a link
6. Select all input elements
7. Select all input elements that checked
8. Select all input elements that are not checked
9. Select all odd rows of tables
10. Repeat all previous exercises by limiting the selection to the first element
11. Repeat all previous exercises by limiting the selection to the last element
12. Repeat all previous exercises by limiting the selection to the i-th element
Exercises (operations)
Open the Operations Lab
1. Fade out all images
2. Slide down all images
3. Move the first row of the table after the last row (execute more times and have fun!)
4. Replace the content of the first label with the text in the input field
5. Remove all divs containing checkboxes, but not those containing other divs
6. Fade out the i-th row from the table; then, fade it in back!
7. As the previous exercise, but the row must be the one specified by the checkbox group
8. Copy the first image after all items in the radio group
9. Bind each previous exercise to the submit button
10. As the previous exercise, but using the funtion 'one()'

A jQuery-powered introduction to jQuery - by Mario Alviano

http://archives.alviano.com/teaching/jquery/seminario/

or

http://tinyurl.com/alviano-jquery

Introduction

jQuery features

Model-View-Controller HTML5

The jQuery wrapper

Example

Example

Example

Setup the framework

Select DOM elements

A declarative approach for selecting DOM elements

Managing the wrapped set

Basic selectors

Positional filters

Other CSS3 filters

New filters

DOM manipulation

Adding and removing CSS classes

Example 1

Example 2

Setting element content (part 1)

Example 1

Example 2

Example 3

Setting element content (part 2)

Example 4

Example 5

Getting and setting form content

Example 1

Events and animations

Manage event handlers

Example 1

Animate DOM elements

Example 1

Example 2

Common events

Simple Ajax

What is Ajax?

How does it work?

Example 1

Example 2

jQuery frameworks

jQuery UI

jQuery Mobile

Resources on the web

Exercises (selectors)

Exercises (operations)