jQuery basics
Loading...
Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.
2 Favorites
-
Gustavo Dutra, Web Developer at Gatewaybox,
favorited this 1 month ago
-
JelleQuirynen
favorited this 1 month ago
jQuery basics - Presentation Transcript
- jQuery basics
- who’s me? • Stijn Van Minnebruggen • Web Developer at These Days • twitter.com/donotfold • www.donotfold.be
- jQuery basics
- DOM
- DOM document 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 browser as an XML structure
- server HTML browser DOM (xml) put simple: The browser gets HTML from the server and parses it to an XML like structure.
- <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
- javascript = FUN :) DOM x CSS
- 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)
- get a DOM element $(selector)
- get a DOM element $(selector).function();
- get a DOM element $(selector).function(); execute a jQuery function
- get a DOM element $(selector).function(parameters); execute a jQuery function
- $(selector).function(parameters);
- example: $(‘h2’)
- example: $(‘h2’) get all H2 DOM elements
- example: $(‘h2’).css();
- example: $(‘h2’).css(); execute the jQuery CSS function
- example: $(‘h2’).css(“color”, “#FFFFFF”);
- example: $(‘h2’).css(“color”, “#FFFFFF”); set the color to #FFFFFF
- example: $(‘h2’).css(“color”, “#FFFFFF”);
- 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); });
- Plugins Everything you make in jQuery can be a plugin.
- Plugins Everything you make in jQuery can be a plugin. • Form validation • PNG fixes • ...
- demos
- your new best friend Online documentation docs.jquery.com Offline version (Adobe Air) api.jquery.com
- thanks! • Stijn Van Minnebruggen • Web Developer at These Days • twitter.com/donotfold • www.donotfold.be
449 views, 2 favs, more stats
An introduction to javascript, jQuery and the DOM.
More info about this document
© All Rights Reserved
Go to text version
- Total Views 449
- 303 on SlideShare
- Comments 1
- Favorites 2
- Downloads 15
Most viewed embeds
All embeds
- Upload Info
- Also on LinkedIn
- Uploaded via SlideShare
- Uploaded as Adobe PDF
1 comments
Comments 1 - 1 of 1 previous next Post a comment