jQuery basics
•
3 likes•651 views
An introduction to javascript, jQuery and the DOM.
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Similar to jQuery basics
Similar to jQuery basics (20)
Recently uploaded
Recently uploaded (20)
jQuery basics
- 2. who’s me? • Stijn Van Minnebruggen • Web Developer at These Days • twitter.com/donotfold • www.donotfold.be
- 4. DOM
- 6. 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
- 7. <html> <head> <title>Wicked HTML page</title> </head> <body> <h1>Awesome!</h1> <p>Totally rad, dude.</p> </body> </html>
- 8. DOM = HTML parsed by the browser as an XML structure
- 9. server HTML browser DOM (xml) put simple: The browser gets HTML from the server and parses it to an XML like structure.
- 10. <html> <head> <title>Wicked HTML page</title> </head> <body> <h1>Awesome!</h1> <p>Totally rad, dude.</p> </body> </html>
- 11. <html> <head> <title>Wicked HTML page</title> </head> <body> <h1>Awesome!</h1> <p>Totally rad, dude.</p> </body> </html>
- 12. <html> <head> <title>Wicked HTML page</title> </head> <body> <h1>Awesome!</h1> <p>Totally rad, dude.</p> </body> </html>
- 13. <html> <head> <title>Wicked HTML page</title> </head> <body> <h1>Awesome!</h1> <p>Totally rad, dude.</p> </body> </html>
- 14. <html> <head> <title>Wicked HTML page</title> </head> <body> <h1>Awesome!</h1> <p>Totally rad, dude.</p> </body> </html>
- 15. javascript DOM
- 16. view source ≠ view DOM
- 17. javascript CSS
- 18. javascript = FUN :) DOM x CSS
- 21. why “hacky”?
- 22. why “hacky”? • exists since 1995 (much happened, but not much has changed)
- 23. why “hacky”? • exists since 1995 (much happened, but not much has changed) • browser differences
- 24. why “hacky”? • exists since 1995 (much happened, but not much has changed) • browser differences • security, vulnerabilities
- 25. 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”... :)
- 27. “javascript libraries make it easier for the user to make ‘hacky’ javascript work without too much hassle”
- 30. 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, ...
- 33. $
- 34. $ = jQuery
- 35. $(selector)
- 36. get a DOM element $(selector)
- 37. get a DOM element $(selector).function();
- 38. get a DOM element $(selector).function(); execute a jQuery function
- 39. get a DOM element $(selector).function(parameters); execute a jQuery function
- 41. example: $(‘h2’)
- 42. example: $(‘h2’) get all H2 DOM elements
- 44. example: $(‘h2’).css(); execute the jQuery CSS function
- 46. example: $(‘h2’).css(“color”, “#FFFFFF”); set the color to #FFFFFF
- 48. selectors
- 49. selectors • select DOM elements • select by ID • select by className
- 50. selectors • select DOM elements $(‘div’) • select by ID $(“#myElement”) • select by className $(“.myClass”)
- 51. manipulation
- 52. manipulation • $(selector).html(“<h1>My title</h1>”); • $(selector).text(“My text, no <em>html</em>”); • $(selector).css(“border”, “2px solid red”);
- 53. effects
- 54. effects • $(selector).show(); • $(selector).fadeIn(); • $(selector).slideDown(); • $(selector).animate();
- 55. Ajax
- 56. Ajax • $.get(); • $.get(“myFile.html”, function(result) { $(“div”).html(result); });
- 57. Plugins Everything you make in jQuery can be a plugin.
- 58. Plugins Everything you make in jQuery can be a plugin. • Form validation • PNG fixes • ...
- 59. demos
- 60. your new best friend Online documentation docs.jquery.com Offline version (Adobe Air) api.jquery.com
- 61. thanks! • Stijn Van Minnebruggen • Web Developer at These Days • twitter.com/donotfold • www.donotfold.be