Jquery In 15 Minutes

  • May 2020
  • PDF

This document was uploaded by user and they confirmed that they have the permission to share it. If you are author or own the copyright of this book, please report to us by using this DMCA report form. Report DMCA


Overview

Download & View Jquery In 15 Minutes as PDF for free.

More details

  • Words: 338
  • Pages: 14
jQuery in 15 minutes Torchbox, 7th August 2007

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!'); $('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

Related Documents

15 Minutes Eitan Issacson
December 2019 11
Minutes 10-15-09
June 2020 6
Minutes 06-15-09
June 2020 4
Just 15 Minutes
August 2019 15
Minutes July 15
December 2019 25