A Short Introduction To jQuery

1. Sudar ( http://SudarMuthu.com ) WebCamp Chennai – 23 Feb 2008

2. <ul><li>Famous Client – Side frameworks </li></ul><ul><li>jQuery </li></ul><ul><li>Prototype </li></ul><ul><li>Yahoo User Interface Library (YUI) </li></ul><ul><li>Dojo </li></ul><ul><li>Rico </li></ul>WebCamp - Chennai http://SudarMuthu.com

3. <ul><li>The $() function </li></ul><ul><li>Build around CSS selectors </li></ul><ul><li>WordPress has started to use jQuery </li></ul><ul><li>Lots of Plugins </li></ul><ul><li>Can be used with other libraries </li></ul><ul><li>Doesn’t hijack the global namespace </li></ul><ul><li>Small Size (Just 15 KB after Minified and Gzipped) </li></ul><ul><li>Write Less, Do More </li></ul>WebCamp - Chennai http://SudarMuthu.com

4. <ul><li>Matches a set of elements and returns a collection. </li></ul><ul><li>Uses CSS Selectors </li></ul><ul><li>$ (‘#comment’) </li></ul><ul><li>$(‘div.comment’) </li></ul><ul><li>$(‘div#content h2’) </li></ul><ul><li>$(‘input:password’) </li></ul><ul><li>$(‘a[href^=“http://”]’) </li></ul><ul><li>$(‘ul#nav > li’) </li></ul><ul><li>You can also use jQuery() instead of $() </li></ul>WebCamp - Chennai http://SudarMuthu.com

5. <ul><li>$ (‘h2:first’) </li></ul><ul><li>$(‘h2:last’) </li></ul><ul><li>$(‘p:visible’) </li></ul><ul><li>$(‘p:hidden’) </li></ul><ul><li>$(‘input:password’) </li></ul><ul><li>$(‘input:text’) </li></ul><ul><li>$(‘p:odd’) </li></ul>WebCamp - Chennai http://SudarMuthu.com

6. <ul><li>The $ () function returns a collection consisting of </li></ul><ul><li>the elements that match the selector. </li></ul><ul><li>It is similar to an array, but not exactly same. </li></ul><ul><li>You can use </li></ul><ul><li>$(‘p.special’).length or </li></ul><ul><li>$(‘p.special’).size() </li></ul><ul><li>Both return the number of matched elements </li></ul>WebCamp - Chennai http://SudarMuthu.com

7. <ul><li>You can use .each() to iterate the collection </li></ul><ul><li>$(‘p.special’).each(function () { </li></ul><ul><li>alert (this); </li></ul><ul><li>}); </li></ul><ul><li>$(‘p.special’)[0] – First element </li></ul><ul><li>$(‘p.special’)[1] - Second element </li></ul>WebCamp - Chennai http://SudarMuthu.com

8. <ul><li>Access a property of matched element </li></ul><ul><li>$(‘img#header’).attr(‘src’) – returns the src attribute </li></ul><ul><li>$(‘img#header’).attr(‘src’, ‘http://e.in/head.gif’) </li></ul><ul><li>Set the src attribute </li></ul>WebCamp - Chennai http://SudarMuthu.com

9. <ul><li>val() – Get the value of the input element </li></ul><ul><li>var singleValue = $(‘#single’).val(); </li></ul><ul><li>val(val) – Set the value of an input element </li></ul><ul><li>$("input:text"). val (“Value Text”); </li></ul><ul><li>$(“#multiple”).val([“multiple1”, “multiple2”]); </li></ul>WebCamp - Chennai http://SudarMuthu.com

10. <ul><li>$(‘img#header’).addClass(‘highlighted’) </li></ul><ul><li>$(‘img#header’).removeClass(‘highlighted’) </li></ul><ul><li>$(‘img#header’).toggleClass(‘highlighted’) </li></ul><ul><li>var hasBar = #(‘img#header’).hasClass(‘special’) </li></ul><ul><li>$(‘p.special’).css(‘font-size’, ’12px’ ) </li></ul><ul><li>$(‘p.special’).css({‘font-size’:’12px’, ‘color’:’red’ }) </li></ul>WebCamp - Chennai http://SudarMuthu.com

11. <ul><li>Similar to innerHTML </li></ul><ul><li>$(‘span#error’).text(“There is some error”) </li></ul><ul><li>$(‘div#msg’).html(“<strong>Message</strong>”) </li></ul>WebCamp - Chennai http://SudarMuthu.com

12. <ul><li>$(‘span#msg’).show() </li></ul><ul><li>Also show(speed, [callback]) </li></ul><ul><li>$(‘span#msg’).show(“fast”, function() { </li></ul><ul><li>alert (“Done”); </li></ul><ul><li>}); </li></ul><ul><li>$(‘span#msg’).hide() </li></ul><ul><li>Also hide(speed, [callback]) </li></ul>WebCamp - Chennai http://SudarMuthu.com

13. <ul><li>toggle() </li></ul><ul><li>fadeIn() </li></ul><ul><li>fadeOut() </li></ul><ul><li>fadeTo() </li></ul><ul><li>slideUp() </li></ul><ul><li>slideDown() </li></ul><ul><li>animate() </li></ul><ul><li>stop() </li></ul>WebCamp - Chennai http://SudarMuthu.com

14. <ul><li>Enhanced methods for traversing DOM </li></ul><ul><li>$(‘div#nav’).parent() </li></ul><ul><li>$(‘div#nav’).next() </li></ul><ul><li>$(‘div#nav’).prev() </li></ul><ul><li>$(‘div#nav’).nextAll(‘a’) </li></ul>WebCamp - Chennai http://SudarMuthu.com

15. <ul><li>Enhanced methods for manipulating DOM </li></ul><ul><li>after(content) </li></ul><ul><li>append(content) </li></ul><ul><li>before(content) </li></ul><ul><li>clone() </li></ul><ul><li>empty() </li></ul><ul><li>remove(expr) </li></ul>WebCamp - Chennai http://SudarMuthu.com

16. <ul><li>Provides methods for assigning events in a cross </li></ul><ul><li>browser way </li></ul><ul><li>$(‘div#msg’).click(function(ev) { </li></ul><ul><li>$(this).css(‘color’, ‘red’); </li></ul><ul><li>alert(‘Clicked’); </li></ul><ul><li>}); </li></ul><ul><li>Lot of other handlers also available </li></ul>WebCamp - Chennai http://SudarMuthu.com

17. <ul><li>Alternate to onLoad event </li></ul><ul><li>$(document).ready(function() { </li></ul><ul><ul><li>alert (“DOM is Ready”); </li></ul></ul><ul><li>}); </li></ul><ul><li>You can also use </li></ul><ul><li>$(function() { </li></ul><ul><ul><li>alert (“DOM is Ready”); </li></ul></ul><ul><li>}); </li></ul>WebCamp - Chennai http://SudarMuthu.com

18. <ul><li>jQuery has excellent support for AJAX </li></ul><ul><li>$(‘div#msg’).load(‘/dir/file.html’) </li></ul><ul><li>You can also use other advanced methods </li></ul><ul><li>$.get(url, params, callback) </li></ul><ul><li>$.post(url, params, callback) </li></ul><ul><li>$.getJSON(url, params, callback) </li></ul><ul><li>$.getScript(url, callback) </li></ul>WebCamp - Chennai http://SudarMuthu.com

19. <ul><li>$.trim(str) </li></ul><ul><li>$.browser </li></ul><ul><ul><li>if ($.browser.safari) { </li></ul></ul><ul><ul><li>alert(“This is Safari”); </li></ul></ul><ul><ul><li>} </li></ul></ul><ul><li>You can also use </li></ul><ul><ul><li>safari </li></ul></ul><ul><ul><li>opera </li></ul></ul><ul><ul><li>msie </li></ul></ul><ul><ul><li>Mozilla </li></ul></ul><ul><li>$.each(object, callback) </li></ul>WebCamp - Chennai http://SudarMuthu.com

20. <ul><li>Lot of Plugins available for </li></ul><ul><li>Form Validation </li></ul><ul><li>Drop down Menus </li></ul><ul><li>UI </li></ul><ul><li>Drag and Drop </li></ul><ul><li>Etc.., </li></ul><ul><li>Official Plugin repository at http://plugins.jquery.com/ </li></ul>WebCamp - Chennai http://SudarMuthu.com

21. <ul><li>http://jquery.com – Official Site </li></ul><ul><li>http://docs.jquery.com - Documentation </li></ul><ul><li>http://plugins.jquery.com – Plugin repositry </li></ul><ul><li>http://visualjquery.com – API Reference </li></ul><ul><li>http://sudarmuthu.com/blog/tag/jquery - My blog posts about jQuery </li></ul>WebCamp - Chennai http://SudarMuthu.com

A Short Introduction To jQuery

Sudar Muthu

A Short Introduction To jQuery