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


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


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


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


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


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


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)


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

});


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)


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


Business

A Short Introduction To jQuery