harrypotter12Excellent and very helpful. Great Presentation.
Thanks for sharing. Parcel delivery from http://www.clickandsendparcel.com1 year ago
Are you sure you want to
pylerCould have been longer and still concise.1 year ago
Are you sure you want to
changsha at changshaA wonderful presentaton that deserves thumbs up. Nice work, thanks a lot.2 years ago
Are you sure you want to
Ana Mui Stanley, Self Employed at HomeExcellent explanation. Very useful. I’m Ana Mui Stanley, working on my latest site on lyrics, www.lyrics-search.org/ . I enjoy reading the slide.2 years ago
Are you sure you want to
GeorgeSummerExcellent presentation, enjoyed it! Congrats for the presentation!
http://www.riding-mower.org/
http://www.riding-mower.org/la175-john-deere-lawn-tractor/2 years ago
Teisha Foglia, Engineer at TM LtDExcellent slideshow about the need to innovate business models; how you can represent them succinctly; together with the need to make invention initiatives actionable. Superb use of photos together with clear to see illustrative samples. Teisha http://dashinghealth.com http://healthimplants.com2 years ago
What makes jQuery
interesting?
• Built around CSS selectors
• Well behaved
• Doesn’t hijack your global namespace
• Plays well with other libraries
• API designed with conciseness and
convenience as the driving factors
The jQuery() function
jQuery('div#intro h2')
jQuery('div.section > p')
jQuery('input:radio')
$('div#intro h2')
jQuery collections
• $('div.section') returns a jQuery collection
• You can call methods on it:
$('div.section').size() = no. of matched elements
$('div.section').each(function(div) {
// Manipulate the div
}
Manipulating collections
• Most jQuery methods operate on all of the
matched elements in the collection
$('div.section').addClass('highlighted')
$('img.photo').attr('src', '/default.png');
$('a.foo').html('<em>Click me now!</em>');
$('p:odd').css('background-color', '#ccc');
Grabbing values
• Some methods return results from the first
matched element
var height = $('div#intro').height();
var src = $('img.photo').attr('src');
var lastP = $('p:last').html()
Traversing the DOM
• jQuery provides enhanced methods for
traversing the DOM
$('div.section').next()
$('div.section').prev()
$('div.section').prev('a')
$('div.section').parent()
$('div.section').parents()
Handling events
• jQuery provides methods for assigning event
handlers to elements in a cross-browser way
$('a').click(function(ev) {
$(this).css({backgroundColor: 'orange'});
ev.preventDefault();
});
Going unobtrusive
$(document).ready(function() {
alert('The DOM is ready!');
});
$(function() { alert('This is a shortcut') });
Chaining
• Most jQuery methods return another
jQuery object - often one representing the
same collection. This means you can chain
methods together:
$('div.section').hide().addClass('gone');
Crazy chaining
$('form#login')
// hide all the labels inside the form with the 'optional' class
.find('label.optional').hide().end()
// add a red border to any password fields in the form
.find('input:password').css('border', '1px solid red').end()
// add a submit handler to the form
.submit(function(){
return confirm('Are you sure you want to submit?');
});
From http://www.ibm.com/developerworks/library/x-ajaxjquery.html
Ajax
• jQuery has excellent support for Ajax
$('div#intro').load('/some/file.html');
• More advanced methods include:
$.get(url, params, callback)
$.post(url, params, callback)
$.getJSON(url, params, callback)
$.getScript(url, callback)
Plugins
• jQuery is extensible through plugins, which
can add new methods to the jQuery object
• Form: better form manipulation
• Dimensions: lots of browser measurements
• Interface: fancy effects, accordions
• UI: drag and drop, and more
Further reading
• http://jquery.com/ - official site
• http://visualjquery.com/ - useful API reference
Thanks for sharing.
Parcel delivery from http://www.clickandsendparcel.com 1 year ago
Nice work, thanks a lot. 2 years ago
http://www.riding-mower.org/
http://www.riding-mower.org/la175-john-deere-lawn-tractor/ 2 years ago
John.
www.freeringtones.ws/ 2 years ago