4. WHAT IS IT?
•A JavaScript library with the philosophy "Writing JavaScript
code should be fun"
• Simplifies stuff & adds common functionality
5. WHAT IS IT?
•A JavaScript library with the philosophy "Writing JavaScript
code should be fun"
• Simplifies stuff & adds common functionality
• Removessome cross-browser headaches (events/AJAX/
window.onload)
6. WHAT IS IT?
•A JavaScript library with the philosophy "Writing JavaScript
code should be fun"
• Simplifies stuff & adds common functionality
• Removessome cross-browser headaches (events/
window.onload)
• Pretty small at 19KB minified & gzipped
7. HOW DO YOU USE IT?
• "Find stuff & do stuff to it"
8. HOW DO YOU USE IT?
• "Find stuff & do stuff to it"
• Finding stuff is based around CSS(1-3) selectors & XPath
9. HOW DO YOU USE IT?
• "Find stuff & do stuff to it"
• Finding stuff is based around CSS(1-3) selectors & XPath
• Threemain 'doing' categories based around: manipulation,
returning a value & modifying
10. HOW DO YOU USE IT?
• "Find stuff & do stuff to it"
• Finding stuff is based around CSS(1-3) selectors & XPath
• Threemain 'doing' categories based around: manipulation,
returning a value & modifying
• Chaining methods together - makes it look weird
12. SELECTING
jQuery('div.panel')
All divs with class=“panel”
$('p#intro')
The paragraph with id=“intro”
$('div#content a:visible')
All visible links inside the div with id=“content”
$('input[name=email]')
All input fields with name=“email”
$('table.orders tr:odd')
“odd” numbered rows in a table with class “orders”
13. MANIPULATION
$('div#primary').width(300);
Set the width of div id=“primary” to 300 px.
$('p').css('line‐height', '1.8em');
Apply a line-height of 1.8em to all paragraphs.
$('li:odd').css({color: 'white', backgroundColor: 'black'});
Apply two CSS rules to every other list item; note that the css() function can take an object
instead of two strings.
var div = $('<div>Some text</div>').addClass('inserted').attr('id', 'foo');
div.appendTo(document.body);
Create a snippet of HTML, add some attributes then add it to the document.
14. RESULT SET MANIPULATION
$('div').not('[id]')
Returns divs that do not have an id attribute.
$('h2').parent()
Returns all elements that are direct parents of an h2.
$('blockquote').children()
Returns all elements that are children of a blockquote.
$('p').eq(4).next()
Find the fifth paragraph on the page, then find the next element (its direct sibling to the right).
$('input:text:first').parents('form')
Find the form parent of the first input type=“text” field on the page. The optional argument to parents()
is another selector.
19. LINKY LINKS
• http://jquery.com & http://docs.jquery.com
• http://docs.jquery.com/discussion
• http://api.jquery.com - Interactive API browser & AIR
download
• jQuery for JavaScript developers - http://tinyurl.com/
jq4jsdevs
Notas del editor
I&#x2019;ve been working with jQuery for a little while now. It seems to be gaining more mainstream momentum than other JS libraries, and MS is providing Intelisense for it in VS2008.\nIt's only fairly recently been given the green light for project work so Jane asked me to do a little ramble on it to introduce you if your not already aquainted.\n
\n
Most of the time it is! In the past JavaScript could be, we&#x2019;ll say, fiddly. Flip side is jQuery - it&#x2019;s like sprinkling magic dust on your HTML.\nIt has a nice low barrier to entry - it must do - I&#x2019;m using it.\nYes it&#x2019;s a library, potentially not as fast as pure old school JS.\n
\n
Easy DOM traversal, you can find elements and more around easily\nAdds easy manipulation of elements(moving/altering content)\nEvents, Ajax & Animations\n
jQuery provides simple, unified handling of ajax & events (clicks, mouseovers, keypress&#x2019; etc.)\nIE&#x2019;s AJAX support is different to the W3C method - ActiveX vs. XMLHTTPRequest.\nConsistent DOM ready - essential for unobtrusive JS\n\n
\n
jQuery&#x2019;s mantra is "Find stuff & do stuff to it"\n\n
Uses CSS1-3, and some customs like :visible, :odd\n
Manipulate all of the matched elements.\nReturn a value from the first matched object.\nmodify the selection itself.\n
A jQuery aim is to &#x201C;change the way you write JavaScript&#x201D; - this may put you off, but the reason they say it is because of it&#x2019;s powerful chaining ability - you can chain one method onto another passing the results of the current method on to the next.\n
Tom says enough chat - he wants code!\n
I&#x2019;m going to quickly show some slides of code & then some examples in Firebug.\n