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

More Related Content

What's hot (20)

Similar to The jQuery Library (20)

More from LearnNowOnline (20)

Recently uploaded (20)

The jQuery Library

Editor's Notes