A quick introduction to jQuery framework and jQuery UI

1. jQuery(Framework and UI) By Achinth Anand Gurkhi

2. What is jQuery? Is a JavaScript framework It was first released in Jan 2006 Latest version is 1.4.4 Makes JavaScript development easier Developers need not worry about cross browser compatibility Reduces lines of code Supports IE6+, Firefox1.5+, Safari2.0.2+, Opera9+ & Chrome0.2+ Also contains a separate UI library to simplify UI tasks Is superfast and small – just 24 KB Used by over 31% of the 10,000 most visited websites Supported by Microsoft as well

3. jQuery Features DOM element selections using the cross-browser open source selector engine Sizzle, a spin-off out of the jQuery project DOM traversal and modification Events CSS manipulation Effects and animations Ajax Extensibility through plug-ins

4. jQuery Components jQuery Framework jQuery UI jQuery Plug-ins

5. jQuery Framework

6. How to use jQuery? Option 1: Download jquery-<version>.min.js from www.jquery.com and use it using <script type=‘text/javascript’ src=‘jquery.min.js’/> Option 2: From Google using <script type=‘text/javascript’ src=‘http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js’/> Option 3: From Microsoft using <script type=‘text/javascript’ src=‘http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js’/> Note: Option 2 and 3 are recommended in production for performance reasons.

7. The $ shortcut $ is the shortcut to access the jQuery library jQuery(‘p’).addClass() $(‘p’).addClass()

8. DOM ready event $(document).ready() $(document).ready(function() { // do something }); Note: Document ready event is different from body on load event.

9. Selectors $('div') - Accesses all the div elements in the HTML file. $('#A') - Accesses all the HTML elements with id=A. $('.b') - Accesses all the HTML elements with class=b. $(‘p.b’) - Accesses all the paragraph element with class=b. $(‘.a.b’) - Accesses all the HTML elements with class=a and b. and there are many more like (a+b), (a > b), (a/b), (a, b), etc. http://api.jquery.com/category/selectors/

10. Filters filter() not() lt() gt() eq() contains() has()

11. DOM traversal methods find() children() parents() parent() siblings() prev() next()

12. DOM manipulation methods text() html() attr() val() prepend() and prependTo() append() and appendTo() before() and insertBefore() after() and insertAfter() wrap() clone() empty() remove()

13. CSS Manipulation addClass() removeClass() toggleClass() css()

14. Demo 1 $ DOM ready event Accessing a node text() html() addClass() children() parent() each() prepend() and prependTo() clone() this

15. Arrays Array is defined as below: vararr = [“abc”, “bcd”, “cde”, “efg”]; Some common functions used on arrays: join each get sort grep (filtering) match (regular expressions) splice (array splitting) concat (join two arrays)

16. Object Array varstudents=[ { "role": 101, "name": "Ben", "emailId":"ben@gmail.com" }, { "role": 102, "name": "Ian", "emailId":"ian@gmail.com" }, { "role": 103, "name": "Caroline", "emailId":"carol@gmail.com" } ]

17. Demo 2 Array - join and each functions

18. Events Two ways to bind controls to event $(’#x').bind('click', function(){ // event handling }); $(’#x').click(function(){ // event handling });

19. Events – continued Use $(event.target) or ‘this’ to determine which control caused the event. Events can be triggered using the trigger(event) function. Use unbind() to de-register a control event handler. Use one() instead of bind() if you want the event handler to trigger only once.

20. Mouse events click() dblClick() mouseUp() mouseDown() mouseOver() mouseOut() Mouse button clicked can be determined using event.button 1 = left button 2 = right button Mouse co-ordinate can be determined using event.screenX and event.screenY

21. Keyboard and Document events Keyboard keyPress() keyUp() keyDown() Which key is pressed can be determined using event.keyCode Document ready() load() unload() error()

22. Form and Browser Events Form Elements focus() blur() submit() change() select() Browser resize() scroll()

23. Demo 3 Binding events Triggering events

24. Animations show() hide() toggle() fadeIn() fadeOut() slideUp() slideDown() slideToggle() fadeTo() animate()

25. Demo 4 show() hide() fadeIn() fadeOut() slideDown() slideUp()

26. AJAX $.ajax( url: ‘xyz.com/xxx’, type: get/post, data: …. timeout: (in milliseconds), success: function(), error: function(), dataType: xml/html/json/script, async: true/false )

27. AJAX Shortcut methods get() post() load() getJSON() getScript()

28. Demo 5 load() ajax()

29. jQuery UI jQuery UI (www.jqueryui.com)

30. jQuery UI jQuery UI provides abstractions for low-level interaction and animation, advanced effects and high-level, themeable widgets, built on top of the jQuery JavaScript Library, that you can use to build highly interactive web applications

31. Interactions Dragging Dropping Re-sizing Selecting Sorting

32. Widgets Accordion AutoComplete Button DatePicker Dialog ProgressBar Slider Tabs

33. Effects Color Animation ToggleClass AddClass RemoveClass SwitchClass Effect Toggle Hide Show

34. Demo 6 http://jqueryui.com/demos/