The jQuery Library by LearnNowOnline

The jQuery Library

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

Objectives • Understand what the jQuery library is and the benefits it has for Web development • 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 • jQuery for the ASP.NET Developer • Using jQuery • Selectors, Wrapped Sets, and Chains

jQuery for the ASP.NET Developer • JavaScript had long been a second class citizen of Web development      

But is a common automation feature in browsers Lacks strong types Interpreted, when that wasn’t cool Hard to debug with poor tools Never lived up to its Java namesake Stagnating

• But then Web 2.0 happened  Requires a lot of JavaScript to implement  Programmer’s solution: build libraries! Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company

jQuery Dominates • Simple, robust JavaScript library  Relative newcomer, introduced in 2006

• What is Microsoft’s story in this space?  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 • Pure JavaScript, so use anywhere • Created it for ASP.NET developers  Feels and acts like the .NET Framework  Similar to writing C# or VB code  Adds an object-oriented nature to JavaScript code

Ajax Library Components • Three files:  MicrosoftAjax.js  MicrosoftMvcAjax.js  MicrosoftMvcValidation.js

• Supports client-side controls in the Ajax Control Toolkit • Everything changed in late 2010  Embracing jQuery in favor of Ajax Library  Now available only as part of the Ajax Control Toolkit

The jQuery Library • 3rd party, open source library by John Resig • Core library is lightweight    

Only 83KB in the minified version Stays focused on core features Provides a rich plug-in model Non-essential features kept out of core

• In 2008, Microsoft announced it would include jQuery with MVC  Going forward, would include with Visual Studio  Microsoft fully supports jQuery  MVC 2 and 3, and other project types, include jQuery Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company

Benefits of jQuery • Makes using the DOM extremely easy • Benefits:       

Lean and mean Handles cross-browser issues Simple, clean, powerful syntax Highly extensible Supports unobtrusive JavaScript Includes many utility functions Widely used

Which Version? • Course is based on jQuery version 1.5  Good chance that new versions are available  Monthly minor releases (e.g., 1.5.1)  Annual major release (e.g., 1.5)

• Visual Studio 2010 includes version 1.4.1 • Availability of vsdoc file lags jQuery release • Damian Edwards’ vsdoc File Generator utility  Blog is at https://damianedwards.wordpress.com  Grab latest version there  Or use the utility to build your own Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company

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 • Unless have control over browsers, always design with progressive enhancement Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company

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>

• But where do you host it?

Hosted On Your Site • When you use a relative path, jQuery file has to be in that location…of course! • Drawbacks  You must provide bandwidth  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    

CDN provides the bandwidth Browser can cache files for use across sites CDN is geographically dispersed, to reduce latency Take advantage of CDN’s network

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

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

 Also can use a google.load() call

Compressed and Uncompressed Versions of jQuery

• Two versions of the core library are available  Can also download earlier versions  Development version with comments and whitespace  Production version that is minified

Agenda • jQuery for the ASP.NET Developer • Using jQuery • Selectors, Wrapped Sets, and Chains

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 jQuery('p').text('jQuery is cool!'); jQuery function

• • • •

Selector Method

Parameter(s)

jQuery is entrée to the library Selector selects one or more elements Method is a JavaScript function that takes action Optional parameters

The jQuery Function • Start all jQuery statements with this • Sort of a namespace  Almost eliminates chance of naming conflicts  Sometimes called the jQuery Namespace

• Could create your own custom jQuery function • Typically used a lot in a page  Alias: $

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  But then runs before DOM is loaded

Agenda • jQuery for the ASP.NET Developer • Using jQuery • Selectors, Wrapped Sets, and Chains

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 jQuery Selector Test Page

Using jQuery Selectors • Selector is a string that identifies elements to match  Add to wrapped set

• Sometimes simple, like all images on the page • Sometimes complex, based on content and structure of the page • Selector syntax is based on CSS 3  Subset and superset  Doesn’t depend on browser’s support for CSS 3 Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company

Simple Selectors • Easiest way to define a selector is to use the HTML element name  img, tr, a, input, etc.  Selects all elements of that type

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 equal to any of the words in the attribute value. This is referred to as a word selector. elem[attr $= value] The attribute value ends with the specified value. 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. Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company

jQuery Filters • So far, techniques are too blunt a tool  e.g., no easy way to select alternating rows in a table

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

Other Filters • Filters provide power and finesse! • There’s more:    

Content filters Visibility filters Hierarchy 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  var wrappedSet = $(selector, '#sampleHTML').addClass('wrappedSet'); $('#elementCount').html(wrappedSet.length); Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company

Learn More! â&#x20AC;˘ This is an excerpt from a larger course. Visit www.learnnowonline.com for the full details!

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