1. 13. jQuery See the official documentation at http://learn.jquery.com/http://learn.jquery.com/  See the terse API documentation at http://api.jquery.com/http://api.jquery.com/ The jQuery library provides a general-purpose layer for common web scripting Not just for dynamic effects  Often save time and space using jQuery code to build the HTML that's initially rendered  Organized more rationally and easier to maintain than pure HTML

2. Main Tasks Done by jQuery Access Elements in a Document  jQuery has a robust and efficient selector mechanism Modify the Appearance of a Web Page  Not all browser support the same CSS standards; jQuery handles this  jQuery can change classes and style properties dynamically Alter the Content of a Document  jQuery can modify the content of a document with succinct code

3. Respond to a User’s Interaction  The event-handling API is elegant and removes browser inconsistencies Animate Changes Being Made to a Document  jQury facilitates visual feedback with a battery of effects as well as a toolkit for crafting new effects Retrieve Info from a Server Without Refreshing a Page  jQuery removes the browser-specific complexity from Ajax Simplify Common JavaScript Tasks  jQuery provides enhancements to basic JavaScript constructs such as iteration and array manipulation

4. Why jQuery Works Well To maintain a wide range of features while remaining relatively compact, jQuery uses several strategies Leverage Knowledge of CSS The mechanism for locating page elements is based on CSS selectors Support Extensions Special-case uses are relegated to plugins Abstract Away Browser Quirks jQuery adds an abstraction layer, standardizing the common tasks

5. Always Work with Sets Implicit iteration eliminates the need for explicit iteration Allow Multiple Actions in One Line jQuery uses chaining for most of its methods  The result returned by a typical operation on an object is the object itself, ready for the next action to be applied

6. Downloading jQuery The official jQuery website, http://jquery.com/, has the most up-to-date stable version: jquery-2.1.4.jshttp://jquery.com/ To provide faster, cleaner support for modern browsers, Versions 2.x no longer support old versions of IE (6, 7, 8)  These versions are important, so the 1.x Versions (currently jquery- 1.11.3.js ) are actively maintained For each.js file, there’s a “minified”.min.js file  All unnecessary characters removed so is smaller A content delivery network or content distribution network (CDN) is a large distributed system of servers deployed in multiple data centers across the Internet  To use the jQuery CDN, just reference the file directly from http://code.jquery.com in the script tag—e.g., http://code.jquery.com

7. Getting Started with jQuery Example File jq1.html jQuery <script type="text/JavaScript" src="http://code.jquery.com/jquery-1.11.3.js "> jQuery is a cross-platform JavaScript library designed to simplify the client-side scripting of HTML. Used by over 60% of the 10,000 most visited websites, jQuery is the most popular JavaScript library in use today. jQuery is free, open source software, licensed under the MIT License. jQuery CDN file Reference my script AFTER the distribution file Continued

8. jQuery's syntax is designed to make it easier to navigate a document, select DOM elements, create animations, handle events, and develop Ajax applications. jQuery also provides capabilities for developers to create plug-ins on top of the JavaScript library. This enables developers to create abstractions for low-level interaction and animation, advanced effects and high-level, theme-able widgets. The modular approach to the jQuery library allows the creation of powerful dynamic web pages and web applications. The set of jQuery core features—DOM element selections, traversal and manipulation—enabled by its selector engine (named "Sizzle" from v1.3), created a new "programming style", fusing algorithms and DOM data structures. This style influenced the architecture of other JavaScript frameworks like YUI v3 and Dojo.

9. File jq1.css div.intro { background-color: #aaa; font-size: 10pt; } div.mid { font-size: 13pt; } div.end { background-color: #ccc; font-size: 10pt; }.highlight { font-style: italic; }

10. Rendering  The italics is due to file jq1.js (next slide)

11. File jq1.js $(document).ready(function() { $('div.mid').addClass('highlight'); }); The fundamental jQuery operation is selecting a part of the document Use the $() function  Takes as argument a string containing any CSS selector expression Here find all the div elements with class mid  $() returns a new jQuery object instance, the basic building block Encapsulates 0 or more DOM elements we interact with  Here we change their classes

12. $(document).ready(function() { $('div.mid').addClass('highlight'); }); Method addClass() takes 1 argument, the name of a class  Applies that class to the selected part of the page  Its counterpart is removeClass()  Here add class highlight to the selected div s  No need to program iteration: jQuery uses implicit iteration If we insert the 2 nd line in the document head, it has no effect  Must delay execution until the DOM is available The $(document).ready() construct lets us schedule function calls for firing once the DOM is loaded  Needn't wait for images to fully render Repeated

13. The argument of ready() is any reference to a function Could define a function and use its name function addHighlightClass() { $('div.mid').addClass('highlight'); } $(document).ready(addHighlightClass); I can use an expression (not a statement) to define an anonymous function function() { $('div.mid').addClass('highlight'); }

14. Can give the function a name by assigning the anonymous function to a variable  Then put that variable as the argument of ready() addHighlightClass = function() { $('div.div').addClass('highlight'); } $(document).ready(addHighlightClass); Can also put the anonymous function directly as the argument (no need for a name), giving the original version $(document).ready(function() { $('div.mid').addClass('highlight'); });

15. The jQuery UI Plugin The jQuery UI code is a comprehensive suite of related plugins Core interaction components and widgets make the web experience more like that of a desktop application Interaction components include methods to for dragging, dropping, sorting, selecting, and resizing items Widgets include buttons, accordions, datepickers, dialogs, etc. And jQuery UI provides and extensive set of advanced effects to supplement the core jQuery animations Downloads, documentation, and demos of all jQuery UI modules are available at http://jqueryui.com/ http://jqueryui.com/

16. Include the following in the HTML head <link rel="stylesheet" href= "http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> Put your own JavaScript or reference to your JavaScript file after this  Ditto for your CSS

17. Datepicker Widgets Datepicker widgets display a clickable calendar to select dates Create with the datepicker( ) function  Connect it to the element in which the datepicker widget is to appear Read the date selected by creating an event handler for the onSelect event  The handler is passed the date as a text string and an object corresponding to the datepicker widget $("#datepicker").datepicker({ onSelect: function(dateText, inst) { $("#result").text("You selected " + dateText)} }); Example—See next page

18. Using a datepicker <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> $(document).ready(function(){ $("#datepicker").datepicker({ onSelect: function($dateText, inst) { $("#result").text("You selected " + $dateText)} }); Continued

19. Using a datepicker Initial rendering Done in 11/2/2014 Current date highlighted After the arrow was clicked to advance to Dec. Selected Dec. 25