1. Website Construction Client-side programming with JQuery
Frdric Haziza Department of Computer SystemsUppsala University
Summer 2009
2. JavaScript allows developers tocreate rich and interactive
web interfaces establish asynchronous communication with servers
for constantly up-to-date data without a page refresh. 2 WebConst09
| Website Construction (Client-side programming with JQuery) 3.
Javascript tutorial 3 WebConst09 | Website Construction
(Client-side programming with JQuery) 4. Javascript libraryWrite
less, do more. JQuery / JQuery UIMooToolsScriptaculous / Prototype
Element selectionDojoDOM manipulationYahoo! UI Library (YUI)
AJAXMochiKit... ?? ...4 WebConst09 | Website Construction
(Client-side programming with JQuery) 5. Loading jQuery ...< s c
r i p t t y p e=" t e x t / j a v a s c r i p t "s r c=" p a t h /
t o / j q u e r y . j s "> s c r i p t>...< s c r i p t t
y p e=" t e x t / j a v a s c r i p t ">// Your c o d e h e r e
s c r i p t> head> body> html> 5 WebConst09 | Website
Construction (Client-side programming with JQuery) 6. Usally, most
programmers end up testing: ... < s c r i p t t y p e=" t e x t
/ j a v a s c r i p t ">window . o n l o a d = f u n c t i o n (
) { a l e r t ( Hello world ! ) ; } s c r i p t> head>
body> html> 6 WebConst09 | Website Construction (Client-side
programming with JQuery) 7. Loading jQuery...< s c r i p t t y p
e=" t e x t / j a v a s c r i p t "s r c=" p a t h / t o / j q u e
r y . j s "> s c r i p t>...< s c r i p t t y p e=" t e x
t / j a v a s c r i p t "s r c = mycode . j s > s c r i p t>
head> body> html> 7 WebConst09 | Website Construction
(Client-side programming with JQuery) 8. Saving bandwidthInstead of
loading from your own server, get it from google.
http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.jsReadableNon-readable
8 WebConst09 | Website Construction (Client-side programming with
JQuery) 9. JQuery - Documentation Homepage Online docs 9 WebConst09
| Website Construction (Client-side programming with JQuery) 10.
Old style onclick=notEmpty() />10 WebConst09 | Website
Construction (Client-side programming with JQuery) 11. Simple with
JQueryProblemNeed to wait for the document to be ready
SolutionJQuery: Event handler waits for the document to be ready.
$(document).ready(function() {// do stu when DOM is ready}); What
is the DOM? 11 WebConst09 | Website Construction (Client-side
programming with JQuery) 12. ExampleHTMLVisit Us JQuery$ ( document
) . r e a d y ( f u n c t i o n ( ) {$( "a" ) . c l i c k ( f u n c
t i o n ( ) {a l e r t ( " Hello world ! " ) ; }) ; }) ;$(a)
selects all a elements.This code binds a click event to all
selected elements (in this case,a single anchor element) and
executes the provided function whenthe event occurs. 12 WebConst09
| Website Construction (Client-side programming with JQuery) 13.
The magic $$(a);All anchors in the document (CSS/XPath)
$(div.container);All divs with a container class (CSS)
$(div[@class=codeSnippet]/code);All code elements that are direct
children of divs in the documentwith the class codeSnippet. (XPath)
As of version 1.2, XPath syntax has been separated out in its
ownplugin (reducing the footprint, i.e smaller le size)13
WebConst09 | Website Construction (Client-side programming with
JQuery) 14. The magic $$( selector, [context] ); The selector can
be a CSS selector or an XPath query. The contextlimits the scope of
the search. Note that it returns an object whichrepresent all
matching elements.JQuery selectors 14 WebConst09 | Website
Construction (Client-side programming with JQuery) 15. JQuery Eects
JQuery eects online demo 15 WebConst09 | Website Construction
(Client-side programming with JQuery)
