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

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

Famous Client – Side frameworks

jQuery

Prototype

Yahoo User Interface Library (YUI)

Dojo

Rico

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

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

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

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 $()

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

$ (‘h2:first’)

$(‘h2:last’)

$(‘p:visible’)

$(‘p:hidden’)

$(‘input:password’)

$(‘input:text’)

$(‘p:odd’)

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

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

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

You can use .each() to iterate the collection

$(‘p.special’).each(function () {

alert (this);

});

$(‘p.special’)[0] – First element

$(‘p.special’)[1] - Second element

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

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

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

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”]);

$(‘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

$(‘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’ })

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

Similar to innerHTML

$(‘span#error’).text(“There is some error”)

$(‘div#msg’).html(“<strong>Message</strong>”)

$(‘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

$(‘span#msg’).show()

Also show(speed, [callback])

$(‘span#msg’).show(“fast”, function() {

alert (“Done”);

});

$(‘span#msg’).hide()

Also hide(speed, [callback])

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

toggle()

fadeIn()

fadeOut()

fadeTo()

slideUp()

slideDown()

animate()

stop()

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

Enhanced methods for traversing DOM

$(‘div#nav’).parent()

$(‘div#nav’).next()

$(‘div#nav’).prev()

$(‘div#nav’).nextAll(‘a’)

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

Enhanced methods for manipulating DOM

after(content)

append(content)

before(content)

clone()

empty()

remove(expr)

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

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

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

Alternate to onLoad event

$(document).ready(function() {

alert (“DOM is Ready”);

});

You can also use

$(function() {

alert (“DOM is Ready”);

});

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

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)

$.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

$.trim(str)

$.browser

if ($.browser.safari) {

alert(“This is Safari”);

}

You can also use

safari

opera

msie

Mozilla

$.each(object, callback)

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

Lot of Plugins available for

Form Validation

Drop down Menus

UI

Drag and Drop

Etc..,

Official Plugin repository at http://plugins.jquery.com/

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

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