A Short Introduction To jQuery

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

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

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

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

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

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

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

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

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

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

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

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

Slide 13:  toggle()  fadeIn()  fadeOut()  fadeTo()  slideUp()  slideDown()  animate()  stop() WebCamp - Chennai http://SudarMuthu.com

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

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

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

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

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

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

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

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