The magic of jQuery

Senior Architect & Technologist

Vlad Azarkhin

Whats the problem with JavaScript?

JavaScript was a initially introduced in Netscape 2.0B3 in Dec 1995, a.k.a. Mocha, LiveScript, Jscript,

however, its official name is

ECMAScript

JavaScript is a C-family, worlds worst named, extremely powerful language (not a script), totally unrelated to Java

JavaScript is a weakly typed, classless, prototype based OO language, that can also be used outside the browser. It is not a browser DOM.

The worlds most misunderstood

programming language.

(Douglas Crockford)

Browser DOM really sucks, and this is where jQuery comes to rescue.

This session is about improving your Quality of Life !

Introduction to jQuery

A Quality of Life by jQuery:

$(#firstName).text(Joe Black); $(button).click(function() {alert Clicked;}); $(.content).hide(); $(#main).load(content.htm); $(<div/>).html(Loading).appendTo(#content);

Very compact and fluent programming model

What is jQuery?

jQuery is a lightweight, open-source

JavaScript library that simplifies

interaction between HTML and

JavaScript

It was and still being developed by John Resig from Mozilla and was first announced in January 2006

It has a great community, great

documentation, tons of plugins, and it was recently adopted by Microsoft

(how about intellisense in VS?)

The current version is 1.3.2 (as of July 2009)

Getting Started

Download the latest version from http://jquery.com

To enable itellisense in VS 2008 SP1

install the vsdoc hotfix:

VS90SP1-KB958502-x86.exe

Copy the
jquery.js

and the
jquery-vsdoc.js

into your application

folder

Reference it in your markup

<script src=jquery.js/>

No need to reference the vsdoc.js

Reference it in your JS files:

///<reference path=jquery.js/>

or just drag it into the file

You can also reference it from Google

<script src=http://ajax.googleapis.com/ ajax/libs/jquery/1.2.6/ jquery.min.js> </script>

jQuery Core Concepts

The Magic $() function

var el = $(<div/>)

Create HTML elements on the fly

The Magic $() function

$(window).width()

Manipulate existing DOM elements

The Magic $() function

$(div).hide();
$(div, $(p)).hide();
Selects document elements

(more in a moment)

The Magic $() function

$(function(){});
Fired when the document is ready for programming. Better use the full syntax: $(document).ready(function(){});

The full name of $() function is

jQuery(div);

It may be used in case of conflict with other frameworks.

The library is designed to be isolated

(function(){ var jQuery=window.jQuery=window.$=function(){ // }; })();

jQuery uses closures for isolation

Avoid $() conflict with other frameworks

var foo = jQuery.noConflict(); // now foo() is the jQuery main function foo(div).hide();

// remove the conflicting $ and jQuery var foo = jQuery.noConflict(true);

jQuerys programming philosophy is: GET >> ACT $(div).hide() $(<span/>).appendTo(body) $(:button).click()

Almost every function returns jQuery, which provides a fluent programming interface and chainability:
$(div).show() .addClass(main) .html(Hello jQuery);

Three Major Concepts of jQuery

The $() function

Get > Act

Chainability

jQuery Selectors

All Selector

$(*)

// find everything

Selectors return a pseudo-array of jQuery elements

Basic Selectors
By Tag:

$(div)
// <div>Hello jQuery</div>

By ID:

$(#usr) // <span id=usr>John</span>

By Class:

$(.menu) // <ul class=menu>Home</ul> Yes, jQuery implements CSS Selectors!

More Precise Selectors

$(div.main)

// tag and class

$(table#data) // tag and id

Combination of Selectors
// find by id + by class
$(#content, .menu)

// multiple combination
$(h1, h2, h3, div.content)

Hierarchy Selectors
$(table td)
$(tr > td) $(label + input) $(#content ~ div)

// descendants
// children // next // siblings

Selection Index Filters

$(tr:first) $(tr:last) $(tr:lt(2)) $(tr:gt(2)) $(tr:eq(2)) // first element // last element // index less than // index gr. than // index equals

Visibility Filters

$(div:visible) // if visible $(div:hidden) // if not

Attribute Filters
$(div[id])
$(div[dir=rtl]) $(div[id^=main]) $(div[id$=name]) $(a[href*=msdn])

// has attribute
// equals to // starts with // ends with // contains

Forms Selectors
$(input:checkbox)
$(input:radio) $(:button) $(:text)

// checkboxes
// radio buttons // buttons // text inputs

Forms Filters
$(input:checked)
$(input:selected) $(input:enabled) $(input:disabled)

// checked
// selected // enabled // disabled

Find Dropdown Selected Item

<select name=cities> <option value=1>Tel-Aviv</option>

<option value=2 selected=selected>Yavne</option>

<option value=3>Raanana</option> </select>

$(select[name=ddl] option:selected).val()

SELECTORS DEMO

Document Traversal

A Selector returns a pseudo array of jQuery objects

$(div).length
Returns number of selected elements. It is the best way to check selector.

Getting a specific DOM element

$(div).get(2) or $(div)[2]

Returns a 2nd DOM element of the selection

Getting a specific jQuery element

$(div).eq(2)
Returns a 2nd jQuery element of the selection

each(fn) traverses every selected element calling fn()

var sum = 0; $(div.number).each( function(){ sum += (+this.innerHTML); });

this is a current DOM element

each(fn) also passes an indexer

$(table tr).each( function(i){ if (i % 2) $(this).addClass(odd); });

$(this) convert DOM to jQuery i - index of the current element

Traversing HTML
.next(expr) .prev(expr) // next sibling // previous sibling

.siblings(expr) // siblings .children(expr) // children .parent(expr) // parent

Check for expression

$(table td).each(function() { if ($(this).is(:first-child)) { $(this).addClass(firstCol); } });

Find in selected
// select paragraph and then find // elements with class header inside $(p).find(.header).show();
// equivalent to: $(.header, $(p)).show();

Advanced Chaining
$(<li><span></span></li>) // li .find(span) // span .html(About Us) // span .andSelf() // span, li .addClass(menu) // span,li .end() // span .end() // li .appendTo(ul.main-menu);

Get Part of Selected Result

$(div) .slice(2, 5) .not(.green) .addClass(middle);

HTML Manipulation

Getting and Setting Inner Content

$(p).html(<div>Hello $!</div>);

// escape the content of div.b

$(div.a).text($(div.b).html());

Getting and Setting Values

// get the value of the checked checkbox $(input:checkbox:checked).val(); // set the value of the textbox $(:text[name=txt]).val(Hello);

// select or check lists or checkboxes $(#lst).val([NY,IL,NS]);

Handling CSS Classes

// add and remove class $(p).removeClass(blue).addClass(red);

// add if absent, remove otherwise $(div).toggleClass(main);

// test for class existance if ($(div).hasClass(main)) { // }

Inserting new Elements

// select > append to the end $(h1).append(<li>Hello $!</li>); // select > append to the beginning $(ul).prepend(<li>Hello $!</li>);

// create > append/prepend to selector $(<li/>).html(9).appendTo(ul); $(<li/>).html(1).prependTo(ul);

Replacing Elements

// select > replace $(h1).replaceWith(<div>Hello</div>);

// create > replace selection $(<div>Hello</div>).replaceAll(h1);

Replacing Elements while keeping the content

$(h3).each(function(){ $(this).replaceWith(<div> +

$(this).html()
+ </div>); });

Deleting Elements
// remove all children $(#mainContent).empty();

// remove selection $(span.names).remove(); // change position $(p).remove(:not(.red)) .appendTo(#main);

Handling attributes
$(a).attr(href,home.htm); // <a href=home.htm></a>

// set the same as the first one $(button:gt(0)).attr(disabled, $(button:eq(0)).attr(disabled));

// remove attribute - enable $(button).removeAttr(disabled)

Setting multiple attributes

$(img).attr({ src : /images/smile.jpg, alt : Smile, width : 10, height : 10 });

CSS Manipulations
// get style $(div).css(background-color); // set style $(div).css(float, left); // set multiple style properties $(div).css({color:blue, padding: 1em margin-right: 0, marginLeft: 10px});

Dimensions
// get window height var winHeight = $(window).height();
// set element height $(#main).height(winHeight);
//.width() element //.innerWidth() .width() + padding //.outerWidth() .innerWidth() + border //.outerWidth(true) including margin

The default unit is Pixel (px)

Positioning
// from the document $(div).offset().top; // from the parent element $(div).position().left; // scrolling position $(window).scrollTop();

Events

When the DOM is ready

$(document).ready(function(){ // });
Fires when the document is ready for

programming.
Uses advanced listeners for detecting.
window.onload() is a fallback.

Attach Event
// execute always $(div).bind(click, fn); // execute only once $(div).one(click, fn);

Possible event values:

blur, focus, load, resize, scroll, unload, beforeunload, click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup, error

(or any custom event)

jQuery.Event object

Detaching Events

$(div).unbind(click, fn);

(Unique ID added to every attached function)

Events Triggering

$(div).trigger(click);

Triggers browsers event action as well.

Can trigger custom events.

Triggered events bubble up.

Events Helpers
// attach / trigger elem.blur(fn) / elem.blur()

elem.focus(fn) / elem.focus()
elem.click(fn) / elem.click()

elem.change(fn) / elem.change()
And many others

Preventing Browser Default Action

// use different triggering function $(div).triggerHandler(click); // prevent default action in handler function clickHandler(e) { e.preventDefault(); } // or just return false function clickHandler(e) {return false;}

Preventing Bubbling
// stop bubbling, keep other handler function clickHandler(e) { e.stopPropagation(); } // stop bubbling and other handlers function clickHandler(e) { e.stopImmediatePropagation(); } // or just return false function clickHandler(e) {return false;}

Live Events
// attach live event (div).live(click, fn); // detach live event (div).die(click, fn); Currently supported events:
click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, keydown, keypress, keyup

EVENTS DEMO

Effects

Showing or Hiding Element

// just show $(div).show(); // reveal slowly, slow=600ms $(div).show(slow); // hide fast, fast=200ms $(div).hide(fast);

// hide or show in 100ms $(div).toggle(100);

Sliding Elements
$(div).slideUp();

$(div).slideDown(fast);
$(div).slideToggle(1000);

Fading Elements
$(div).fadeIn(fast);

$(div).fadeOut(normal);
// fade to a custom opacity $(div).fadeTo (fast, 0.5);

Fading === changing opacity

Detecting animation completion

$(div).hide(slow, function() { alert(The DIV is hidden); });

$(div).show(fast, function() { $(this).html(Hello jQuery); }); // this is a current DOM element

Every effect function has a (speed, callback) overload

Custom Animation
// .animate(options, duration) $(div).animate({ width: 90%, opacity: 0.5, borderWidth: 5px

}, 1000);

Chaining Animation

$(div).animate({width: 90%},100) .animate({opacity: 0.5},200) .animate({borderWidth: 5px});

By default animations are queued and than performed one by one

Controlling Animations Sync

$(div) .animate({width: 90%}, {queue:false, duration:1000}) .animate({opacity : 0.5});

The first animation will be performed immediately without queuing

EFFECTS DEMO

AJAX with jQuery

Loading content
$(div).load(content.htm); // passing parameters $(#content).load(getcontent.aspx, {id:33, type:main});

Sending GET/POST requests

$.get(test.aspx, {id:1}, function(data){alert(data);});

$.post(test.aspx, {id:1}, function(data){alert(data);});

Retrieving JSON Data

$.getJSON(users.aspx, {id:1}, function(users) { alert(users[0].name); });

Retrieving JS Files
$.getScript(script.js, function() { doSomeFunction(); });

AJAX DEMO

Extending the Library

Adding Methods
// definition jQuery.fn.printLine = function(s) { return jQuery(this).each(function() { this.append(<div>+ s +</div>); }); }; // usage $(#log).printLine(Hello);

Do not use $ in the method

(at least not until next slide)

Closure to solve the $ issue

(function ($) { jQuery.fn.printLine = function(s) { return $(this).each(function() { this.append(<div>+ s +</div>); }); };

})(jQuery);

Custom Selectors
$.expr[:].test = function(o, i, m, s) { // o current object in the selection // i loop index in the stack

// m meta data about your selector

// s stack of all the elements // return true to include the element // return false to exclude the element };

LIBRARY EXTENSION DEMO

More things to explore

More Functionality on every aspect

URL parameters parser

Browser and features detection

Data Cache
Utilities Helper functions Various Plug-ins

Where to go next
jQuery web-site: http://jquery.com
jQuery API: http://api.jquery.com

Many many blogs

jQuery in Action book:

Contact me
Blog: http://blogs.microsoft.co.il/blogs/linqed
Email: vlad@netwise.co.il

Thank YOU!