jquery
TRANSCRIPT
Overview
Overview• it’s merely a JavaScript Library.
•First created by john Resig linkedin
•Open source MIT & GPL dual License
•Planned for in 2005 Announced in 2006.
•Lightweight 19kb
Overview•Widely used
• Microsoft integration shipped with MVC , the new VS has it’s Intellisense.
The Outline
•Why to use it •Versions , including jQuery •Selectors•CSS •Traversing•Manipulations•Events •Effects and Animations•Extensions, Plug-ins
•Ajax with jQurey•UI
jQuery Controls Themes
Why jQuery
•a fast JavaScript Library that simplifies HTML document traversing, event handling, animating, and many other tasks
•allow u to focus your efforts on your main functionalities and requirements ,taking off the burden from you ( i.e. handles the Cross browser , UI Controls ..)
Why jQuery
•You are not alone ! It’s a community .Constant development and improvement through plug-ins and extensions .
•utility functions that implement common functionality missing– or is a nightmare – in JavaScript (clone objects, string trimming )
• Highly customizable UI Controls
Why jQuery •Clean separation
Core , UI, Validation plug-in …Any additional required functionality can be in a modular fashion—so you can easily count your footprint and bandwidth calories.
•You should learn it it’s everywhere Google , Microsoft... Hence you’ll be seeing it for a long time to come !
Including jQuery• Including a javaScript File
<head> <title>Hello jQuery world!</title> <script type='text/javascript'
src='jquery-1.4-min.js'></script> </head>
• Current version 1.6.2• files come in
Compressed : smaller file size, Delay in execution, not available in all versions .
Uncompressed : debugging, reading .Minified , recommended .
Including jQuery
•Compressed (minified) ,Comments ,spaces and line breaks have been removed and variable names are shortened.
• Its your call : Bandwidth cost Vs readability
Getting started into syntax
•The Simplest statement in this general form :
Selector . Action . Parameters
jQuery(‘div’).css(‘color’,’red’)
•You can use the alias “$” for jQuery
SELECTORS
•$(document).ready(function() { alert(‘doc is ready are you ready !');});
Shortcut •$(function() {alert(‘doc is ready are you
ready !');•});• Its preferable to do the actions ..selections
in this event , to ensure that doc are ready and loaded , a little bit faster than JavaScript event
Selectors
•There are many !•Tag name
$(‘div’)•Class name
$(‘.classname’) • ID
$(‘#ID’)• Combination
$(tagname .classname ') $(‘#Ancestor descendant’)$('div .fancy p span')
•$(”*")▫Select all elements.
•$(“div,span”)▫Selects Div AND Span element, Multiple
Selection •Attribute :▫$("input[name='newsletter']")
Filters on selections• Like having with group by,,are defined by a colon,
followed by the filter name
• :even, :odd filters keeps every (even)-indexed element in the selection and removes the rest.
• $("div:hidden")Select all hidden divs.
• $("div:visible")Select all visible divs .
Other Filters• Child Filters:▫$("div span :first-child")
• $("div:contains(‘me')")▫Finds all divs containing “me" .
• Form Filters:▫$("input:enabled")▫$(“ input:not(:checked)”)
Decorating CSS
Accessing CSS poperty • $('#celebs tbody tr:first').css('font-size');
Setting • $('#celebs tbody tr:even').css('background-
color','#dddddd');
Decorating CSS• Object literals in setting Css
$('#celebs tbody tr:even').css({'background-color': '#dddddd', 'color': '#666666'});
• Toggleing Classes▫ $('#celebs').addClass(class1 class2ifany');▫ $('#celebs').removeClass(classA');▫ $(this).toggleClass(‘classB');
Manipulation
•Setting and getting text or Html •$(‘div’).text()•$(‘div’).text(‘this text goes in the div ’)
•$(‘#outerdiv’).html()•$(‘#updatedDiv’).html($(‘#
outerdiv’).html())
Manipulations
• .append(Dom obj )$('.container').append($('h2'));If $(‘h2’) found it’ll be moved into containerA similar one is (markup\Dom obj ).appendTo(container)
• Insertbefor(target), insertAfter(target)$('h2').insertBefore($('.container'));
• .remove()Remove the set of matched elements from the DOM.
• .clone()Create a deep copy of the set of matched elements.
Traversing
Traversing filters • .first()• .last()• .eq()▫$('li').eq(2).css('background-color', 'red');
• .not(selector\fn), is(selector\fn)▫ $('li').not(':even').css('background-color', 'red');▫ $(this).is(":contains('Peter')")
Traversing
Tree Traversing
• .children()• .parent(), parents()• .next(), .prev()• .sibilings()
Events and Binding• .bind()
$(selector).bind(eventName, handlerFn);$(selector).event(handlerFn);
• .unbind()$(selector).unbind(eventName, handlerFn);
• .trigger()
$(selector).trigger(eventName);
Interaction HelpersCoupled events • .hover()
$(selector).hover(overHandler, outHandler)
• .toggle()$(selector). Toggle(handler1, handler2….)
Spice itEffects and Animations
Adding Effects -visibility• .show ()• $('#showButton').click(function() { $
('#disclaimer').show();});• .hide()• Mimicking toggle • $('#toggleButton').click(function() { if ($
('#disclaimer').is(':visible'))• { $('#disclaimer').hide(); }• else {$('#disclaimer').show(); }});• .toggle()• Or simply• $('#toggleButton').click(function() { $
('#disclaimer').toggle();});
Extra parameters
•Speed \Duration▫slow, fast, or normal (speed)▫Or in Milliseconds (duration)
•CallBack Fn▫Specify a code that needs to run after the
effect has finished.
Adding Effects - Fading
• fadeIn( speed, [callback] ) • fadeOut( speed, [callback] )
$('#hideButton').click(function() { $('#disclaimer').fadeOut(‘slow’);});
Adding Effects – Sliding
• .slideDown()• .slideUp()• .slideToggle()•Same previous parameters
Animations • animate(params, speed, callback)• Params : an object literal list styles in a form of
property and value .• Style properties in Camel Case ;
font-size= fontSize• Ex:
$(‘div’).animate({width:’280px’, height: ‘500px’});
Animations
•The magical word toggle !!$('#mediv').animate({ width: 'toggle' }, ‘fast’);
•$('#mediv').stop();Stop all animations done on an element .
Extending jQuery and Plug-ins
Plug-in
• I f you are facing an issue check the plug-in repository before re-inventing the wheel !.
•How to use it ? Just include it <script type=”text/javascript”
src=”js/jquery.WatSoEverplugin.js”></script>
•How to make one ?There are some guidelines, basically they are
based on closures
Extending jQuery
•You can add a function to jQuery library
• jQuery.fn.extend()
$.fn.extend( Object literal goes here );where Object literal {funName :function (){}}
Misc•Browser Sniffing ▫$.browser▫$.support.opacity
•Live and die▫$('#description').live('mouseover', function() { $
(this).css('background-color', 'yellow');});
•Extending • jQuery.extend( [deep], target, object1, [objectN] )
•$.each▫jQuery.each( collection, callback(index,
value) )
•Ajax▫$('#biography').load('computadors.html
div:first');▫$.getScript
Misc•$.ajax ▫$.ajax(
{ type: 'Get\Post‘, url: ‘service.asmx\method‘, data: { id: 142 }, success:function(data) {
};});
jQuery UI
jQuery UI
• Widgets • Interactions• Effects• Themes
UI Widgets
1. Select your control to download2. Theme it ! 3. Download some files and reference them
<link type="text/css" href="css/themename/jquery-ui-1.8.15.custom.css" rel="Stylesheet" />
<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script> <script type="text/javascript" src="js/jquery-ui-
1.8.15.custom.min.js"></script>
4. and call it you have it .
Lets see it
Interactions ▫Draggable▫Droppable▫Resizable▫Selectable▫Sortable
Effects
You just have fun exploring
▫effect( effect, [options], [speed], [callback] )
▫toggle( effect, [options], [speed], [callback] )
▫Show \Hide
▫addClass, removeClass, switchClass
Themes