Your SlideShare is downloading. ×
0
Introduction to JQuery
Introduction to JQuery
Introduction to JQuery
Introduction to JQuery
Introduction to JQuery
Introduction to JQuery
Introduction to JQuery
Introduction to JQuery
Introduction to JQuery
Introduction to JQuery
Introduction to JQuery
Introduction to JQuery
Introduction to JQuery
Introduction to JQuery
Introduction to JQuery
Introduction to JQuery
Introduction to JQuery
Introduction to JQuery
Introduction to JQuery
Introduction to JQuery
Introduction to JQuery
Introduction to JQuery
Introduction to JQuery
Introduction to JQuery
Introduction to JQuery
Introduction to JQuery
Introduction to JQuery
Introduction to JQuery
Introduction to JQuery
Introduction to JQuery
Introduction to JQuery
Introduction to JQuery
Introduction to JQuery
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Introduction to JQuery

4,317

Published on

Presentation at Denver Open Source Users\' Group and the Colorado Springs Open Source User\'s Group on JQuery

Presentation at Denver Open Source Users\' Group and the Colorado Springs Open Source User\'s Group on JQuery

Published in: Technology
1 Comment
6 Likes
Statistics
Notes
  • Thanks for sharing
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
4,317
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
205
Comments
1
Likes
6
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  1. SCOTT RYAN MAY 2008 [email_address] JQuery
  2. Agenda <ul><li>Web Development Introduction </li></ul><ul><li>JQuery Introduction </li></ul><ul><li>Selectors </li></ul><ul><li>Modifiers </li></ul><ul><li>Events </li></ul><ul><li>Animation </li></ul><ul><li>Ajax </li></ul><ul><li>Plugins </li></ul>
  3. Best Practices <ul><li>Separation of Concerns </li></ul><ul><ul><li>HTML – Layout </li></ul></ul><ul><ul><li>CSS – Look and Feel </li></ul></ul><ul><ul><li>JavaScript – Event Handling and Dynamic Behavior </li></ul></ul><ul><ul><li>Ajax – Remote access and dynamic data </li></ul></ul>
  4. Why JQuery <ul><li>Captures standard pattern </li></ul><ul><ul><li>Select ,add or filter, manipulate, repeat </li></ul></ul><ul><ul><li>Unobtrusive JavaScript </li></ul></ul><ul><li>Table Striping Example </li></ul>
  5. Table Striping (Dom Code) <ul><li>var tables = document.getElementsByTagName(&quot;table&quot;); </li></ul><ul><li>for ( var t = 0; t < tables.length; t++ ) </li></ul><ul><li>{ </li></ul><ul><li>var rows = tables[t].getElementsByTagName(&quot;tr&quot;); for ( var i = 1; i < rows.length; i += 2 ) if ( !/(^|s)odd(s|$)/.test( rows[i].className ) ) rows[i].className += &quot; odd&quot;; </li></ul><ul><li>} </li></ul>
  6. Table Striping (Prototype) <ul><li>$$(&quot;table&quot;).each(function(table) </li></ul><ul><li>{ </li></ul><ul><li>Selector.findChildElements(table, [&quot;tr&quot;]) .findAll(function(row,i){ return i % 2 == 1; </li></ul><ul><li>}) .invoke(&quot;addClassName&quot;, &quot;odd&quot;); </li></ul><ul><li>}); </li></ul>
  7. Table Striping (jQuery) <ul><li>$(&quot;tr:nth-child(odd)&quot;).addClass(&quot;odd&quot;); </li></ul>
  8. JQuery Wrapper <ul><li>$(selector) or jQuery(selector) </li></ul><ul><li>Returns an array of Dom elements </li></ul><ul><li>Includes many methods </li></ul><ul><ul><li>Example </li></ul></ul><ul><ul><ul><li>$(“div.fademeout”).fadeOut(); </li></ul></ul></ul><ul><li>Can be chained and always return a new array of elements </li></ul><ul><li>Supports CSS selectors and custom selectors </li></ul>
  9. Document Ready Handler <ul><li>$(document).ready(function(){}); </li></ul><ul><li>$(function(){}); </li></ul><ul><ul><li>Runs when DOM is loaded </li></ul></ul><ul><ul><li>Cross Browser </li></ul></ul><ul><ul><li>Don’t need to wait for resources </li></ul></ul>
  10. Extending JQuery <ul><li>$.fn.samplefunc = function() </li></ul><ul><ul><ul><li>{ </li></ul></ul></ul><ul><ul><ul><li>Return </li></ul></ul></ul><ul><ul><ul><li>this.each( </li></ul></ul></ul><ul><ul><ul><li>function(){code goes here}); </li></ul></ul></ul><ul><ul><ul><li>} </li></ul></ul></ul><ul><li>$(‘#sample’).samplefunc().addClass(‘NewClass’); </li></ul>
  11. Other Libraries <ul><li>jQuery.noConflict(); </li></ul>
  12. Select
  13. Selectors <ul><li>Generic </li></ul><ul><ul><li>Element Name (a, p, img, tr, etc) </li></ul></ul><ul><ul><li>ID (#theId) </li></ul></ul><ul><ul><li>Class (.theclassname) </li></ul></ul><ul><ul><ul><li>a#theId.theclassname </li></ul></ul></ul><ul><ul><ul><li>p a.theclassname </li></ul></ul></ul><ul><li>Parent – Child </li></ul><ul><ul><li>ul.myList > li > a </li></ul></ul>
  14. Positional Selectors <ul><li>:first </li></ul><ul><li>:last </li></ul><ul><li>:first-child </li></ul><ul><li>:last-child </li></ul><ul><li>:only-child </li></ul><ul><li>:nth-child(2) </li></ul><ul><li>:nth-child(even) </li></ul>
  15. Special Selectors <ul><li>:button </li></ul><ul><li>:checkbox </li></ul><ul><li>:checked </li></ul><ul><li>:contains(text string) </li></ul><ul><li>:enabled </li></ul><ul><li>:disabled </li></ul><ul><li>:input </li></ul><ul><li>:hidden </li></ul><ul><li>:submit </li></ul><ul><li>:selected </li></ul><ul><li>:text </li></ul><ul><li>:visible </li></ul>
  16. Managing the Wrapped Set <ul><li>size </li></ul><ul><li>get(x) </li></ul><ul><li>index(element) </li></ul><ul><li>add(expression) </li></ul><ul><li>not(expression) </li></ul><ul><li>filter(expression) </li></ul><ul><li>Slice(begin, end) </li></ul>
  17. Selection Demo <ul><li>$(‘#hibiscus’) </li></ul><ul><li>$(‘img[alt],img[title]’) </li></ul><ul><li>$('img[alt]').add('img[title]') </li></ul><ul><li>$('li > a') </li></ul><ul><li>$('li > a:first') </li></ul><ul><li>$(&quot;#aTextField&quot;).attr(&quot;value&quot;,&quot;test&quot;) </li></ul><ul><li>$(‘input[type=text]’) </li></ul><ul><li>$(‘a[href$=.pdf]’) </li></ul><ul><li>$(‘div[title^=my]’) </li></ul>
  18. More Sample Selectors <ul><li>$(‘li:has(a)’); </li></ul><ul><li>$(‘li a’); </li></ul>
  19. Create/Filter/Manipulate
  20. Creating HTML <ul><li>$(“<div>Hello</div>”) or $(“<div>”) </li></ul><ul><li>$(“<div class=‘foo’>I have Foo</div><div>I Don’t</div>”) </li></ul><ul><li>.filter(“.foo”) </li></ul><ul><li>.click(function(){alert (‘I am Foo’);}) </li></ul><ul><li>.end() </li></ul><ul><li>.appendTo(“#somedivoutthere”); </li></ul>
  21. DOM Manipulation <ul><li>Each accesses every element in the wrapped set </li></ul><ul><li>Attr get and set values </li></ul><ul><ul><li>Can use json syntax </li></ul></ul><ul><ul><li>Attr(title:’test’, value:’yes’) </li></ul></ul><ul><ul><li>removeAttr </li></ul></ul><ul><ul><li>$(“a[href^http://]”).attr(“target”,”_blank”); </li></ul></ul>
  22. More Manipulation <ul><li>addClass </li></ul><ul><li>removeClass </li></ul><ul><li>toggleClass </li></ul><ul><li>css(name,value) </li></ul><ul><li>width,height, css </li></ul><ul><li>hasClass, getClassNames </li></ul><ul><li>html, html(data) </li></ul><ul><li>text , text(data) </li></ul><ul><li>append, appendTo </li></ul><ul><li>prepend, prependTo </li></ul><ul><li>before,insertBefore </li></ul><ul><li>after, insertAfter </li></ul><ul><li>wrap, wrapAll,wrapInner </li></ul><ul><li>remove </li></ul><ul><li>empty </li></ul><ul><li>replaceWith (after.remove) </li></ul>
  23. Replacing Elements <ul><li>$(‘#divToReplace’) </li></ul><ul><li>.replaceWith(‘<p>This is new Data</p>’) </li></ul><ul><li>.remove(); </li></ul>
  24. Events and Event Model <ul><li>Dom Level 0 Event Model </li></ul><ul><ul><li>Single Events </li></ul></ul><ul><ul><li>Event Class (Proprietary) </li></ul></ul><ul><li>Dom Level 2 Event Model </li></ul><ul><ul><li>Multi Event </li></ul></ul><ul><ul><li>Event Class </li></ul></ul><ul><ul><li>Non IE </li></ul></ul><ul><li>IE Event Model </li></ul><ul><li>Propagation (Bubble and Capture) </li></ul>
  25. JQuery Event Model <ul><li>Unified Event Model </li></ul><ul><li>Unified Event Object </li></ul><ul><li>Supports Model 2 Semantics </li></ul><ul><li>Propagation </li></ul><ul><ul><li>Cascade </li></ul></ul><ul><ul><li>Bubble </li></ul></ul>
  26. Event Semantics <ul><li>bind(eventType,data,listener) </li></ul><ul><li>eventTypeName(listener) </li></ul><ul><li>one(eventType, data,listener) </li></ul><ul><li>unbind(eventType, listener) </li></ul><ul><li>unbind(event) </li></ul><ul><li>trigger(eventType) </li></ul><ul><li>toggle(oddListener,evenListener) </li></ul>
  27. Simple Bind <ul><li>$(function(){ </li></ul><ul><li>$(‘#sample’) </li></ul><ul><li>.bind(‘click’,clickOne) </li></ul><ul><li>.bind(‘click’,clickTwo) </li></ul><ul><li>.bind(‘click’,clickThree) </li></ul><ul><li>.bind(‘mouseover’,mouse); </li></ul>
  28. Event Sample (Toggle/Inline) <ul><li>$(function(){ </li></ul><ul><li>$(‘#sample’).toggle( </li></ul><ul><li>function(event){ </li></ul><ul><li>$(event.target).css(‘opacity’0.4);}, </li></ul><ul><li>function(event){ </li></ul><ul><li>$(event.target).css(‘opacity”,1.0;} </li></ul><ul><li>); </li></ul><ul><li>}); </li></ul>
  29. Event Sample (Hover/External) <ul><li>$(‘#sample’) </li></ul><ul><li>.bind(‘mouseover’ , report) </li></ul><ul><li>.bind(‘mouseout’ , report); </li></ul><ul><li>function report (event) { </li></ul><ul><li>$(‘#output’).append(‘<div>’+event.type+’</div>’); </li></ul><ul><li>} </li></ul><ul><li>$(‘#sample’).hover(report , report); </li></ul>
  30. Animation and Effects <ul><li>show (speed, callback) </li></ul><ul><li>hide(speed, callback) </li></ul><ul><li>toggle(speed, callback) </li></ul><ul><ul><li>Callback is a function that is passed a reference to this as the calling element. </li></ul></ul><ul><li>fadeIn, fadeOut, fadeTo </li></ul><ul><li>slideDown, slideUp, slideToggle </li></ul><ul><li>Custom animations </li></ul>
  31. JQuery Utility Functions <ul><li>browser, box model, float style flags </li></ul><ul><li>trim </li></ul><ul><li>each </li></ul><ul><li>grep </li></ul><ul><li>inArray, makeArray, unique, extend </li></ul><ul><li>getScript </li></ul>
  32. Plugins <ul><li>Complex extensions </li></ul><ul><li>Should be developed to work with other libraries </li></ul><ul><li>Custom Utility functions </li></ul><ul><li>Custom wrapped methods </li></ul><ul><li>Form, Dimensions, Live Query, UI, MarkitUp </li></ul><ul><li>Beware of the $ but not too timid </li></ul><ul><li>Naming jquery.pluginname.js </li></ul><ul><li>Parameter Tricks </li></ul>
  33. Ajax <ul><li>load (url, parameters, callback) </li></ul><ul><li>serialize, serializeArray </li></ul><ul><li>get </li></ul><ul><li>getJSON </li></ul><ul><li>post </li></ul><ul><li>ajax </li></ul>

×