Embed Size (px)
DESCRIPTION
An introduction to javascript, jQuery and the DOM.
Citation preview
jQuery basics
who’s me?
• Stijn Van Minnebruggen
• Web Developer at These Days
• twitter.com/donotfold
• www.donotfold.be
jQuery basics
DOM
DOMdocument object model
The Document Object Model (DOM) is a cross-platform and language-independent convention for representing and interacting with objects in HTML, XHTML and XML documents.
Wikipedia
<html><head>
<title>Wicked HTML page</title>
</head><body>
<h1>Awesome!</h1> <p>Totally rad, dude.</p>
</body></html>
DOM = HTML parsed by the browseras an XML structure
put simple:
The browser gets HTML from the server and parses it to an XML like structure.
server browser DOM(xml)
HTML
<html><head>
<title>Wicked HTML page</title>
</head><body>
<h1>Awesome!</h1> <p>Totally rad, dude.</p>
</body></html>
<html> <head> <title>Wicked HTML page</title> </head> <body> <h1>Awesome!</h1> <p>Totally rad, dude.</p> </body></html>
<html> <head> <title>Wicked HTML page</title> </head> <body> <h1>Awesome!</h1> <p>Totally rad, dude.</p> </body></html>
<html> <head> <title>Wicked HTML page</title> </head> <body> <h1>Awesome!</h1> <p>Totally rad, dude.</p> </body></html>
<html> <head> <title>Wicked HTML page</title> </head> <body> <h1>Awesome!</h1> <p>Totally rad, dude.</p> </body></html>
javascript ♥ DOM
view source ≠ view DOM
javascript ♥ CSS
javascriptDOM x CSS
= FUN :)
javascript = FUN!
javascript = HACKY!!
why “hacky”?
why “hacky”?
• exists since 1995 (much happened, but not much has changed)
why “hacky”?
• exists since 1995 (much happened, but not much has changed)
• browser differences
why “hacky”?
• exists since 1995 (much happened, but not much has changed)
• browser differences
• security, vulnerabilities
why “hacky”?
• exists since 1995 (much happened, but not much has changed)
• browser differences
• security, vulnerabilities
• in comparison with other programming languages, it just is “hacky”... :)
javascript libraries
“javascript libraries make it easier for the user to make
‘hacky’ javascript work without too much hassle”
javascript libraries
javascript libraries
javascript libraries
Ample SDK, Cappuccino, Clean AJAX, Dojo Toolkit, Dhtmlx, Echo, Ext, Glow, Google Web Toolkit, Himle, Joose, Microsoft AJAX Library, Midori, Mochikit, OpenLink AJAX Toolkit, qooxdoo, Rialto, Rico, SmartClient, SproutCore, Spry
Framework, Yahoo UI Library, ...
$
$ = jQuery
$(selector)
$(selector)
get a DOMelement
$(selector).function();
get a DOMelement
$(selector).function();
get a DOMelement
execute ajQueryfunction
$(selector).function(parameters);execute ajQueryfunction
get a DOMelement
$(selector).function(parameters);
$(‘h2’)
example:
$(‘h2’)
example:
get all H2DOM
elements
$(‘h2’).css();
example:
$(‘h2’).css();
example:
execute thejQuery CSS
function
$(‘h2’).css(“color”, “#FFFFFF”);
example:
$(‘h2’).css(“color”, “#FFFFFF”);
example:
set the colorto #FFFFFF
$(‘h2’).css(“color”, “#FFFFFF”);
example:
selectors
selectors
• select DOM elements
• select by ID
• select by className
selectors
• select DOM elements $(‘div’)
• select by ID $(“#myElement”)
• select by className $(“.myClass”)
manipulation
manipulation
• $(selector).html(“<h1>My title</h1>”);
• $(selector).text(“My text, no <em>html</em>”);
• $(selector).css(“border”, “2px solid red”);
effects
effects
• $(selector).show();
• $(selector).fadeIn();
• $(selector).slideDown();
• $(selector).animate();
Ajax
Ajax
• $.get();
• $.get(“myFile.html”, function(result) { $(“div”).html(result);});
PluginsEverything you make in jQuery can be a plugin.
Plugins
• Form validation
• PNG fixes
• ...
Everything you make in jQuery can be a plugin.
demos
your new best friendOnline documentationdocs.jquery.com
Offline version (Adobe Air)api.jquery.com
thanks!
• Stijn Van Minnebruggen
• Web Developer at These Days
• twitter.com/donotfold
• www.donotfold.be
![(jQuery Fundamentals) Fundamentos de jQuery191.13.234.92/.../Arquivos/LPA/JQuery/apostilas/apostila-jquery-br.pdf · Fundamentos de jQuery (jQuery Fundamentals) Rebecca Murphey []](https://img.dokumen.tips/doc/110x75/6077fbbcb4f4d25f0363d510/jquery-fundamentals-fundamentos-de-jquery1911323492arquivoslpajqueryapostilasapostila-jquery-brpdf.jpg)
![jQuery, eCSStender & you [jQuery Summit 2010]](https://img.dokumen.tips/doc/110x75/54c70c894a7959e62f8b461d/jquery-ecsstender-you-jquery-summit-2010.jpg)
