Introduction to jQuery (Ajax Exp 2007)
Upcoming SlideShare
Loading in...5
×
 

Introduction to jQuery (Ajax Exp 2007)

on

  • 697 views

Talk I gave at Ajax Experience West and East 2007.

Talk I gave at Ajax Experience West and East 2007.

Statistics

Views

Total Views
697
Views on SlideShare
689
Embed Views
8

Actions

Likes
1
Downloads
7
Comments
0

2 Embeds 8

http://lanyrd.com 7
http://ejohn.org 1

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

Introduction to jQuery (Ajax Exp 2007) Introduction to jQuery (Ajax Exp 2007) Presentation Transcript

  • jQuery IntroductionAjax Experience - July 2007 John Resig (ejohn.org)
  • What is jQuery?• An open source JavaScript library that simplifies the interaction between HTML and JavaScript.
  • Why jQuery?• Fully documented• Great community• Tons of plugins• Small size (20kb)• Everything works in IE 6+, Firefox, Safari 2+, and Opera 9+
  • Complete Focus:• Find some elements• Do something with them
  • Find Some Elements...• Full CSS 1-3 Support• Basic XPath• Better CSS 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[div]”)<div id=”body”> <h2>Some Header</h2> <div class=”contents”> <p>...</p> <p>...</p> </div></div>
  • Features• Events (click, hover, toggle)• DOM Manipulation (append, prepend, remove)• Effects (hide, show, slideDown, fadeOut)• AJAX (load, get, post)
  • Events• $(“form input:last”).click(function(){ $(“#menu”).slideDown(“slow”); });
  • DOM Manipulation• $(“a[@target]”) .append(“ (Opens in New Window)”);• $(“#body”).css({ border: “1px solid green”, height: “40px” });
  • Effects• $(“#menu”).slideDown(“slow”);• $(“div”).hide(500,function(){ $(this).show(500); });
  • AJAX• $(“#body”).load(“sample.html”);• $.getScript(“test.js”);
  • Chaining• $(“div”).hide();• $(“div”).hide().color(”blue”);• $(“div”).hide().color(”blue”).slideDown();
  • Live Demos
  • Accordion Menu
  • Hover Menu
  • Todo List
  • Plugins• Drag and Drop• Sortables• Tabbed Navigation• Sortable Tables• And hundreds more...
  • Community• Very active mailing list • 108+ Posts/Day • 2500+ Members• Technorati: 22+ blog posts per day
  • Who uses jQuery?• IBM• MSNBC• Technorati• Drupal• Wordpress• Digg• many others...
  • Books• 4 Books in Progress: • Learning jQuery (Packt) • jQuery Reference (Packt) • jQuery Quickly (Manning) • Designing with jQuery (Manning)
  • Future• “jQuery UI”• Themeing• Internationalization
  • jquery.comdocs.jquery.com - jquery.com/plugins More: visualjquery.com learningjquery.com