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

Introduction to jQuery (Ajax Exp 2006)

on

  • 1,237 views

 

Statistics

Views

Total Views
1,237
Slideshare-icon Views on SlideShare
1,234
Embed Views
3

Actions

Likes
2
Downloads
11
Comments
0

1 Embed 3

http://lanyrd.com 3

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 2006) Introduction to jQuery (Ajax Exp 2006) Presentation Transcript

    • jQueryNew Wave JavaScriptAjax Experience - Oct 2006 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 (15kb)• Everything works in IE 5.5+, Firefox, Safari 1.3+, and Opera 8+
    • 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 over 80 more...
    • Community• Very active mailing list • 90+ Posts/Day • 640+ Members• Technorati: 10+ blog posts per day
    • Who uses jQuery?• MSNBC• Technorati• Feedburner• Drupal• many others...
    • Future• Internationalization• Plugin Community (think Sourceforge)• Fixing “Hard” Problems
    • jquery.comjquery.com/docs - jquery.com/plugins More: visualjquery.com learningjquery.com