A Short Introduction To jQuery

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

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

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

$ (‘h2:first’)$(‘h2:last’)$(‘p:visible’)$(‘p:hidden’)$(‘input:password’)$(‘input:text’)$(‘p:odd’)

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 elementsWebCamp - 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

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

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

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’ })WebCamp - Chennai http://SudarMuthu.com

Similar to innerHTML

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

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

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

WebCamp - Chennai http://SudarMuthu.com

toggle() fadeIn() fadeOut() fadeTo() slideUp() slideDown() animate() stop()

WebCamp - Chennai http://SudarMuthu.com

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 manipulating DOM

after(content) append(content) before(content) clone() empty() remove(expr)

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 availableWebCamp - Chennai http://SudarMuthu.com

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

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

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

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

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