Introduction to jQuery
-
Upload
achinth -
Category
Technology
-
view
939 -
download
0
description
Transcript of Introduction to jQuery
jQuery(Framework and UI)
By Achinth Anand Gurkhi
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
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
jQuery Components
jQuery Framework jQuery UI jQuery Plug-ins
jQuery Framework
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.
The $ shortcut
$ is the shortcut to access the jQuery library jQuery(‘p’).addClass() $(‘p’).addClass()
DOM ready event
$(document).ready()
$(document).ready(function() { // do something });
Note: Document ready event is different from body on load event.
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/
Filters
filter() not() lt() gt() eq() contains() has()
DOM traversal methods
find() children() parents() parent() siblings() prev() next()
DOM manipulation methods
text() html() attr() val() prepend() and prependTo() append() and appendTo() before() and insertBefore() after() and insertAfter() wrap() clone() empty() remove()
CSS Manipulation
addClass() removeClass() toggleClass() css()
Demo 1
$ DOM ready event Accessing a node text() html() addClass() children() parent() each() prepend() and prependTo() clone() this
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)
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]" }
]
Demo 2
Array - join and each functions
Events
Two ways to bind controls to event$(’#x').bind('click', function(){ // event handling});
$(’#x').click(function(){ // event handling});
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.
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
Keyboard and Document events
Keyboard keyPress() keyUp() keyDown() Which key is pressed can be determined using event.keyCode
Document ready() load() unload() error()
Form and Browser Events
Form Elements focus() blur() submit() change() select()
Browser resize() scroll()
Demo 3
Binding events Triggering events
Animations
show() hide() toggle() fadeIn() fadeOut() slideUp() slideDown() slideToggle() fadeTo() animate()
Demo 4
show() hide() fadeIn() fadeOut() slideDown() slideUp()
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
)
AJAX Shortcut methods
get() post() load() getJSON() getScript()
Demo 5
load() ajax()
jQuery UI
jQuery UI(www.jqueryui.com)
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
Interactions
Dragging Dropping Re-sizing Selecting Sorting
Widgets
Accordion AutoComplete Button DatePicker Dialog ProgressBar Slider Tabs
Effects
Color Animation ToggleClass AddClass RemoveClass SwitchClass Effect Toggle Hide Show
Demo 6
http://jqueryui.com/demos/