An introduction to jQuery

437 views
385 views

Published on

A presentation & knowledge share given to the Development team at Madgex, 2009.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
437
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • I’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’ll say, fiddly. Flip side is jQuery - it’s like sprinkling magic dust on your HTML.\nIt has a nice low barrier to entry - it must do - I’m using it.\nYes it’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’ etc.)\nIE’s AJAX support is different to the W3C method - ActiveX vs. XMLHTTPRequest.\nConsistent DOM ready - essential for unobtrusive JS\n\n
  • \n
  • jQuery’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 “change the way you write JavaScript” - this may put you off, but the reason they say it is because of it’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’m going to quickly show some slides of code & then some examples in Firebug.\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • An introduction to jQuery

    1. 1. A BRIEF INTRO Madgex
    2. 2. WHAT IS IT?
    3. 3. WHAT IS IT?•AJavaScript library with the philosophy "Writing JavaScriptcode should be fun"
    4. 4. WHAT IS IT?•A JavaScript library with the philosophy "Writing JavaScript code should be fun"• Simplifies stuff & adds common functionality
    5. 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. 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. 7. HOW DO YOU USE IT?• "Find stuff & do stuff to it"
    8. 8. HOW DO YOU USE IT?• "Find stuff & do stuff to it"• Finding stuff is based around CSS(1-3) selectors & XPath
    9. 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. 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
    11. 11. ME H O W E!S CO DT HE
    12. 12. SELECTINGjQuery(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. 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 objectinstead 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. 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.
    15. 15. EVENTS$(p).click(function()
{



$(this).css(background‐color,
red);});Set up paragraphs so that when you click them they turn red.$(a).hover(function()
{



$(this).css(background‐color,
orange);},
function()
{



$(this).css(background‐color,
white);});hover() is a shortcut for setting up two functions that run onmouseover andonmouseout.
    16. 16. AJAX$.ajax({

type:
"POST",

data:
“name=Dave&location=Brighton”

url:
"/getusers",

success:
function(data){




console.log(‘data
from
server:
’,
data);

}});
    17. 17. ANIMATION



$("p").click(function
()
{





$(this).fadeOut("slow");



});



$("div#clickme").click(function
()
{





$(this).animate({








width:
"70%",







opacity:
0.4,







marginLeft:
"20px",







fontSize:
"3em",








borderWidth:
"10px"





},
1500
);



});
    18. 18. EXAMPLE
    19. 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

    ×