Your SlideShare is downloading. ×
0
jQuery         Lê Văn Viễn               Social           17/05/2012
Agenda 1   Introduce 2   Compare with other libraries js 3                       APIs 4                     Q&A           ...
Introduce
Introduce1. What is jQuery?2. Why use jQuery?3. History of jQuery?4. How to use jQuery?5. Document and source code        ...
What is jQuery   jQuery is a fast and concise JavaScript Library that       simplifies HTML document traversing, event    ...
Why use jQuery   Lightweight: 1.7.2 minified 32KB, development 247 KB   CSS3 compliant: support css 1 - 3   Cross brower: ...
History of jQuery    Ausgt 22nd, 2005: John Resig first hints of a javascript libraty to        use css selector with more...
How to use jQuery    <script src="jquery.js"></script>    <script>        $(document).ready(function(){                   ...
Document and source code http://docs.jquery.com/Main_Page https://github.com/jquery/                    www.exoplatform.co...
Compare with other libraries js
Background – Developer survey                www.exoplatform.com - Copyright 2012 eXo Platform   11
Background jQuery, prototype, mootools, dojo, YUI                                                                     jQue...
Compare with other js libraries  User slickspeed to test performance (selector) http://                mootools.net/slicks...
Compare with other js libraries               www.exoplatform.com - Copyright 2012 eXo Platform   14
Compare with other js libraries               www.exoplatform.com - Copyright 2012 eXo Platform   15
APIs
APIs1.DOM2.Event3.Ajax4.Animation5.Plugin              www.exoplatform.com - Copyright 2012 eXo Platform   17
jQuery()Description: Accepts a string containing a CSS selector which is then used tomatch a set of elements.jQuery( selec...
jQuery()jQuery( selector [ , context ] ) selector A string containing a selector expression context A DOM element, Documen...
jQuery()jQuery( html [ , ownerDocument ] )Description: Creates DOM elements on the fily from provided string of raw HTMLht...
Jquery.noConflict()Description: Relingquish jQuerys control of the $ variablejQuery.noConflict( [removeAll] )RemoveAll A B...
Jquery.noConflict() - How to work with other libraries js  1. Overriding the $ function  <script src="prototype.js"></scri...
Jquery.noConflict() - How to work with other libraries js<script src="prototype.js"></script><script src="jquery.js"></scr...
Jquery.noConflict() - How to work with multipleversion jquery<script type=text/javascript src=js/jquery_1.3.js></script><s...
SelectorCompliant CSS 1-3Child selector (“parent > child”)Class selector (“.class”)ID selector (“#id”)All selector (“*”):b...
Event – Event handler attach .bind(eventType [, eventData], handler(eventObject)) Description: Attach a handler to an even...
Event – Event handler attach .live(event, handler(eventObject)) Description: Attach an event handler for all elements whic...
Event – Event handler attach .delegate( selector, eventType, handler(eventObject) ) Description: Attach a handler to one o...
Event – Event handler attach .on( events [, selector] [, data] , handler(eventObject) ) Description: Attach an event handl...
Event – bind vs live vs delegate vs on?               www.exoplatform.com - Copyright 2012 eXo Platform   30
Event – Document loading .load( handler(eventObject) ) Description: Bind an event handler to the "load" JavaScript event. ...
Event – Document loading .ready( handler) Description: Specify a function to execute when the DOM is fully loaded. handler...
Event – load vs ready               www.exoplatform.com - Copyright 2012 eXo Platform   33
Ajax .jQuery.ajax( url [, settings] ) Description: Perform an asynchronous HTTP (Ajax) request. url A string containing th...
Ajax .jQuery.ajaxSetup( options ) Description: Set default values for future Ajax requests. options A set of key/value pai...
Ajax .jQuery.get( url [, data] [, success(data, textStatus, jqXHR)] [, dataType] ) Description: Load data from the server ...
Ajax .jQuery.getJSON( url [, data] [, success(data, textStatus, jqXHR)] ) Description: Load JSON-encoded data from the ser...
Ajax .load( url [, data] [, complete(responseText, textStatus, XMLHttpRequest)] ) Description: Load data from the server a...
Q&A
Upcoming SlideShare
Loading in...5
×

Jquery

1,158

Published on

Presented by SC team at eXo Platform SEA

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,158
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
28
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • This year we expanded on that, asking more and better questions to give you better and more accurate information. The survey itself ( found here ) provided data from over 1000+ Java EE developers and those responses were analyzed to create this report. We set out to discover: We asked the people we met at JavaOne 2010, emailed previous survey respondents and promoted the survey in the media. They were sent an email with the link to the survey and told they would be notified again once the results were made available. Participants were offered a chance to win free JRebel licenses and one recipient will receive an iPad once the final results are published.
  • This year we expanded on that, asking more and better questions to give you better and more accurate information. The survey itself ( found here ) provided data from over 1000+ Java EE developers and those responses were analyzed to create this report. We set out to discover: We asked the people we met at JavaOne 2010, emailed previous survey respondents and promoted the survey in the media. They were sent an email with the link to the survey and told they would be notified again once the results were made available. Participants were offered a chance to win free JRebel licenses and one recipient will receive an iPad once the final results are published.
  • Transcript of "Jquery"

    1. 1. jQuery Lê Văn Viễn Social 17/05/2012
    2. 2. Agenda 1 Introduce 2 Compare with other libraries js 3 APIs 4 Q&A www.exoplatform.com - Copyright 2012 eXo Platform 2
    3. 3. Introduce
    4. 4. Introduce1. What is jQuery?2. Why use jQuery?3. History of jQuery?4. How to use jQuery?5. Document and source code www.exoplatform.com - Copyright 2012 eXo Platform 4
    5. 5. What is jQuery jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. www.exoplatform.com - Copyright 2012 eXo Platform 5
    6. 6. Why use jQuery Lightweight: 1.7.2 minified 32KB, development 247 KB CSS3 compliant: support css 1 - 3 Cross brower: IE6.0+, FF 3.6+, Safari 5.0+, Opera, Chrome www.exoplatform.com - Copyright 2012 eXo Platform 6
    7. 7. History of jQuery Ausgt 22nd, 2005: John Resig first hints of a javascript libraty to use css selector with more succint syntax than existing libraries 2006: Release jQuery 1.0 and planning for jQuery 1.1 2007: Release 1.2 2008: Release jQuery UI 1.5 2009: Release jQuery UI 1.7 and jQuery 1.3 2010: Release jQuery 1.4 www.exoplatform.com - Copyright 2012 eXo Platform 7
    8. 8. How to use jQuery <script src="jquery.js"></script> <script> $(document).ready(function(){ // Your code here }); </script> www.exoplatform.com - Copyright 2012 eXo Platform 8
    9. 9. Document and source code http://docs.jquery.com/Main_Page https://github.com/jquery/ www.exoplatform.com - Copyright 2012 eXo Platform 9
    10. 10. Compare with other libraries js
    11. 11. Background – Developer survey www.exoplatform.com - Copyright 2012 eXo Platform 11
    12. 12. Background jQuery, prototype, mootools, dojo, YUI jQuery prototype dojo mootools YUI www.exoplatform.com - Copyright 2012 eXo Platform 12
    13. 13. Compare with other js libraries User slickspeed to test performance (selector) http:// mootools.net/slickspeed/ www.exoplatform.com - Copyright 2012 eXo Platform 13
    14. 14. Compare with other js libraries www.exoplatform.com - Copyright 2012 eXo Platform 14
    15. 15. Compare with other js libraries www.exoplatform.com - Copyright 2012 eXo Platform 15
    16. 16. APIs
    17. 17. APIs1.DOM2.Event3.Ajax4.Animation5.Plugin www.exoplatform.com - Copyright 2012 eXo Platform 17
    18. 18. jQuery()Description: Accepts a string containing a CSS selector which is then used tomatch a set of elements.jQuery( selector [ , context ] )jQuery( element )jQuery( object )jQuery( elementArray )jQuery( jQuery object )jQuery()jQuery( html [ , ownerDocument ] )jQuery( html [, ownerDocument] ) www.exoplatform.com - Copyright 2012 eXo Platform 18
    19. 19. jQuery()jQuery( selector [ , context ] ) selector A string containing a selector expression context A DOM element, Document, or jQuery to use context Ex: $(div.foo); Search through the DOM element for any elements that match the provided selector and creates a new jquery object references these elementsjQuery( element ) element A Dom element to wrap in a jquery object Ex: $(div.foo).click(function() { $(span, this).addClass(bar); });jQuery( jQuery object ) object An existing jquery object to clone Clone the object is passed, new jQuery object references the same DOM elements as the initial onejQuery() return an empty jQuery set as 1.4, in previous version return a set containing the document node www.exoplatform.com - Copyright 2012 eXo Platform 19
    20. 20. jQuery()jQuery( html [ , ownerDocument ] )Description: Creates DOM elements on the fily from provided string of raw HTMLhtml A string of HTML to create on the fly, parses the html, not xml.ownerDocument A document in which the new elements will be createdEx: $(<p id="test">My <em>new</em> text</p>).appendTo(body);jQuery(callback)Description: Binds a function to be executed when the DOM has finished loading.Callback the function to execute when the DOM is readyEx: jQuery(function($) { // Your code using failsafe $ alias here... }); www.exoplatform.com - Copyright 2012 eXo Platform 20
    21. 21. Jquery.noConflict()Description: Relingquish jQuerys control of the $ variablejQuery.noConflict( [removeAll] )RemoveAll A Boolean indicating whether to remove all jQuery variables from the global scope(including jQuery itself) www.exoplatform.com - Copyright 2012 eXo Platform 21
    22. 22. Jquery.noConflict() - How to work with other libraries js 1. Overriding the $ function <script src="prototype.js"></script> <script src="jquery.js"></script> <script> jQuery.noConflict(); // Use jQuery via jQuery(...) jQuery(document).ready(function(){ jQuery("div").hide(); }); // Use Prototype with $(...), etc. $(someid).hide(); </script> <script src="prototype.js"></script> <script src="jquery.js"></script> <script> var $j = jQuery.noConflict(); // Use jQuery via $j(...) $j(document).ready(function(){ $j("div").hide(); }); // Use Prototype with $(...), etc. $(someid).hide(); </script> www.exoplatform.com - Copyright 2012 eXo Platform 22
    23. 23. Jquery.noConflict() - How to work with other libraries js<script src="prototype.js"></script><script src="jquery.js"></script><script> jQuery.noConflict(); // Put all your code in your document ready area jQuery(document).ready(function($){ // Do jQuery stuff using $ $("div").hide(); }); // Use Prototype with $(...), etc. $(someid).hide();</script>2. Including jquery before other libraries<script src="jquery.js"></script><script src="prototype.js"></script><script> // Use jQuery via jQuery(...) jQuery(document).ready(function(){ jQuery("div").hide(); }); // Use Prototype with $(...), etc. $(someid).hide();</script> www.exoplatform.com - Copyright 2012 eXo Platform 23
    24. 24. Jquery.noConflict() - How to work with multipleversion jquery<script type=text/javascript src=js/jquery_1.3.js></script><script type=text/javascript> var $jq_1.3 = jQuery.noConflict();</script><script type=text/javascript src=js/jquery_1.2.js></script> www.exoplatform.com - Copyright 2012 eXo Platform 24
    25. 25. SelectorCompliant CSS 1-3Child selector (“parent > child”)Class selector (“.class”)ID selector (“#id”)All selector (“*”):button selector:checkbox selector:checked selector:contains() selector:disable selector:enable selector:empty selector:file selector:first selector:has() selector:hidden selector:image selector:parent selector:reset selector:submit selector:text selector…... www.exoplatform.com - Copyright 2012 eXo Platform 25
    26. 26. Event – Event handler attach .bind(eventType [, eventData], handler(eventObject)) Description: Attach a handler to an event for the elements .bind(eventType [,eventData], handler(eventObject)) eventType A string contain one or more DOM event types eventData A map of data that will be passed to the event handler handler(eventObject) function to execute each time the event is triggered .bind(eventType [, eventData], preventBuble) preventBuble false will attach a function that prevents the default action from occurring and stop the event from bubbling. The default is true. .bind(event) events A map of one or more DOM event types and functions to execute them $("form").bind("submit", function(event) { event.stopPropagation(); }); $("form").bind("submit", function(event) { event.preventDefault(); }); $("form").bind("submit", function() { return false; }) www.exoplatform.com - Copyright 2012 eXo Platform 26
    27. 27. Event – Event handler attach .live(event, handler(eventObject)) Description: Attach an event handler for all elements which match the current selector, now and the future. .live(event, data, handler(eventObject)) .live(events-map) events-map A map of one or more js event types and functions to execute for them <script> $("p").live({ click: function() { $(this).after("<p>Another paragraph!</p>"); }, mouseover: function() { $(this).addClass("over"); }, mouseout: function() { $(this).removeClass("over"); } }); </script> www.exoplatform.com - Copyright 2012 eXo Platform 27
    28. 28. Event – Event handler attach .delegate( selector, eventType, handler(eventObject) ) Description: Attach a handler to one or more events for all elements that match the selector, now or in the future, based on a specific set of root elements. .delegate( selector, eventType, handler(eventObject) ) selectorA selector to filter the elements that trigger the event. .delegate( selector, eventType, eventData, handler(eventObject) ) .delegate( selector, events ) www.exoplatform.com - Copyright 2012 eXo Platform 28
    29. 29. Event – Event handler attach .on( events [, selector] [, data] , handler(eventObject) ) Description: Attach an event handler function for one or more events to the selected elements. .on( events [, selector] [, data], handler(eventObject) ) selectorA selector to filter the elements that trigger the event. .on( events-map [, selector] [, data] ) $("#dataTable tbody tr").on("click", function(event){ alert($(this).text()); }); www.exoplatform.com - Copyright 2012 eXo Platform 29
    30. 30. Event – bind vs live vs delegate vs on? www.exoplatform.com - Copyright 2012 eXo Platform 30
    31. 31. Event – Document loading .load( handler(eventObject) ) Description: Bind an event handler to the "load" JavaScript event. .load( handler(eventObject) ) handler(eventObject)A function to execute when the event is triggered. .load( [eventData], handler(eventObject) ) $(window).load(function () { // run code }); www.exoplatform.com - Copyright 2012 eXo Platform 31
    32. 32. Event – Document loading .ready( handler) Description: Specify a function to execute when the DOM is fully loaded. handlerA function to execute after the DOM is ready. jQuery(document).ready(function($) { // Code using $ as usual goes here. }); www.exoplatform.com - Copyright 2012 eXo Platform 32
    33. 33. Event – load vs ready www.exoplatform.com - Copyright 2012 eXo Platform 33
    34. 34. Ajax .jQuery.ajax( url [, settings] ) Description: Perform an asynchronous HTTP (Ajax) request. url A string containing the URL to which the request is sent. Settings A set of key/value pairs that configure the Ajax request. All settings are optional. $.ajax({ type: "POST", url: "some.php", data: { name: "John", location: "Boston" } }).done(function( msg ) { alert( "Data Saved: " + msg ); }); www.exoplatform.com - Copyright 2012 eXo Platform 34
    35. 35. Ajax .jQuery.ajaxSetup( options ) Description: Set default values for future Ajax requests. options A set of key/value pairs that configure the default Ajax request. All options are optional. $.ajaxSetup({ url: "/xmlhttp/", global: false, type: "POST" }); $.ajax({ data: myData }); www.exoplatform.com - Copyright 2012 eXo Platform 35
    36. 36. Ajax .jQuery.get( url [, data] [, success(data, textStatus, jqXHR)] [, dataType] ) Description: Load data from the server using a HTTP GET request. url A string containing the URL to which the request is sent. data A map or string that is sent to the server with the request. success(data, textStatus, jqXHR)A callback function that is executed if the request succeeds. dataTypeThe type of data expected from the server. Default: Intelligent Guess (xml, json, script, or html). $.get("test.cgi", { name: "John", time: "2pm" }, function(data){ alert("Data Loaded: " + data); }); www.exoplatform.com - Copyright 2012 eXo Platform 36
    37. 37. Ajax .jQuery.getJSON( url [, data] [, success(data, textStatus, jqXHR)] ) Description: Load JSON-encoded data from the server using a GET HTTP request. <script> $.getJSON("http://api.flickr.com/services/feeds/photos_public.gne? jsoncallback=?", { tags: "cat", tagmode: "any", format: "json" }, function(data) { $.each(data.items, function(i,item){ $("<img/>").attr("src", item.media.m).appendTo("#images"); if ( i == 3 ) return false; }); }); </script> www.exoplatform.com - Copyright 2012 eXo Platform 37
    38. 38. Ajax .load( url [, data] [, complete(responseText, textStatus, XMLHttpRequest)] ) Description: Load data from the server and place the returned HTML into the matched element urlA string containing the URL to which the request is sent. dataA map or string that is sent to the server with the request. complete(responseText, textStatus, XMLHttpRequest)A callback function that is executed when the request completes. <script> $("#success").load("/not-here.php", function(response, status, xhr) { if (status == "error") { var msg = "Sorry but there was an error: "; $("#error").html(msg + xhr.status + " " + xhr.statusText); } }); </script> www.exoplatform.com - Copyright 2012 eXo Platform 38
    39. 39. Q&A
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×