Download - jQuery
![Page 1: jQuery](https://reader033.vdocuments.net/reader033/viewer/2022042714/5557c557d8b42af2178b4a1a/html5/thumbnails/1.jpg)
![Page 2: jQuery](https://reader033.vdocuments.net/reader033/viewer/2022042714/5557c557d8b42af2178b4a1a/html5/thumbnails/2.jpg)
Overview
![Page 3: jQuery](https://reader033.vdocuments.net/reader033/viewer/2022042714/5557c557d8b42af2178b4a1a/html5/thumbnails/3.jpg)
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
![Page 4: jQuery](https://reader033.vdocuments.net/reader033/viewer/2022042714/5557c557d8b42af2178b4a1a/html5/thumbnails/4.jpg)
Overview•Widely used
• Microsoft integration shipped with MVC , the new VS has it’s Intellisense.
![Page 5: jQuery](https://reader033.vdocuments.net/reader033/viewer/2022042714/5557c557d8b42af2178b4a1a/html5/thumbnails/5.jpg)
The Outline
![Page 6: jQuery](https://reader033.vdocuments.net/reader033/viewer/2022042714/5557c557d8b42af2178b4a1a/html5/thumbnails/6.jpg)
•Why to use it •Versions , including jQuery •Selectors•CSS •Traversing•Manipulations•Events •Effects and Animations•Extensions, Plug-ins
![Page 7: jQuery](https://reader033.vdocuments.net/reader033/viewer/2022042714/5557c557d8b42af2178b4a1a/html5/thumbnails/7.jpg)
•Ajax with jQurey•UI
jQuery Controls Themes
![Page 8: jQuery](https://reader033.vdocuments.net/reader033/viewer/2022042714/5557c557d8b42af2178b4a1a/html5/thumbnails/8.jpg)
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 ..)
![Page 9: jQuery](https://reader033.vdocuments.net/reader033/viewer/2022042714/5557c557d8b42af2178b4a1a/html5/thumbnails/9.jpg)
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 )
![Page 10: jQuery](https://reader033.vdocuments.net/reader033/viewer/2022042714/5557c557d8b42af2178b4a1a/html5/thumbnails/10.jpg)
• Highly customizable UI Controls
![Page 11: jQuery](https://reader033.vdocuments.net/reader033/viewer/2022042714/5557c557d8b42af2178b4a1a/html5/thumbnails/11.jpg)
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 !
![Page 12: jQuery](https://reader033.vdocuments.net/reader033/viewer/2022042714/5557c557d8b42af2178b4a1a/html5/thumbnails/12.jpg)
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 .
![Page 13: jQuery](https://reader033.vdocuments.net/reader033/viewer/2022042714/5557c557d8b42af2178b4a1a/html5/thumbnails/13.jpg)
Including jQuery
•Compressed (minified) ,Comments ,spaces and line breaks have been removed and variable names are shortened.
• Its your call : Bandwidth cost Vs readability
![Page 14: jQuery](https://reader033.vdocuments.net/reader033/viewer/2022042714/5557c557d8b42af2178b4a1a/html5/thumbnails/14.jpg)
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
![Page 15: jQuery](https://reader033.vdocuments.net/reader033/viewer/2022042714/5557c557d8b42af2178b4a1a/html5/thumbnails/15.jpg)
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
![Page 16: jQuery](https://reader033.vdocuments.net/reader033/viewer/2022042714/5557c557d8b42af2178b4a1a/html5/thumbnails/16.jpg)
Selectors
•There are many !•Tag name
$(‘div’)•Class name
$(‘.classname’) • ID
$(‘#ID’)• Combination
$(tagname .classname ') $(‘#Ancestor descendant’)$('div .fancy p span')
![Page 17: jQuery](https://reader033.vdocuments.net/reader033/viewer/2022042714/5557c557d8b42af2178b4a1a/html5/thumbnails/17.jpg)
•$(”*")▫Select all elements.
•$(“div,span”)▫Selects Div AND Span element, Multiple
Selection •Attribute :▫$("input[name='newsletter']")
![Page 18: jQuery](https://reader033.vdocuments.net/reader033/viewer/2022042714/5557c557d8b42af2178b4a1a/html5/thumbnails/18.jpg)
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 .
![Page 19: jQuery](https://reader033.vdocuments.net/reader033/viewer/2022042714/5557c557d8b42af2178b4a1a/html5/thumbnails/19.jpg)
Other Filters• Child Filters:▫$("div span :first-child")
• $("div:contains(‘me')")▫Finds all divs containing “me" .
• Form Filters:▫$("input:enabled")▫$(“ input:not(:checked)”)
![Page 20: jQuery](https://reader033.vdocuments.net/reader033/viewer/2022042714/5557c557d8b42af2178b4a1a/html5/thumbnails/20.jpg)
Decorating CSS
Accessing CSS poperty • $('#celebs tbody tr:first').css('font-size');
Setting • $('#celebs tbody tr:even').css('background-
color','#dddddd');
![Page 21: jQuery](https://reader033.vdocuments.net/reader033/viewer/2022042714/5557c557d8b42af2178b4a1a/html5/thumbnails/21.jpg)
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');
![Page 22: jQuery](https://reader033.vdocuments.net/reader033/viewer/2022042714/5557c557d8b42af2178b4a1a/html5/thumbnails/22.jpg)
Manipulation
•Setting and getting text or Html •$(‘div’).text()•$(‘div’).text(‘this text goes in the div ’)
•$(‘#outerdiv’).html()•$(‘#updatedDiv’).html($(‘#
outerdiv’).html())
![Page 23: jQuery](https://reader033.vdocuments.net/reader033/viewer/2022042714/5557c557d8b42af2178b4a1a/html5/thumbnails/23.jpg)
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.
![Page 24: jQuery](https://reader033.vdocuments.net/reader033/viewer/2022042714/5557c557d8b42af2178b4a1a/html5/thumbnails/24.jpg)
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')")
![Page 25: jQuery](https://reader033.vdocuments.net/reader033/viewer/2022042714/5557c557d8b42af2178b4a1a/html5/thumbnails/25.jpg)
Traversing
Tree Traversing
• .children()• .parent(), parents()• .next(), .prev()• .sibilings()
![Page 26: jQuery](https://reader033.vdocuments.net/reader033/viewer/2022042714/5557c557d8b42af2178b4a1a/html5/thumbnails/26.jpg)
Events and Binding• .bind()
$(selector).bind(eventName, handlerFn);$(selector).event(handlerFn);
• .unbind()$(selector).unbind(eventName, handlerFn);
• .trigger()
$(selector).trigger(eventName);
![Page 27: jQuery](https://reader033.vdocuments.net/reader033/viewer/2022042714/5557c557d8b42af2178b4a1a/html5/thumbnails/27.jpg)
Interaction HelpersCoupled events • .hover()
$(selector).hover(overHandler, outHandler)
• .toggle()$(selector). Toggle(handler1, handler2….)
![Page 28: jQuery](https://reader033.vdocuments.net/reader033/viewer/2022042714/5557c557d8b42af2178b4a1a/html5/thumbnails/28.jpg)
Spice itEffects and Animations
![Page 29: jQuery](https://reader033.vdocuments.net/reader033/viewer/2022042714/5557c557d8b42af2178b4a1a/html5/thumbnails/29.jpg)
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();});
![Page 30: jQuery](https://reader033.vdocuments.net/reader033/viewer/2022042714/5557c557d8b42af2178b4a1a/html5/thumbnails/30.jpg)
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.
![Page 31: jQuery](https://reader033.vdocuments.net/reader033/viewer/2022042714/5557c557d8b42af2178b4a1a/html5/thumbnails/31.jpg)
Adding Effects - Fading
• fadeIn( speed, [callback] ) • fadeOut( speed, [callback] )
$('#hideButton').click(function() { $('#disclaimer').fadeOut(‘slow’);});
![Page 32: jQuery](https://reader033.vdocuments.net/reader033/viewer/2022042714/5557c557d8b42af2178b4a1a/html5/thumbnails/32.jpg)
Adding Effects – Sliding
• .slideDown()• .slideUp()• .slideToggle()•Same previous parameters
![Page 33: jQuery](https://reader033.vdocuments.net/reader033/viewer/2022042714/5557c557d8b42af2178b4a1a/html5/thumbnails/33.jpg)
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’});
![Page 34: jQuery](https://reader033.vdocuments.net/reader033/viewer/2022042714/5557c557d8b42af2178b4a1a/html5/thumbnails/34.jpg)
Animations
•The magical word toggle !!$('#mediv').animate({ width: 'toggle' }, ‘fast’);
•$('#mediv').stop();Stop all animations done on an element .
![Page 35: jQuery](https://reader033.vdocuments.net/reader033/viewer/2022042714/5557c557d8b42af2178b4a1a/html5/thumbnails/35.jpg)
Extending jQuery and Plug-ins
![Page 36: jQuery](https://reader033.vdocuments.net/reader033/viewer/2022042714/5557c557d8b42af2178b4a1a/html5/thumbnails/36.jpg)
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
![Page 37: jQuery](https://reader033.vdocuments.net/reader033/viewer/2022042714/5557c557d8b42af2178b4a1a/html5/thumbnails/37.jpg)
![Page 38: jQuery](https://reader033.vdocuments.net/reader033/viewer/2022042714/5557c557d8b42af2178b4a1a/html5/thumbnails/38.jpg)
Extending jQuery
•You can add a function to jQuery library
• jQuery.fn.extend()
$.fn.extend( Object literal goes here );where Object literal {funName :function (){}}
![Page 39: jQuery](https://reader033.vdocuments.net/reader033/viewer/2022042714/5557c557d8b42af2178b4a1a/html5/thumbnails/39.jpg)
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] )
![Page 40: jQuery](https://reader033.vdocuments.net/reader033/viewer/2022042714/5557c557d8b42af2178b4a1a/html5/thumbnails/40.jpg)
•$.each▫jQuery.each( collection, callback(index,
value) )
•Ajax▫$('#biography').load('computadors.html
div:first');▫$.getScript
![Page 41: jQuery](https://reader033.vdocuments.net/reader033/viewer/2022042714/5557c557d8b42af2178b4a1a/html5/thumbnails/41.jpg)
Misc•$.ajax ▫$.ajax(
{ type: 'Get\Post‘, url: ‘service.asmx\method‘, data: { id: 142 }, success:function(data) {
};});
![Page 42: jQuery](https://reader033.vdocuments.net/reader033/viewer/2022042714/5557c557d8b42af2178b4a1a/html5/thumbnails/42.jpg)
jQuery UI
![Page 43: jQuery](https://reader033.vdocuments.net/reader033/viewer/2022042714/5557c557d8b42af2178b4a1a/html5/thumbnails/43.jpg)
jQuery UI
• Widgets • Interactions• Effects• Themes
![Page 44: jQuery](https://reader033.vdocuments.net/reader033/viewer/2022042714/5557c557d8b42af2178b4a1a/html5/thumbnails/44.jpg)
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 .
![Page 45: jQuery](https://reader033.vdocuments.net/reader033/viewer/2022042714/5557c557d8b42af2178b4a1a/html5/thumbnails/45.jpg)
Lets see it
![Page 46: jQuery](https://reader033.vdocuments.net/reader033/viewer/2022042714/5557c557d8b42af2178b4a1a/html5/thumbnails/46.jpg)
Interactions ▫Draggable▫Droppable▫Resizable▫Selectable▫Sortable
![Page 47: jQuery](https://reader033.vdocuments.net/reader033/viewer/2022042714/5557c557d8b42af2178b4a1a/html5/thumbnails/47.jpg)
Effects
You just have fun exploring
▫effect( effect, [options], [speed], [callback] )
▫toggle( effect, [options], [speed], [callback] )
▫Show \Hide
▫addClass, removeClass, switchClass
![Page 48: jQuery](https://reader033.vdocuments.net/reader033/viewer/2022042714/5557c557d8b42af2178b4a1a/html5/thumbnails/48.jpg)
Themes