Presented by SC team at eXo Platform SEA

1. jQuery
Lê Văn Viễn
Social
17/05/2012

2. Agenda
1 Introduce
2 Compare with other libraries js
3 APIs
4 Q&A
www.exoplatform.com - Copyright 2012 eXo Platform 2

3. Introduce

4. Introduce
1. 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. 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. 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. 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. 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. Document and source code
http://docs.jquery.com/Main_Page
https://github.com/jquery/
www.exoplatform.com - Copyright 2012 eXo Platform 9

10. Compare with other libraries js

11. Background – Developer survey
www.exoplatform.com - Copyright 2012 eXo Platform 11

12. Background jQuery, prototype, mootools, dojo, YUI
jQuery
prototype
dojo
mootools
YUI
www.exoplatform.com - Copyright 2012 eXo Platform 12

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. Compare with other js libraries
www.exoplatform.com - Copyright 2012 eXo Platform 14

15. Compare with other js libraries
www.exoplatform.com - Copyright 2012 eXo Platform 15

16. APIs

17. APIs
1.DOM
2.Event
3.Ajax
4.Animation
5.Plugin
www.exoplatform.com - Copyright 2012 eXo Platform 17

18. jQuery()
Description: Accepts a string containing a CSS selector which is then used to
match 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. 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 elements
jQuery( 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
one
jQuery()
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. jQuery()
jQuery( html [ , ownerDocument ] )
Description: Creates DOM elements on the fily from provided string of raw HTML
html A string of HTML to create on the fly, parses the html, not xml.
ownerDocument A document in which the new elements will be created
Ex: $('<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 ready
Ex:
jQuery(function($) {
// Your code using failsafe $ alias here...
});
www.exoplatform.com - Copyright 2012 eXo Platform 20

21. Jquery.noConflict()
Description: Relingquish jQuery's control of the $ variable
jQuery.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. 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. 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. Jquery.noConflict() - How to work with multiple
version 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. Selector
Compliant CSS 1-3
Child 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. 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. 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. 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. 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. Event – bind vs live vs delegate vs on?
www.exoplatform.com - Copyright 2012 eXo Platform 30

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. 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. Event – load vs ready
www.exoplatform.com - Copyright 2012 eXo Platform 33

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. 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. 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. 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. 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. Q&A