Introduction to jQuery

jQuery

Javascript that doesn't suck!

Presented By Mir Nazim www.mirnazim.com [email_address]

WHAT and WHEN

John Resig - www.ejohn.org

Released at BarCamp NYC on Jan 2006

jQuery 1.0 out on Aug 2006

version 1.1.3 latest

~ 800% faster for DOM processing

numerous other improvements

WHY

Doesn’t mess with the language

(Prototype)

Doesn’t try to be Python

(Mochikit)

Only essentials: > 20 KB

(Scriptaculous, Dojo)

More than cosmetic effects

(Moo.fx)

Makes common tasks a breeze

OTHER REASONS

Great Documentaions

Great community

Tons of plugins

Works everywhere RELIABLY

IE 6+, Firefox, Safari 2+, and Opera 9+

What jQuery Deos

GENRAL PURPOSE

ABSTRACTION LAYER

FOR

COMMON

WEB SCRIPTING

TASKS

What's Good in it

Access parts of a page

Modify the appearance of a page

Alter the content of a page

Respond to a user's interaction

Add animation to a page

Retrieve information (Ajax)

Simplify common tasks

How jQuery does it

Leverage knowledge of CSS

Abstract away browser quirks

Always work with sets

Allow multiple actions in one line

Support extensions

Getting Started

<head>

<script src="jquery.js" type="text/javascript"> </script>

<script type="text/javascript">

$(document).ready(function(){

// your stuff goes here

});

</script>

</head>

The $() function

A factory for jQuery object

Provides a jQuery instance

All operations are done using $()

Element Selection - CSS

$(document).ready(function(){

//select all ”p” elements

$(”p”);

//select an element with id=”soem-id”

$(”#some-id”);

//select all elements with class=”soem-class”

$(”.some-class”);

});

More Element Selection

/* select 'li' elements that are children of 'ul' with id=”some-ul” */

$('ul#some-ul > li')

Element Selection - XPath

//all links with a title attributes

$('a[@title]')

//all ”divs” containing on ”ol” element

$('div[ol]')

Xpath + RegEx

//all links with ”href” starting with ”mailto:”

$('a[@href^="mailto:"]')

//all links with ”href” ending with ”.pdf”

$('a[@href$=".pdf"]')

//all links that contain ”mysite.com” anywhere in ”href”

$('a[@href*="mysite.com"]')

Custom Selectors

//selects 2 nd div from the set

$('div.someclass:eq(0)')

// same as above but CSS based

$('div.someclass:nth-child(1)')

Select Even/Odd Rows of table

$('tr:odd') //all odd rows

$('tr:even') //all even rows

DOM Traversal

Same Effect, Different way

$('tr').filter(':odd') //all odd rows

$('tr').filter(':even') //all even rows

DOM Traversal

//select the parent element of ”th”

$('th').parent()

//select all even ”tr” but not that contain a ”th”

$('tr:not([th]):even')

//select all odd ”tr” but not that contain a ”th”

$('tr:not([th]):odd')

More DOM

$('td:contains("Henry")').siblings()

$('td:contains("Henry")').parent().find('td:gt(0)')

$('td:contains("Henry")').parent().find('td')

.not(':contains("Henry")') )

$('td:contains("Henry")').parent().find('td:eq(1)')

Method Chaining

//get every cell containing "Henry"

$('td:contains("Henry")')

//get its parent

.parent()

//find inside the parent the 2nd cell

.find('td:eq(1)')

//add the "highlight" class to that cell

.addClass(highlight')

//revert back to the parent of the cell containing "Henry"

.end()

//find inside the parent the 3rd cell

.find('td:eq(2)')

//add the "highlight" class to that cell

.addClass('highlight');

Events

$('#some-element').bind('click',function() {

$('body').addClass('large');

//some more stuff

//even some more stuff

});

use event names without on part. E.G

onClick => click

onKeyPress => keypress

Compound Events

// add and remove class on alternate clicks

$('#some-element'). toggle (function() {

$('#switcher.button').addClass('hidden');

}, function() {

$('#switcher.button').removeClass('hidden');

});

One compound event

//works like ”:hover” pseudo class

$('#some-element').hover(function() {

$(this).addClass('hover');

}, function() {

$(this).removeClass('hover');

});

Manipulating Attributes

//change the ”title” attribute of ”a” element where id=”some-id”

$('a#some-id').attr({'title': 'Some Text here'});

//more than one at a time

$('a#some-id').attr({

'title':'Some Text here',

'href':'www.example.com',

'id':'some-other-id',

});

Changing the tag content

//eq of element.innerHTML()

$('#some-div').html()

//eq of element.innerHTML = some-var

$('#some-div').html(some-var)

//eq of some-input.value

$('input').val()

//eq of some-input.value = some-var

$('input').val(some-var)

AJAX

/* when a buttong with id=”some-button” is clicked load ”a.html” in div with id=”some-div” */

$('#some-button').click(function() {

$('#some-div').load('a.html');

});

AJAX + JSON

$.getJSON('b.json');

});

Take action on data

$.getJSON('b.json', function(data) {

// do some stuff with data you just go

});

Execute a script

$.getScript('c.js');

});

Load other data formats

$.get('my-format.data', function(data) {

//handle your data way you want

});

});

A GET request

$.get('e.php',

{'term': $(this).text()},

function(data) {

$('#some-div').html(data);

}

);

POST request

$.post('e.php',

{'term': $(this).text()},

function(data) {

$('#some-div').html(data);

}

);

AJAX observers

$('#loading'). ajaxStart (function() {

$(this).show();

}). ajaxStop (function() {

$(this).hide();

});

There is more

Loads of good quality plugins for

Extended AJAX functionality

Cool Effects

Extensions to core jQuery

much more

http://jquery.com/plugins

http://doc.jquery.com/Plugins

Resources

http://doc.jquery.com

www.visualjquery.com

www.Google.com

15 days of jQuery (blog)

Learning jQuery (blog)

Thanks A Millions

?

QEUSTIONS

Introduction to jQuery

2 comments

Notes on slide 1

22 Favorites & 2 Groups