• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
jQuery basics
 

jQuery basics

on

  • 2,437 views

An introduction to javascript, jQuery and the DOM.

An introduction to javascript, jQuery and the DOM.

Statistics

Views

Total Views
2,437
Views on SlideShare
2,150
Embed Views
287

Actions

Likes
3
Downloads
50
Comments
1

2 Embeds 287

http://labs.thesedays.com 281
http://www.slideshare.net 6

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

11 of 1 previous next

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…

  • trtert

    <b>[Comment posted from</b> http://labs.thesedays.com/]
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    jQuery basics 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