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":"ben@gmail.com" },

{ "role": 102, "name": "Ian", "emailId":"ian@gmail.com" },

{ "role": 103, "name": "Caroline", "emailId":"carol@gmail.com" }

]

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/