introduction to jquery
DESCRIPTION
A quick introduction to jQuery framework and jQuery UITRANSCRIPT
![Page 1: Introduction to jQuery](https://reader035.vdocuments.us/reader035/viewer/2022070316/555acc71d8b42a761a8b533d/html5/thumbnails/1.jpg)
jQuery(Framework and UI)
By Achinth Anand Gurkhi
![Page 2: Introduction to jQuery](https://reader035.vdocuments.us/reader035/viewer/2022070316/555acc71d8b42a761a8b533d/html5/thumbnails/2.jpg)
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
![Page 3: Introduction to jQuery](https://reader035.vdocuments.us/reader035/viewer/2022070316/555acc71d8b42a761a8b533d/html5/thumbnails/3.jpg)
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
![Page 4: Introduction to jQuery](https://reader035.vdocuments.us/reader035/viewer/2022070316/555acc71d8b42a761a8b533d/html5/thumbnails/4.jpg)
jQuery Components
jQuery Framework jQuery UI jQuery Plug-ins
![Page 5: Introduction to jQuery](https://reader035.vdocuments.us/reader035/viewer/2022070316/555acc71d8b42a761a8b533d/html5/thumbnails/5.jpg)
jQuery Framework
![Page 6: Introduction to jQuery](https://reader035.vdocuments.us/reader035/viewer/2022070316/555acc71d8b42a761a8b533d/html5/thumbnails/6.jpg)
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.
![Page 7: Introduction to jQuery](https://reader035.vdocuments.us/reader035/viewer/2022070316/555acc71d8b42a761a8b533d/html5/thumbnails/7.jpg)
The $ shortcut
$ is the shortcut to access the jQuery library jQuery(‘p’).addClass() $(‘p’).addClass()
![Page 8: Introduction to jQuery](https://reader035.vdocuments.us/reader035/viewer/2022070316/555acc71d8b42a761a8b533d/html5/thumbnails/8.jpg)
DOM ready event
$(document).ready()
$(document).ready(function() { // do something });
Note: Document ready event is different from body on load event.
![Page 9: Introduction to jQuery](https://reader035.vdocuments.us/reader035/viewer/2022070316/555acc71d8b42a761a8b533d/html5/thumbnails/9.jpg)
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/
![Page 10: Introduction to jQuery](https://reader035.vdocuments.us/reader035/viewer/2022070316/555acc71d8b42a761a8b533d/html5/thumbnails/10.jpg)
Filters
filter() not() lt() gt() eq() contains() has()
![Page 11: Introduction to jQuery](https://reader035.vdocuments.us/reader035/viewer/2022070316/555acc71d8b42a761a8b533d/html5/thumbnails/11.jpg)
DOM traversal methods
find() children() parents() parent() siblings() prev() next()
![Page 12: Introduction to jQuery](https://reader035.vdocuments.us/reader035/viewer/2022070316/555acc71d8b42a761a8b533d/html5/thumbnails/12.jpg)
DOM manipulation methods
text() html() attr() val() prepend() and prependTo() append() and appendTo() before() and insertBefore() after() and insertAfter() wrap() clone() empty() remove()
![Page 13: Introduction to jQuery](https://reader035.vdocuments.us/reader035/viewer/2022070316/555acc71d8b42a761a8b533d/html5/thumbnails/13.jpg)
CSS Manipulation
addClass() removeClass() toggleClass() css()
![Page 14: Introduction to jQuery](https://reader035.vdocuments.us/reader035/viewer/2022070316/555acc71d8b42a761a8b533d/html5/thumbnails/14.jpg)
Demo 1
$ DOM ready event Accessing a node text() html() addClass() children() parent() each() prepend() and prependTo() clone() this
![Page 15: Introduction to jQuery](https://reader035.vdocuments.us/reader035/viewer/2022070316/555acc71d8b42a761a8b533d/html5/thumbnails/15.jpg)
Arrays
Array is defined as below:var arr = [“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)
![Page 16: Introduction to jQuery](https://reader035.vdocuments.us/reader035/viewer/2022070316/555acc71d8b42a761a8b533d/html5/thumbnails/16.jpg)
Object Array var students=[
{ "role": 101, "name": "Ben", "emailId":"[email protected]" },
{ "role": 102, "name": "Ian", "emailId":"[email protected]" },
{ "role": 103, "name": "Caroline", "emailId":"[email protected]" }
]
![Page 17: Introduction to jQuery](https://reader035.vdocuments.us/reader035/viewer/2022070316/555acc71d8b42a761a8b533d/html5/thumbnails/17.jpg)
Demo 2
Array - join and each functions
![Page 18: Introduction to jQuery](https://reader035.vdocuments.us/reader035/viewer/2022070316/555acc71d8b42a761a8b533d/html5/thumbnails/18.jpg)
Events
Two ways to bind controls to event$(’#x').bind('click', function(){ // event handling});
$(’#x').click(function(){ // event handling});
![Page 19: Introduction to jQuery](https://reader035.vdocuments.us/reader035/viewer/2022070316/555acc71d8b42a761a8b533d/html5/thumbnails/19.jpg)
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.
![Page 20: Introduction to jQuery](https://reader035.vdocuments.us/reader035/viewer/2022070316/555acc71d8b42a761a8b533d/html5/thumbnails/20.jpg)
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
![Page 21: Introduction to jQuery](https://reader035.vdocuments.us/reader035/viewer/2022070316/555acc71d8b42a761a8b533d/html5/thumbnails/21.jpg)
Keyboard and Document events
Keyboard keyPress() keyUp() keyDown() Which key is pressed can be determined using event.keyCode
Document ready() load() unload() error()
![Page 22: Introduction to jQuery](https://reader035.vdocuments.us/reader035/viewer/2022070316/555acc71d8b42a761a8b533d/html5/thumbnails/22.jpg)
Form and Browser Events
Form Elements focus() blur() submit() change() select()
Browser resize() scroll()
![Page 23: Introduction to jQuery](https://reader035.vdocuments.us/reader035/viewer/2022070316/555acc71d8b42a761a8b533d/html5/thumbnails/23.jpg)
Demo 3
Binding events Triggering events
![Page 24: Introduction to jQuery](https://reader035.vdocuments.us/reader035/viewer/2022070316/555acc71d8b42a761a8b533d/html5/thumbnails/24.jpg)
Animations
show() hide() toggle() fadeIn() fadeOut() slideUp() slideDown() slideToggle() fadeTo() animate()
![Page 25: Introduction to jQuery](https://reader035.vdocuments.us/reader035/viewer/2022070316/555acc71d8b42a761a8b533d/html5/thumbnails/25.jpg)
Demo 4
show() hide() fadeIn() fadeOut() slideDown() slideUp()
![Page 26: Introduction to jQuery](https://reader035.vdocuments.us/reader035/viewer/2022070316/555acc71d8b42a761a8b533d/html5/thumbnails/26.jpg)
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
)
![Page 27: Introduction to jQuery](https://reader035.vdocuments.us/reader035/viewer/2022070316/555acc71d8b42a761a8b533d/html5/thumbnails/27.jpg)
AJAX Shortcut methods
get() post() load() getJSON() getScript()
![Page 28: Introduction to jQuery](https://reader035.vdocuments.us/reader035/viewer/2022070316/555acc71d8b42a761a8b533d/html5/thumbnails/28.jpg)
Demo 5
load() ajax()
![Page 29: Introduction to jQuery](https://reader035.vdocuments.us/reader035/viewer/2022070316/555acc71d8b42a761a8b533d/html5/thumbnails/29.jpg)
jQuery UI
jQuery UI(www.jqueryui.com)
![Page 30: Introduction to jQuery](https://reader035.vdocuments.us/reader035/viewer/2022070316/555acc71d8b42a761a8b533d/html5/thumbnails/30.jpg)
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
![Page 31: Introduction to jQuery](https://reader035.vdocuments.us/reader035/viewer/2022070316/555acc71d8b42a761a8b533d/html5/thumbnails/31.jpg)
Interactions
Dragging Dropping Re-sizing Selecting Sorting
![Page 32: Introduction to jQuery](https://reader035.vdocuments.us/reader035/viewer/2022070316/555acc71d8b42a761a8b533d/html5/thumbnails/32.jpg)
Widgets
Accordion AutoComplete Button DatePicker Dialog ProgressBar Slider Tabs
![Page 33: Introduction to jQuery](https://reader035.vdocuments.us/reader035/viewer/2022070316/555acc71d8b42a761a8b533d/html5/thumbnails/33.jpg)
Effects
Color Animation ToggleClass AddClass RemoveClass SwitchClass Effect Toggle Hide Show
![Page 34: Introduction to jQuery](https://reader035.vdocuments.us/reader035/viewer/2022070316/555acc71d8b42a761a8b533d/html5/thumbnails/34.jpg)
Demo 6
http://jqueryui.com/demos/