jQuery
Javascript that doesn't suck!
Presented ByMir [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
Doesnt mess with the language
(Prototype)
Doesnt 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
$(document).ready(function(){
// your stuff goes here
});
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
Muokkaa otsikon tekstimuotoa napsauttamalla
Muokkaa jsennyksen tekstimuotoa napsauttamalla
Toinen jsennystaso
Kolmas jsennystaso
Neljs jsennystaso
Viides jsennystaso
Kuudes jsennystaso
Seitsems jsennystaso
Kahdeksas jsennystaso
Yhdekss jsennystaso
