Dynamic Web Technology

handclockΑσφάλεια

5 Νοε 2013 (πριν από 3 χρόνια και 9 μήνες)

78 εμφανίσεις

1
Dynamic Web Technology
Dr M Davison
0141 848 3605
Room E266
mark.davison@uws.ac.uk
Week 2
jQuery API
(Application Programming Interface)
2
Week 2 Objectives

Introduce the roles of the jQuery APIs
•jQuery Core
•Selectors
•Attributes
•Traversing
•Manipulation
•CSS
•Events
•Effects
•Ajax
•Utilities
•jQuery UI
3
jQuery Core

All functionality is derived from or uses the jQuery()
function –it really is the core!
•jQuery() is usually written as $()

Argument is usually a selector
•selector in jQuery like an extended or advanced version of
CSS selector
•$('div.foo') for a div of class foo
•$("a") for all anchor tags

Returns a jQuery object
•So commands can be chained together

http://api.jquery.com/category/core/
4
Selectors

CSS uses selectors to determine which elements are modified by
styling

jQuery uses selectors to determine which elements are modified
by jQuery

Selectors specify which element to manipulate

jQuery selectors more advanced such as
•$("*") –metacharacter applies to all elements
•$("div:animated") –divisions that are animated
•$("ul li:nth-child(2)") -the second li element within ul
•$("input:checked") –checkboxes & radio buttons that are checked
•Etc etc etc –see URL below

http://api.jquery.com/category/selectors/
5
Attributes

Methods to get and set DOM attributes of elements and more…
•Manipulate HTML attributes of specified* elements
•Manipulate class of a specified* element for control of styling
•Get and set HTML within specified* elements
•Get and set plain text enclosed within specified* elements
•Get and set values of form elements

Eaxmples such as…
•$("button").attr("disabled","disabled"); -disable buttons
•$("div").html("Hello <strong>Again</strong>"); -replace div contents
with HTML
•Etc etc etc –see URL below

http://api.jquery.com/category/attributes/
*specified by jQuery selectors
6
Traversing

Find, manipulate the tree structure of the DOM

Refers to relationships between elements
•An element is the parent of the elements it contains
•An element is the child of the element that contains it
•An element is a sibling of other elements similarly
contained within an element
•Refer to next and previous elements
•Etc etc etc –see URL below

http://api.jquery.com/category/traversing/
7
Manipulation

Miscellaneous methods for
•Insert element
•Copy a selected element
•Delete a selected element
•Update a selected element
•Prepend an element before a selected element
•Append an element after a selected element

Also extract information about an element (eg css,
position, dimensions or value)

Element to be manipulated specified by jQuery selector

Etc etc etc –see URL below

http://api.jquery.com/category/manipulation/
8
CSS

Get and set CSS-related properties of elements

Add and remove CSS class to selected* elements

Get CSS style definitions to selected* elements

Examples
•$("p:even").removeClass("blue");
remove class from every other paragraph
ie those numbered 0, 2, 4, 6 …
•$('p').removeClass('myClass noClass').addClass('yourClass');
remove two styles and add another style
•Note chaining is a very common jQuery technique

Etc etc etc –see URL below

http://api.jquery.com/category/css/
*specified by jQuery selectors
9
Events -.ready( ) method

$(document).ready(handler); Remember this one!
•specify a function to execute when the DOM is fully loaded
•the ready handler is in every(?) jQuery page because jQuery
should wait until page has completely downloaded
•replaces and is equivalent to <body onload="">
•incompatible with <body onload="">

.ready() method typically uses anonymous function
$(document).ready(function() {
// Handler for .ready() called.
});

http://api.jquery.com/ready/
10
Events –in general

Methods to register behaviours for user interaction.

Methods to manipulate (eg add or delete) behaviours.

Methods to bind behaviors for various types of event
•focus & blur
•change, click, double click
•keyboard
•element load
•mouse –hover, over, enter, out, leave, button down/up, move
•ready -specify a function to execute when the DOM is fully loaded
•resize & scroll of window
•submit
•toggle (alternate between two event handlers on an element)

Etc etc etc –see URL below

http://api.jquery.com/category/events/
try out the more visual demos eg http://api.jquery.com/click/
11
Effects

Methods for adding animation

.animate() -custom animation CSS properties

.fadeIn(), fadeOut(), fadeTo() –smooth opacity change

.slideUp( ) .slideDown( ) for up & down

.animate( ) for left & right movement

Chain animations to form a queue (sequence) of animations for
an element

.hide( ) & .show( ) an element

.stop( ) an animation

Animations often based around changing CSS including
positioning

Etc etc etc –see URL below

http://api.jquery.com/category/effects/
try out the more visual demos eg http://api.jquery.com/animate/
12
Ajax

functions & methods to load data from a server
without a browser page refresh

http request-response cycle but not so obvious to the
user

get & post requests including optional form data

bind handler functions for http success/failure events

bind handler functions when AJAX request-response
starts or finishes

.load( ) –replace element with HTML returned by
server

Etc etc etc –see URL below

http://api.jquery.com/category/ajax/
13
Utilities

Browser and Feature Detection*

Array and Object operations+
•mostly array methods
•merge arrays & find within array etc
•.extend () –add methods to an object
used by plugin authors to add jQuery functionality

Test operations+
•isArray( )
•isFunction( )

String operations+
•.trim( ) –strip trailing white space at end of string

URLs*
•.param( ) -Serializes an array of form elements by convert to a URL
encoded string
* not specific to DOM of particular web page
+ general programming related

http://api.jquery.com/category/utilities/
14
jQuery UI -visual controls

jQuery User Interface –web page looks more like desktop
application

Interactions
•Draggable, Droppable, Resizable, Selectable, Sortable

Widgets
•Accordion, Autocomplete, Button, Datepicker, Dialog, Progressbar, Slider,
Tab
•http://docs.jquery.com/UI/Accordion#demo

Tabs
•tabbed content within a single page
•not conventional multiple tabbed/windows for browsing of multiple
websites

Positioning of widgets

Effects –animation of selected elements
•bounce, drop in/out, explode into pieces, fold like paper, scale, shake

Etc etc etc –see URL below

http://docs.jquery.com/UI/
try out the UI demos!
15
Further reading

Download, Documentation & Tutorials etc
•http://docs.jquery.com/Main_Page
•http://api.jquery.com/browser/

Try some of the demos form a range of sections
within the jQuery API documentation

Try the more visual demos in the css, events,
effects & UI (visual controls) sections