Web developers use JavaScript every day to bring the necessary functionality to the websites they create.

1. A-Z About JQuery : Become
Expert Developer from
Newbie

2. What we’ll be looking at...
 Why jQuery?
 jQuery fundamentals
 Creating and manipulating elements
 Events
 Animations and effects
 Talking to the server- Ajax
 jQuery UI
 Writing plugins
 Breaking news around new releases
 Using the CDN

3. Hi, jQuery
 jQuery is
 Most popular, cross-browser JavaScript library
 Focusing on making client-side scripting of HTML simpler
 Easy navigating the DOM(Data Object Model)
 Handling events
 Working with Ajax
 Open-source, released in 2006

4. Why jQuery?
 Many JavaScript frameworks try bending the language out of its natural
form
 jQuery aims at CSS, HTML and JavaScript
 Advantages
 Lightweight
 Easy to learn using familiar CSS syntax
 Many plugins available
 Easy to extend and compatible
 It’s on Microsoft’s radar
 Rich community

5. You are not alone!
 Many LARGE companies use jQuery for their sites, including:

6. Microsoft and jQuery
 Microsoft is contributor to jQuery
 Proposed (and accepted)
templating, data linking and globalization

7. Script, don’t get in my way!
 jQuery helps us writing JavaScript code
 This will become a heavy job without jQuery!

8. jQuery fundamentals: the ready handler
 Script execution should wait until DOM elements are ready
 You say: window.onload?
 Sadly, this waits for everything to be loaded, including images etc
 Script execution is too late
 Instead, we need to wait only until the DOM tree is created
 Can be difficult in cross-browser situations
 Easy-peasy with jQuery

9. jQuery fundamentals: $
 $ function (aka jQuery() function) returns
 A JavaScript object containing an array of DOM elements
 In the order they were found in the document
 Matching a specified selector (for example a CSS selector)
 It returns the same group of elements, can be chained

10. jQuery fundamentals: selectors
 At the core of jQuery lies its selector engine
 Can be used to select elements based on names, attribute, position...

11. jQuery fundamentals: selectors
 Most basic: CSS selectors
 Can be combined
 Child selector
 Attribute selector

12. jQuery fundamentals: selectors
 Position
 Psuedo-classes (CSS filter selectors & custom selectors)

13. More selectors
 Full list at http://www.w3.org/TR/css3-selectors/
Pattern Meaning
* any element
E an element of type E
E[foo] an E element with a "foo" attribute
E[foo^="bar"]
an E element whose "foo" attribute value begins
exactly with the string "bar"
E:nth-child(n) an E element, the n-th child of its parent
E:first-child an E element, first child of its parent
E:empty
an E element that has no children (including text
nodes)
E:link
E:visited
an E element being the source anchor of a hyperlink
of which the target is not yet visited (:link) or
already visited (:visited)
E > F an F element child of an E element
an F element immediately preceded by an E

14. jQuery fundamentals: creating elements
 $(‘...’) selects an element <> $(‘<li>’) creates an element
 Attributes can be passed using JavaScript object

15. Working with the result of $ (2)
 A wrapped set is like an array of elements, normal “array operations” can
be done on it
 Check the size
 Access an indiviual element
 Loop over the elements

16. Working with the result of $ (3)
 Set operations (continued)
 Add and remove elements
 Filter elements
 Remember that we are always returning the set
 Chaining is always possible!

17. Attributes
 When we want to change how an element looks, we can change its
attributes
 jQuery provides the attr() method
 2 variations based on number and types of parameters
 Read a specified property from first element in wrapped set
 Set a property on all elements in the wrapped set (0 or more)
 Can also accept a function
 Attr() helps us dealing with browser-dependencies (again)

18. Attributes (2)
 jQuery makes it easy to apply and remove CSS classes
 addClass(), removeClass(), toggleClass() and hasClass()
 Changing indiviual CSS elements is supported
 css() can be used to get or set CSS on an element
When there is a checkbox selection or Radio Button selection , use a prop instead
of the attr.
*$(':radio').first().attr("checked", true);
*$(':radio').first().prop("checked", true);
$('#mydiv').css("background-color","yellow");

19. Working with elements
 html() can be used to get or set the content of an element
 text() can retrieve combined textual content of all elements, including their
children
 If the elements are form elements, we need to use val()
$('input:checkbox:checked').val();
$('#mydiv').html();

20. jQuery events
 bind() is where it all starts
 Binds a function to any event on any DOM element
 Works in any browser
 Possible to bind more than one event handler for an event on on element
 unbind() removes the event.

21. Live and let die
 bind() is OK for existing elements
 live() allows us to create event handlers for elements that don’t exist (yet)
 die() removes the live()-created event handlers$('.someClass')
.live('click',
function() {
//do something
});
$(".someClass").die("click")

22. Animations and effects
 Core jQuery has some basic effects
 More are available in jQuery UI
 Should be used with caution!
 Most basic ‘animation’ is hiding/showing an element
 hide(): sets display:none on the element
 show(): sets display to inline/block
 toggle(): sets visible is hidden and vice-versa
 Methods are overloaded, accepting
 Speed
 Callback

23. Animations and effects (2)
 Elements can also be gradually added/removed
 slideDown() and slideUp()
 Fading in is supported as well
 fadeIn() and fadeOut()
 animate() is mother of all animations
 Using ‘target values’ for style properties, jQuery will animate the transition

24. Ajax in the past
 When we were all young (in 1998), Microsoft introduced the ability to
perform asynchronous requests from script (ActiveX)
 Later, other browsers implemented a standard, the XMLHttpRequest
 IE6 uses an ActiveX object
 Result is that we need to do checks
 Again... jQuery to the rescue!
if(window.ActiveXObject) {
xhr = new
ActiveXObject("Microsoft.XMLHTTP");
}
else if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
}

25. Ajax with jQuery
 Basic functionality to load content from a server-side resource:
 load()
 url
 parameters: data to be passed (string, object...). If provided, a POST is executed,
otherwise a GET
 callback (optional)
 Next to load, we can also use $.get()/$.getJson() or $.post()
$('#someDiv')
.load('test.html',
function() {
alert('Load was performed.');
});

26. Ajax with jQuery(2)
 If we need all control over the Ajax request we can get:
 $.ajax()
 options: defines an object containing all the properties for the Ajax request
 List of options is huge, therefore
 $.ajaxSetup
 options: defines an object containing all the properties for the Ajax request, becoming
the default for Ajax requests

27. Ajax with jQuery(3)
 Throughout the Ajax request, we can get feedback
 Local events from the $.ajax() call (callbacks)
 Global events
 Are broadcast to every element within the DOM, can be attached on any element
 ajaxStart
 ajaxSend
 ajaxSuccess
 ajaxError
 ajaxComplete

28. jQuery UI
 Huge extension of jQuery, providing more UI capabilities
 Contains number of UI features we’d logically need
 Includes
 Effects: more advanced than core effects
 Interactions: drag and drop
 Widgets (aka controls): date picker...
 All can be themed
 jqueryui.com contains tool to configure download and “ThemeRoller” tool
 Code included in jquery-ui.js

29. Effects
 jQuery core contains some basic effects
 Based on the effect(type, options, speed, callback) method
 Has several animation types such as puff, highlight and shake (even explode
exists)
 Also allows to do animations with colors (not possible with animate())
 backgroundColor, color...
 Visibility methods (show()...) are extended
 Class methods (addClass()...) are extended
 position() method is added for advanced positioning
$('#someElement').position({
my: 'top center',
at: 'bottom right'});

30. Interactions
 Interactions focus on allowing users to directly interact with elements,
which isn’t possible with standard HTML controls
 They add advanced behaviors to our pages related to mouse interactions
 Available interactions:
 Dragging
 Dropping
 Sorting
 Resizing
 Selecting

31. Dragging
 Easy-peasy (again) with jQuery
 draggable() is your friend (heavily overloaded once again)
 Allows making elements draggable, possible with options (opacity...)
 Overloaded so it also support enabling, disabling... Draggable

32. Widgets: controls on steroids
 New controls (based on existing ones)
 Contents
 Buttons
 Sliders
 Progress bars
 Autocompletion
 Date picker
 Tabs
 Accordion
 Dialog box

33. Date picker
 Have you noticed that entering dates is a difficult thing for end users? Some
will always get it wrong!
 jQuery UI’s DatePicker can help
 $.datepicker() creates the control for you
 Has numerous options, mostly default will do
 $.datepicker.setDefaults() can be used to share defaults

34. Dialog Box
 In fact, a dialog box is nothing more that a DIV with a higher z-index and
some custom chrome
 jQuery will handle the nasty details for us (once again)
 About every element can become the content of the dialog box
 On a wrapped set, use .dialog() to make it appear as such
 Triggers some events, such as close, drag and resize
 Adds classes on the elements
 ui-dialog
 ui-dialog-title
 ...

35. Something missing in jQuery?
 2 options:
 Use an existing plugin
 jQuery plugin repository: plugins.jquery.com
 Google code: code.google.com
 SourceForge: sourceforge.net
 GitHub: github.com
 Write a plugin yourself
 Custom utility function
 Create wrapper functions

36. Writing your own plugins
 Write a plugin to add it yourself!
 Possible to write your own utility functions and wrapper methods
 Creating new wrapper methods:
 Add the method as a property on the fn object in the $ namespace

37. Breaking news!
 October 4th 2010: jQuery has accepted 3 plugins from Microsoft
 jQuery Templates
 jQuery Data Link
 jQuery Globalization
 Are now official plugins
 Templates will be standard part of next major jQuery version (1.5)

38. jQuery Templates
 Template is HTML markup (containing tags)
 3 plugins:
 .tmpl(): renders the template
 .tmplItem(): find the template item
 .template(): compile the template
<script id="movieTemplate" type="text/x-jquery-tmpl">
<li><b>${Name}</b> (${ReleaseYear})</li>
</script>
$("#movieTemplate").tmpl(movies)
.appendTo("#movieList");

39. jQuery Templates (2)
 Container for the template can be
var movies = [ { Name: "The Red Violin", ReleaseYear: "1998" }, { Name: "Eyes
Wide Shut", ReleaseYear: "1999" }, { Name: "The Inheritance", ReleaseYear:
"1976" } ];
var markup = "<li><b>${Name}</b> (${ReleaseYear})</li>";
// Compile the markup as a named template
$.template( "movieTemplate", markup );
// Render the template with the movies data and insert
// the rendered HTML under the "movieList" element
$.tmpl( "movieTemplate", movies ) .appendTo( "#movieList" );

40. jQuery Globalization
 Includes globalization information for over 350 (!) cultures
 Currencies
 Date formatting (month names)
 Number formatting

41. jQuery Globalization (2)
 $.format()
 Formats date, currencies and numbers
 Accepts value and format specifier (D, c...)
 $.preferCulture(“nl-BE”)
 Sets default culture
 $.cultures()
 Returns all available cultures
 $.parseDate()
 Converts string into JavaScript date

42. Where to get your stuff?
 Use a CDN?
 Microsoft
 Google
 Put scripts locally as well with a fallback mechanism
<script type="text/javascript"
src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js">
</script>
<script type="text/javascript">
if (typeof jQuery == 'undefined')
{
document.write(unescape("%3Cscript src='/Scripts/jquery-1.4.2.min.js'
type='text/javascript'%3E%3C/script%3E"));
}
</script>

43. Summary
 Where does all the (l) for jQuery come from?
 Light-weight library that uses JavaScript as JavaScript, relying on CSS
 Cross-browser compatible, hides the details (ready handler)
 Easy eventing model
 Can work with MVC & WebForms
 Easily extensible to fit your needs, tons of plugins already available

44. Kanhasoft.com
Services:
 Web Application Development
 iOS App Development
 Android App Development
 .Net Application Development
 PHP Web Development
 Hybrid App Development
 CRM Software Development
 ERP Software Development
 Django Application Development
 Custom Amazon Seller Tools
For Sales Inquiry:
India: +91 99133-44050
USA: +1 618-300-1610