SlideShare uses cookies to improve functionality and performance, and to provide you with relevant advertising. If you continue browsing the site, you agree to the use of cookies on this website. See our User Agreement and Privacy Policy.
SlideShare uses cookies to improve functionality and performance, and to provide you with relevant advertising. If you continue browsing the site, you agree to the use of cookies on this website. See our Privacy Policy and User Agreement for details.
Successfully reported this slideshow.
Activate your 14 day free trial to unlock unlimited reading.
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
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
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
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