• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
jQuery (MeshU)
 

jQuery (MeshU)

on

  • 7,373 views

MeshU (May 2008).

MeshU (May 2008).

Statistics

Views

Total Views
7,373
Views on SlideShare
7,369
Embed Views
4

Actions

Likes
3
Downloads
94
Comments
0

2 Embeds 4

http://www.slideshare.net 2
http://lanyrd.com 2

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
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    jQuery (MeshU) jQuery (MeshU) Presentation Transcript

    • Building Interactive Prototypes with jQuery MeshU - May 2008 John Resig (ejohn.org)
    • What is jQuery? ✦ An open source JavaScript library that simplifies the interaction between HTML and JavaScript.
    • Ideal for Prototyping ✦ Completely unobtrusive ✦ Uses CSS to layer functionality ✦ Easy to separate behavior ✦ Quick, terse, syntax
    • The Focus of jQuery Find Some Elements Do something with them { { $(“div”).addClass(“special”); jQuery Object
    • The jQuery Object ✦ Commonly named ‘$’ ✦ Also named ‘jQuery’ ✦ Completely valid: ✦ jQuery(“div”).addClass(“special”);
    • Find Some Elements... ✦ Full CSS Selector 1-3 Support ✦ Better CSS Selector support than most browsers
    • $(“div”) <div id=”body”> <h2>Some Header</h2> <div class=”contents”> <p>...</p> <p>...</p> </div> </div>
    • $(“#body”) <div id=”body”> <h2>Some Header</h2> <div class=”contents”> <p>...</p> <p>...</p> </div> </div>
    • $(“div#body”) <div id=”body”> <h2>Some Header</h2> <div class=”contents”> <p>...</p> <p>...</p> </div> </div>
    • $(“div.contents p”) <div id=”body”> <h2>Some Header</h2> <div class=”contents”> <p>...</p> <p>...</p> </div> </div>
    • $(“div > div”) <div id=”body”> <h2>Some Header</h2> <div class=”contents”> <p>...</p> <p>...</p> </div> </div>
    • $(“div:has(div)”) <div id=”body”> <h2>Some Header</h2> <div class=”contents”> <p>...</p> <p>...</p> </div> </div>
    • Do something with them ✦ DOM Manipulation (append, prepend, remove) ✦ Events (click, hover, toggle) ✦ Effects (hide, show, slideDown, fadeOut) ✦ AJAX (load, get, post)
    • DOM Manipulation ✦ $(“a[target=_blank]”) .append(“ (Opens in New Window)”); ✦ $(“#body”).css({ border: “1px solid green”, height: “40px” });
    • Events ✦ $(“form”).submit(function(){ if ( $(“input#name”).val() == “” ) $(“span.help”).show(); }); ✦ $(“a#open”).click(function(){ $(“#menu”).show(); return false; });
    • Animations ✦ $(“#menu”).slideDown(“slow”); ✦ Individual properties: $(“div”).animate({ fontWeight: “2em”, width: “+=20%”, color: “green” // via plugin }); ✦ Callbacks: $(“div”).hide(500, function(){ // $(this) is an individual <div> element $(this).show(500); });
    • Ajax ✦ $(“#asdf ”).load(“sample.html”); ✦ Before: <div id=”body”></div> ✦ After: <div id=”body”> <h1>Hello, world!</h1> </div> ✦ $.getJSON(“test.json”, function(js){ for ( var name in js ) $(“ul”).append(“<li>” + name + “</li>”); });
    • Ajax (cont.) ✦ $(“#body”).load(“sample.html div > h1”); ✦ Before: <div id=”body”></div> ✦ After: <div id=”body”> <h1>Hello, world!</h1> </div>
    • Chaining ✦ You can have multiple actions against a single set of elements ✦ $(“div”).hide(); ✦ $(“div”).hide().css(“color”,”blue”); ✦ $(“div”).hide().css(“color”,”blue”).slideDown();
    • Chaining (cont.) ✦ var ul = $(“ul.open”); // ul, ul, ul ul.children(“li”) // li, li, li .addClass(“open”) ul.find(“a”) // a, a, a .click(function(){ $(this).next().toggle(); return false; })
    • Why jQuery? ✦ Fully documented ✦ Great community ✦ Tons of plugins ✦ Small size (15kb) ✦ Everything works in IE 6+, Firefox, Safari 2+, and Opera 9+
    • Graduation ✦ Ideal for Prototyping ✦ Perfect for application development ✦ Designers and Developers agree!
    • Accordion Menu http://jquery.com/files/apple/ http://jquery.com/files/apple/done.html
    • jQuery Plugins ✦ Extend the jQuery system ✦ Add on extra methods: $(“div”).hideRemove(); ✦ Trivial to implement: jQuery.fn.hideRemove = function(speed){ return this.hide(speed, function(){ jQuery(this).remove(); }); };
    • Plugins ✦ Drag and Drop ✦ Sortables ✦ Modal Dialogs ✦ Tabbed Navigation ✦ Sortable Tables ✦ And hundreds more...
    • Todo List http://jquery.com/files/todo/ http://jquery.com/files/todo/done.php
    • Social Networking http://jquery.com/files/social/ http://jquery.com/files/social/done.php
    • jQuery UI ✦ Full set of themed widgets and components ✦ Drop in and have it “just work” ✦ Themed to match your layout ✦ Easy to prototype with, easy to use in the final product
    • UI Components ✦ Drag & Drop ✦ Resize ✦ Tabs ✦ Slider ✦ Table Sorting ✦ Modal Dialog ✦ etc.
    • Who uses jQuery? ✦ Google ✦ IBM ✦ NBC ✦ Amazon ✦ Wordpress ✦ Digg ✦ many others...
    • Community ✦ Very active mailing list ✦ 100+ Posts/Day ✦ 6000+ Members ✦ Technorati: Dozens of blog posts per day
    • Books ✦ 3 Books Released: ✦ Learning jQuery (Packt) ✦ jQuery Reference (Packt) ✦ jQuery in Action (Manning)
    • Random ✦ New Logo ✦ and New Web Site ✦ Coming Soon!
    • Summary ✦ Perfect for rapid-prototyping and deployable development. ✦ Provides plenty of drop in UI code.
    • jquery.com docs.jquery.com - jquery.com/plugins More: ui.jquery.com visualjquery.com learningjquery.com