The jQuery Library

The jQuery Library

Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company

Objectives


Objectives

• Understand what the jQuery library is and the
benefits it has for Web development


Objectives

• Learn how to use jQuery and understand how it
works


Objectives

• Learn how to use jQuery and understand how it
works
• See how to use selectors to create wrapped sets
that methods can take action on


Agenda


Agenda

• jQuery for the ASP.NET Developer


Agenda

• Using jQuery


Agenda

• Using jQuery
• Selectors, Wrapped Sets, and Chains


jQuery for the ASP.NET Developer


• JavaScript had long been a second class citizen of Web
development


development
 But is a common automation feature in browsers


development
 Lacks strong types


development
 Interpreted, when that wasn’t cool


development
 Hard to debug with poor tools


development
 Never lived up to its Java namesake


development
 Stagnating


development
 Stagnating
• But then Web 2.0 happened


development
 Stagnating
 Requires a lot of JavaScript to implement


development
 Stagnating
 Requires a lot of JavaScript to implement
 Programmer’s solution: build libraries!


jQuery Dominates


jQuery Dominates
• Simple, robust JavaScript library


jQuery Dominates
 Relative newcomer, introduced in 2006


jQuery Dominates
• What is Microsoft’s story in this space?


jQuery Dominates
 After all, produces widely-used ASP.NET for Web


jQuery Dominates
 After all, produces widely-used ASP.NET for Web
 Now supports jQuery in favor of own library


The Microsoft Ajax Library


• Initially released to support Ajax for Web forms


• Robust, relatively lightweight, general-purpose
JavaScript library


JavaScript library
• Pure JavaScript, so use anywhere


JavaScript library
• Created it for ASP.NET developers


JavaScript library
 Feels and acts like the .NET Framework


JavaScript library
 Similar to writing C# or VB code


JavaScript library
 Adds an object-oriented nature to JavaScript code


JavaScript library
• Minimized version is only 98KB


JavaScript library
• Minimized version is only 98KB
 Debug version is 304KB, but isn’t for production

Ajax Library Components


• Three files:


• Three files:
 MicrosoftAjax.js


• Three files:
 MicrosoftMvcAjax.js


• Three files:
 MicrosoftMvcValidation.js


• Three files:
• Supports client-side controls in the Ajax Control
Toolkit


• Three files:
Toolkit
• Everything changed in late 2010


• Three files:
Toolkit
 Embracing jQuery in favor of Ajax Library


• Three files:
Toolkit
 Now available only as part of the Ajax Control Toolkit


• Three files:
Toolkit
 Now available only as part of the Ajax Control Toolkit
• The Age of jQuery has begun!

The jQuery Library
• 3rd party, open source library by John Resig


The jQuery Library
• Core library is lightweight


The jQuery Library
 Only 83KB in the minified version


The jQuery Library
 Stays focused on core features


The jQuery Library
 Provides a rich plug-in model


The jQuery Library
 Non-essential features kept out of core


The jQuery Library
• In 2008, Microsoft announced it would include jQuery
with MVC


The jQuery Library
with MVC
 Going forward, would include with Visual Studio


The jQuery Library
with MVC
 Microsoft fully supports jQuery


The jQuery Library
with MVC
 Microsoft fully supports jQuery
 MVC 2 and 3, and other project types, include jQuery

Benefits of jQuery


Benefits of jQuery
• Makes using the DOM extremely easy


Benefits of jQuery
• Benefits:


Benefits of jQuery
• Benefits:
 Lean and mean


Benefits of jQuery
• Benefits:
 Lean and mean
 Handles cross-browser issues


Benefits of jQuery
• Benefits:
 Lean and mean
 Simple, clean, powerful syntax


Benefits of jQuery
• Benefits:
 Lean and mean
 Highly extensible


Benefits of jQuery
• Benefits:
 Lean and mean
 Supports unobtrusive JavaScript


Benefits of jQuery
• Benefits:
 Lean and mean
 Includes many utility functions


Benefits of jQuery
• Benefits:
 Lean and mean
 Widely used


Benefits of jQuery
• Benefits:
 Lean and mean
 Widely used
• Makes for a strong contender as a library

Which Version?


Which Version?
• Course is based on jQuery version 1.5


Which Version?
 Good chance that new versions are available


Which Version?
 Monthly minor releases (e.g., 1.5.1)


Which Version?
 Annual major release (e.g., 1.5)


Which Version?
• Visual Studio 2010 includes version 1.4.1


Which Version?
• Availability of vsdoc file lags jQuery release


Which Version?
• Damian Edwards’ vsdoc File Generator utility


Which Version?
 Blog is at https://damianedwards.wordpress.com


Which Version?
 Grab latest version there


Which Version?
 Grab latest version there
 Or use the utility to build your own


Progressive Enhancement


• Problem: older browsers don’t support JavaScript


 And other users can turn it off


• Page must work in a minimal fashion for all


• Historically, two options:


 Graceful degradation


 Progressive enhancement


• Key assumption of graceful degradation flawed


• Key assumption of graceful degradation flawed
• Unless have control over browsers, always
design with progressive enhancement


Delivering jQuery to the Browser


• Can always download latest version for
development at jquery.com


• Include in Web pages using <script> element


 Implemented as regular .js file


 <script
src="/Scripts/jquery-1.5.min.js"
type="text/javascript"></script>


 <script
src="/Scripts/jquery-1.5.min.js"
type="text/javascript"></script>
• But where do you host it?


Hosted On Your Site


Hosted On Your Site
• When you use a relative path, jQuery file has to
be in that location…of course!


Hosted On Your Site
• Drawbacks


Hosted On Your Site
• Drawbacks
 You must provide bandwidth


Hosted On Your Site
• Drawbacks
 Browser caches the file but only for your site


Hosted On Your Site
• Drawbacks
 Browser caches the file but only for your site
 May be significant network latency


Use a Content Delivery Network


• Geographically distributed set of servers that
host and deliver content


• Biggest are Google and Microsoft


• Benefits


• Benefits
 CDN provides the bandwidth


• Benefits
 Browser can cache files for use across sites


• Benefits
 CDN is geographically dispersed, to reduce latency


• Benefits
 Take advantage of CDN’s network


• Benefits
 Take advantage of CDN’s network
• Both CDNs host latest and some prior versions


Using a CDN


Using a CDN
• Microsoft


Using a CDN
• Microsoft
 <script src="http://ajax.aspnetcdn.com/ajax/
jQuery/jquery-1.5.min.js" type="text/
javascript"></script>


Using a CDN
• Microsoft

• Google


Using a CDN
• Microsoft

• Google
 <script src="https://ajax.googleapis.com/ajax/
libs/ jquery/1.5.0/jquery.min.js" type="text/


Using a CDN
• Microsoft

• Google
 Also can use a google.load() call


Using a CDN
• Microsoft

• Google
• Files hosted differ


Using a CDN
• Microsoft

• Google
• Files hosted differ
• Don’t always immediately upload latest version


Compressed and Uncompressed


• Two versions of the core library are available


 Can also download earlier versions


 Development version with comments and whitespace


 Development version with comments and whitespace
 Production version that is minified


Agenda


Agenda
• Using jQuery


Agenda
• Using jQuery
• Selectors, Wrapped Sets, and Chains


Using jQuery


Using jQuery
• If you know basics of JavaScript, learning basic
jQuery is easy


Using jQuery
• If you know basics of JavaScript, learning basic
jQuery is easy
• Start by looking at a couple of simple examples


A jQuery Statement


A jQuery Statement

jQuery('p').text('jQuery is cool!');


A jQuery Statement


jQuery
function

• jQuery is entrée to the library


A jQuery Statement


jQuery Selector
function

• Selector selects one or more elements


A jQuery Statement


jQuery Selector Method
function

• Method is a JavaScript function that takes action


A jQuery Statement


jQuery Selector Method Parameter(s)
function

• Method is a JavaScript function that takes action
• Optional parameters


The jQuery Function


The jQuery Function
• Start all jQuery statements with this


The jQuery Function
• Sort of a namespace


The jQuery Function
 Almost eliminates chance of naming conflicts


The jQuery Function
 Sometimes called the jQuery Namespace


The jQuery Function
• Could create your own custom jQuery function


The jQuery Function
• Typically used a lot in a page


The jQuery Function
 Alias: $


The jQuery Function
 Alias: $
• Equivalent statements:


The jQuery Function
 Alias: $
• Equivalent statements:
 jQuery('p').text('jQuery is cool!');
$('p').text('jQuery is cool!');

Waiting for the Page to Load


• Samples have shown script blocks that wire up
events and change content


 Placed at the end of the Web page


 DOM had to already be loaded


 Otherwise get null references or errors


• Ideally, put all code in head section under
separation of functionality principle


• Ideally, put all code in head section under
separation of functionality principle
 But then runs before DOM is loaded


Selectors, Wrapped Sets, and Chains



• jQuery lets you build powerful statements



• Selects elements, take action



• Now it’s time to explore how jQuery does this



• Now it’s time to explore how jQuery does this
• jQuery Selector Test Page


Using jQuery Selectors


• Selector is a string that identifies elements to
match


match
 Add to wrapped set


match
• Sometimes simple, like all images on the page


match
• Sometimes complex, based on content and
structure of the page


match
• Selector syntax is based on CSS 3


match
 Subset and superset


match
 Subset and superset
 Doesn’t depend on browser’s support for CSS 3


Simple Selectors


Simple Selectors
• Easiest way to define a selector is to use the
HTML element name


Simple Selectors
HTML element name
 img, tr, a, input, etc.


Simple Selectors
HTML element name
 img, tr, a, input, etc.
 Selects all elements of that type


Attribute Value Selectors


Selector Description
Attribute Value Selectors
elem[attr |= value] The attribute value is either equal to the specified
value or starts with that value followed by a
hypen. This is referred to as a prefix selector.
elem[attr *= value] The attribute value contains the specified value.

elem[attr ~= value] The attribute value contains the specified value as
a word delimited by spaces. In other words, The
selector matches if the specified value is exactly
elem[attr $= value] equal to any of the ends withthe attribute value.
The attribute value words in the specified value.
This is referred to as a word selector.

elem[attr != value] The element either doesn’t have the specified
attribute or the attribute value doesn’t match the
specified value.
elem[attr ^= value] The attribute value begins with the specified
value.

jQuery Filters


jQuery Filters
• So far, techniques are too blunt a tool


jQuery Filters
 e.g., no easy way to select alternating rows in a table


jQuery Filters
• Need a filter


jQuery Filters
• Need a filter
 Takes selected elements and filters them down further


jQuery Filters
• Need a filter
 Takes selected elements and filters them down further
 Based on criteria you select


Other Filters


Other Filters
• Filters provide power and finesse!


Other Filters
• There’s more:


Other Filters
• There’s more:
 Content filters


Other Filters
• There’s more:
 Content filters
 Visibility filters


Other Filters
• There’s more:
 Content filters
 Hierarchy filters


Other Filters
• There’s more:
 Content filters
 Child filters


Other Filters
• There’s more:
 Content filters
 Child filters
• nth-child filter is an anomaly: one-based


Wrapped Sets and Chaining


• Selectors produce wrapped sets


 Wrapper methods can perform actions


 No need to write tedious looping code


 Wrapper methods do that internally for you


• Two wrapper methods


 $('img, input[type = 'text']',
'#sampleHTML').addClass('wrappedSet');



• Methods to manage the wrapped set



• Methods to manage the wrapped set
 var wrappedSet = $(selector,
$('#elementCount').html(wrappedSet.length);


Learn More!


Learn More!
• This is an excerpt from a larger course. Visit
www.learnnowonline.com for the full details!


The jQuery Library

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Similar a The jQuery Library

Similar a The jQuery Library (20)

Más de LearnNowOnline

Más de LearnNowOnline (20)

Último

Último (20)

The jQuery Library

Notas del editor