Scribd
Upload
127 views

Jquery: Javascript That Doesn'T Suck!

jQuery is a JavaScript library that simplifies HTML document traversal and manipulation, events, animations, and Ajax interactions for rapid web development. It was released in 2006 and makes common tasks like DOM element selection, event handling, animations, and Ajax easier and less time-consuming. jQuery works across browsers reliably and has a simple syntax that leverages CSS selection, a chainable API, events, effects, and Ajax to simplify tasks like DOM manipulation, event handling, animation, and communication with the server.

Uploaded by

Kaushik Neppalli
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as ODP, PDF, TXT or read online on Scribd
127 views

Jquery: Javascript That Doesn'T Suck!

jQuery is a JavaScript library that simplifies HTML document traversal and manipulation, events, animations, and Ajax interactions for rapid web development. It was released in 2006 and makes common tasks like DOM element selection, event handling, animations, and Ajax easier and less time-consuming. jQuery works across browsers reliably and has a simple syntax that leverages CSS selection, a chainable API, events, effects, and Ajax to simplify tasks like DOM manipulation, event handling, animation, and communication with the server.

Uploaded by

Kaushik Neppalli
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as ODP, PDF, TXT or read online on Scribd
You are on page 1/ 36

jQuery

Javascript that doesn't suck!

Presented By
Mir Nazim
www.mirnazim.com
[email protected]
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 2nd 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

$('#some-button').click(function() {
$.getJSON('b.json');
});
Take action on data

$('#some-button').click(function() {
$.getJSON('b.json', function(data) {
// do some stuff with data you just go
});
Execute a script

$('#some-button').click(function() {
$.getScript('c.js');
});
Load other data formats

$('#some-button').click(function() {
$.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

You might also like