Jquery

jQuery

17/05/2012

Lê Văn Viễn Social

www.exoplatform.com - Copyright 2012 eXo Platform 2

1

2

3

4

Agenda

Introduce

Compare with other libraries js

Q & A

APIs

Introduce


Introduce

1. What is jQuery?

2. Why use jQuery?

4. How to use jQuery?

3. History of jQuery?

5. Document and source code


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.


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


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

2009: Release jQuery UI 1.7 and jQuery 1.3

2008: Release jQuery UI 1.5

2006: Release jQuery 1.0 and planning for jQuery 1.1

2010: Release jQuery 1.4

2007: Release 1.2


How to use jQuery

<script src="jquery.js"></script><script> $(document).ready(function(){ // Your code here });</script>


Document and source code

http://docs.jquery.com/Main_Pagehttps://github.com/jquery/

http://docs.jquery.com/Main_Page

https://github.com/jquery/

Compare with other libraries js


Background – Developer survey


Background jQuery, prototype, mootools, dojo, YUI

jQuery

prototype

dojomootools

YUI


Compare with other js libraries

User slickspeed to test performance (selector) http://mootools.net/slickspeed/


Compare with other js libraries


APIs

1.DOM2.Event3.Ajax4.Animation5.Plugin


jQuery()

jQuery( selector [ , context ] )jQuery( element )jQuery( object )jQuery( elementArray )jQuery( jQuery object )jQuery()jQuery( html [ , ownerDocument ] )jQuery( html [, ownerDocument] )

Description: Accepts a string containing a CSS selector which is then used to match a set of elements.


jQuery()

jQuery( selector [ , context ] )selector A string containing a selector expressioncontext A DOM element, Document, or jQuery to use contextEx: $('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 objectEx: $('div.foo').click(function() {

$('span', this).addClass('bar');});

jQuery( jQuery object )object An existing jquery object to cloneClone 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


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...

});


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)


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>


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>


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>


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…...


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 typeseventData A map of data that will be passed to the event handlerhandler(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; })



.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>



.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 )



.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());

});


Event – bind vs live vs delegate vs on?


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});


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.});


Event – load vs ready


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 );});


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 });


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); });


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>


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>

Jquery

Technology

Transcript of Jquery