Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
by: Jeremiah G. Gatong<br />
Things to know first…<br />
The JavaScript Ninja!<br />John Resig - is a JavaScript Tool Developer for the Mozilla Corporation and the creator and lea...
What is jQuery?<br />Is a single JavaScript file.<br />Is a cross-browser JavaScript library (e.g. Dojo, YUI, Prototype, M...
Why use jQuery?<br />Free! (MIT License & GNU GPL v2)<br />Cross browser(IE 6+, Firefox 2+, Safari 3+, Opera 9+ & Chrome 1...
Who use jQuery?<br />
Where can I get jQuery?<br />jQuery official website http://jquery.com/<br />Microsoft adopted it within Visual Studio 20...
How can I use jQuery?<br />Pick compression level<br />Include the library<br /><script type=“text/javascript" src="jquery...
The jQuery object<br />Commonly named: <br />Also named: <br />
jQuery API<br />jQuery Selector<br />$(*)<br />$(element)<br />$(id)<br />$(class)<br />$(object)<br />                   ...
jQuery UI<br />Provides abstractions for low-level interaction and animation, advanced effects and high-level, themeable w...
The focus of jQuery<br />
Find some elements…<br />Full CSS selector 1-3 support<br />Basic XPath<br />Better CSS selector support than most browser...
$(“div”)<br /><div id=”body”><br /><h2>Some Header</h2><br /><div class=”contents”><br /><p>...</p><br /><p>...</p><br /><...
$(“#body”)<br /><div id=”body”><br /><h2>Some Header</h2><br /><div class=”contents”><br /><p>...</p><br /><p>...</p><br /...
$(“div#body”)<br /><div id=”body”><br /><h2>Some Header</h2><br /><div class=”contents”><br /><p>...</p><br /><p>...</p><b...
$(“div.contents p”)<br /><div id=”body”><br /><h2>Some Header</h2><br /><div class=”contents”><br /><p>...</p><br /><p>......
$(“div > div”)<br /><div id=”body”><br /><h2>Some Header</h2><br /><div class=”contents”><br /><p>...</p><br /><p>...</p><...
$(“div:has(div)”)<br /><div id=”body”><br /><h2>Some Header</h2><br /><div class=”contents”><br /><p>...</p><br /><p>...</...
Do something with them<br />DOM Manipulation (append, prepend, remove)<br />Events (click, hover, toggle)<br />Effects (hi...
DOM Manipulation<br />$(“a[target]”)<br />	.append(“ (Opens in New Window)”);<br />$(“#body”).css({<br />	border: “1px sol...
Events<br />$(“form”).submit(function(){<br />	if ( $(“input#name”).val() == “” )<br />	$(“span.help”).show();<br />});<br...
Animations<br />$(“#menu”).slideDown(“slow”);<br />Individual properties<br />	$(“div”).animate({<br />fontWeight: “2em”,<...
Ajax<br />$(“#body”).load(“sample.html div > h1”);<br />Before<br />	<div id=”body”></div><br />After<br />	<div id=”body”...
Chaining<br />You can have multiple actions against a single set of elements<br />$(“div”).hide();<br />$(“div”).hide().cs...
          jQuery Plugins<br />jQuery Sliders<br />Slider Gallery (http://jqueryfordesigners.com/demo/slider-gallery.html)<...
jQuery Authoring<br />Extend the jQuery system<br />Add on extra methods<br />	$(“div”).hideRemove();<br />Trivial to impl...
jQuery on PageMethods<br />C#<br />jQuery<br />
jQuery and JSON<br />JSON (JavaScript Object Notation) - is a lightweight data-interchange format. It is easy for humans t...
jQuery’s LINQ<br />LINQ style functionality for JavaScript. Allows you to work with sets of data using query style syntax ...
jQuery on SVG<br />Scalable Vector Graphics (SVG) - is a family of specifications of an XML-based file format for describi...
jQuery Effects IDE<br />Glimmer allows you to easily create interactive elements on your web pages by harnessing the power...
QUnit<br />Qunit - is a powerful, easy-to-use, JavaScript test suite. It's used by the jQuery project to test its code and...
jQuery Intelisense in VS<br />http://weblogs.asp.net/scottgu/archive/2008/11/21/jquery-intellisense-in-vs-2008.aspx<br />j...
Questions<br />
Upcoming SlideShare
Loading in …5
×

jQuery

1,478 views

Published on

  • Thank you,very informative. :-)
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

jQuery

  1. 1. by: Jeremiah G. Gatong<br />
  2. 2. Things to know first…<br />
  3. 3. The JavaScript Ninja!<br />John Resig - is a JavaScript Tool Developer for the Mozilla Corporation and the creator and lead developer of the jQuery.<br />
  4. 4. What is jQuery?<br />Is a single JavaScript file.<br />Is a cross-browser JavaScript library (e.g. Dojo, YUI, Prototype, Mochikit, Scriptaculous)designed to simplify the client-side scripting of HTML.<br />It was released in January 2006 at BarCamp NYC by John Resig.<br />An open source functional scripting tool.<br />Syntax is designed to make it easier to navigate a document, select DOM elements, create animations, handle events, and develop Ajax applications.<br />Provides capabilities for developers to create plugins on top of the JavaScript library.<br />
  5. 5. Why use jQuery?<br />Free! (MIT License & GNU GPL v2)<br />Cross browser(IE 6+, Firefox 2+, Safari 3+, Opera 9+ & Chrome 1+)<br />Lightweight (14KB)<br />Extensible<br />Fully documented (http://docs.jquery.com/Main_Page)<br />Templating engine<br />Unit test (QUnit)<br />Documentation Generator (JsDoc-Toolkit)<br />Browser extensions (jsshell, FireQuery, etc…)<br />Great community<br />Tons of plugins (DataGrid, Sortable table, etc...)<br />
  6. 6. Who use jQuery?<br />
  7. 7. Where can I get jQuery?<br />jQuery official website http://jquery.com/<br />Microsoft adopted it within Visual Studio 2010 for use within Microsoft's ASP.NET AJAX framework and ASP.NET MVC Framework<br />Public Servers<br />http://www.asp.net/ajaxlibrary/cdn.ashx#jQuery_Releases_on_the_CDN_0<br />http://code.google.com/apis/libraries/devguide.html#jquery<br />
  8. 8. How can I use jQuery?<br />Pick compression level<br />Include the library<br /><script type=“text/javascript" src="jquery.min.js"></script><br />Start coding<br /><script type=“text/javascript" ><br /> // Put your logic here…<br /></script><br />
  9. 9. The jQuery object<br />Commonly named: <br />Also named: <br />
  10. 10. jQuery API<br />jQuery Selector<br />$(*)<br />$(element)<br />$(id)<br />$(class)<br />$(object)<br /> $ $.<br />jQuery Command [factory or utility]<br />.doSomething(parameter, …, options, callback);<br />Interchangeable<br />
  11. 11. jQuery UI<br />Provides abstractions for low-level interaction and animation, advanced effects and high-level, themeable widgets, built on top of the jQuery JavaScript Library, that can be used to build interactive web applications.<br />Samples<br />Resizable<br />Tabs<br />Accordion<br />Progress Bar<br />Calendar<br />etc…<br />
  12. 12. The focus of jQuery<br />
  13. 13. Find some elements…<br />Full CSS selector 1-3 support<br />Basic XPath<br />Better CSS selector support than most browsers<br />
  14. 14. $(“div”)<br /><div id=”body”><br /><h2>Some Header</h2><br /><div class=”contents”><br /><p>...</p><br /><p>...</p><br /></div><br /></div><br />
  15. 15. $(“#body”)<br /><div id=”body”><br /><h2>Some Header</h2><br /><div class=”contents”><br /><p>...</p><br /><p>...</p><br /></div><br /></div><br />
  16. 16. $(“div#body”)<br /><div id=”body”><br /><h2>Some Header</h2><br /><div class=”contents”><br /><p>...</p><br /><p>...</p><br /></div><br /></div><br />
  17. 17. $(“div.contents p”)<br /><div id=”body”><br /><h2>Some Header</h2><br /><div class=”contents”><br /><p>...</p><br /><p>...</p><br /></div><br /></div><br />
  18. 18. $(“div > div”)<br /><div id=”body”><br /><h2>Some Header</h2><br /><div class=”contents”><br /><p>...</p><br /><p>...</p><br /></div><br /></div><br />
  19. 19. $(“div:has(div)”)<br /><div id=”body”><br /><h2>Some Header</h2><br /><div class=”contents”><br /><p>...</p><br /><p>...</p><br /></div><br /></div><br />
  20. 20. Do something with them<br />DOM Manipulation (append, prepend, remove)<br />Events (click, hover, toggle)<br />Effects (hide, show, slideDown, fadeOut)<br />AJAX (load, get, post)<br />
  21. 21. DOM Manipulation<br />$(“a[target]”)<br /> .append(“ (Opens in New Window)”);<br />$(“#body”).css({<br /> border: “1px solid green”,<br /> height: “40px”<br />});<br />
  22. 22. Events<br />$(“form”).submit(function(){<br /> if ( $(“input#name”).val() == “” )<br /> $(“span.help”).show();<br />});<br />$(“a#open”).click(function(){<br /> $(“#menu”).show();<br /> return false;<br />});<br />
  23. 23. Animations<br />$(“#menu”).slideDown(“slow”);<br />Individual properties<br /> $(“div”).animate({<br />fontWeight: “2em”,<br /> width: “+=20%”,<br />color: “green” // via plugin<br /> });<br />Callbacks<br /> $(“div”).hide(500, function(){<br /> // $(this) is an individual <div> element<br /> $(this).show(500);<br /> });<br />
  24. 24. Ajax<br />$(“#body”).load(“sample.html div > h1”);<br />Before<br /> <div id=”body”></div><br />After<br /> <div id=”body”><br /> <h1>Hello, world!</h1><br /> </div><br />$.getJSON(“test.json”, function(js){<br /> for ( var name in js )<br /> $(“ul”).append(“<li>” + name + “</li>”);<br />});<br />
  25. 25. Chaining<br />You can have multiple actions against a single set of elements<br />$(“div”).hide();<br />$(“div”).hide().css(“color”,”blue”);<br />$(“div”).hide().css(“color”,”blue”).slideDown();<br />
  26. 26. jQuery Plugins<br />jQuery Sliders<br />Slider Gallery (http://jqueryfordesigners.com/demo/slider-gallery.html)<br />jQuery Navigation Menu <br />Icon Dock (http://icon.cat/software/iconDock/0.8b/dock.html)<br />Navigation<br />Tree View (http://jquery.bassistance.de/treeview/demo/)<br />Many-many more…<br />
  27. 27. jQuery Authoring<br />Extend the jQuery system<br />Add on extra methods<br /> $(“div”).hideRemove();<br />Trivial to implement<br />jQuery.fn.hideRemove= function(speed){<br /> return this.hide(speed, function(){<br /> jQuery(this).remove();<br /> });<br /> };<br />
  28. 28. jQuery on PageMethods<br />C#<br />jQuery<br />
  29. 29. jQuery and JSON<br />JSON (JavaScript Object Notation) - is a lightweight data-interchange format. It is easy for humans to read and write. It is easy for machines to parse and generate.<br />Sample:<br /> { "firstName": "John", "lastName": "Smith", "age": 25, "address": { "streetAddress": "21 2nd Street", "city": "New York", "state": "NY", "postalCode": "10021" }, "phoneNumber": [ { "type": "home", "number": "212 555-1234" }, { "type": "fax", "number": "646 555-4567" } ] } <br />
  30. 30. jQuery’s LINQ<br />LINQ style functionality for JavaScript. Allows you to work with sets of data using query style syntax to select, order and sort records.<br />Sample:<br />var results = jLinq.from(records)<br /> .ignoreCase()<br /> .startsWith("name", "m")<br /> .or("j")<br /> .is("admin")<br /> .orderBy("age")<br /> .select();<br />}}<br />
  31. 31. jQuery on SVG<br />Scalable Vector Graphics (SVG) - is a family of specifications of an XML-based file format for describing two-dimensional vector graphics, both static and dynamic (i.e. interactive or animated).<br />Sample:<br /><svg width="100%" height="100%" version="1.1“ xmlns="http://www.w3.org/2000/svg"><br /><rect width="300" height="100“ style="fill:rgb(0,0,255);stroke-width:1; stroke:rgb(0,0,0)"/><br />
  32. 32. jQuery Effects IDE<br />Glimmer allows you to easily create interactive elements on your web pages by harnessing the power of the jQuery library. Without having to hand-craft your JavaScript code, you can use Glimmer’s wizards to generate jQuery scripts for common interactive scenarios. Glimmer also has an advanced mode, providing a design surface for creating jQuery effects based on your existing HTML and CSS. <br />
  33. 33. QUnit<br />Qunit - is a powerful, easy-to-use, JavaScript test suite. It's used by the jQuery project to test its code and plugins but is capable of testing any generic JavaScript code (and even capable of testing JavaScript code on the server-side).<br />Sample:<br />test("a basic test example", function () {<br /> ok(true, "this test is fine");<br />varvalue = "hello";<br /> equals("hello", value, "We expect value to be hello");<br /> });<br />
  34. 34. jQuery Intelisense in VS<br />http://weblogs.asp.net/scottgu/archive/2008/11/21/jquery-intellisense-in-vs-2008.aspx<br />jQuery Compressor<br />http://javascriptcompressor.com/<br />jQuery Learning References<br />www.visualjquery.com & www.learningjquery.com<br />
  35. 35. Questions<br />

×