13. jquery see the official documentation at //learn.jquery.com/ see the terse api documentation at...

13. jQuery See the official documentation at http://learn.jquery.com/

See the terse API documentation at 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

http://learn.jquery.com/

http://api.jquery.com/

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

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

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

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

Downloading jQuery The official jQuery website, http://jquery.com/, has the most up-to-date stable

version: jquery-2.1.4.js

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.,

<script src="http://code.jquery.com/jquery-1.11.3.js"></script>

http://jquery.com/

http://code.jquery.com/

Getting Started with jQueryExample

File jq1.html

<html><head> <meta charset="utf-8" />

<title>jQuery</title>

<link rel="stylesheet" href="jq1.css" type="text/css" />

<script type="text/JavaScript" src="http://code.jquery.com/jquery-1.11.3.js "></script>

<script type="text/JavaScript" src="jq1.js"></script></head><body> <div class="intro"> 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. </div>

jQuery CDN file

Reference my script AFTER the distribution file

Continued

<div class="mid"> 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. </div> <div class="mid"> 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. </div> <div class="end"> 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. <div></body></html>

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;}

Rendering

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

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



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 divs

No need to program iteration: jQuery uses implicit iteration

If we insert the 2nd 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

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');}

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



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/

Include the following in the HTML head

<link rel="stylesheet" href= "http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">


<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

Put your own JavaScript or reference to your JavaScript file after this

Ditto for your CSS

Datepicker Widgets Datepicker widgets display a clickable calendar to select dates

Create with the datepicker( ) function

Connect it to the <div> 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

<html><head> <title>Using a datepicker</title>

<link rel="stylesheet"

href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">


<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

<script type="text/javascript">

$(document).ready(function(){

$("#datepicker").datepicker({

onSelect: function($dateText, inst) {

$("#result").text("You selected " + $dateText)}

});

});

</script>

</head>

Continued

<body style="font-size:65%;">

<h1>Using a datepicker</h1>

<div type="text" id="datepicker"></div>

<div style="font-size:100%;" id="result"></div>

</body></html>

Initial rendering

Done in 11/2/2014

Current date highlighted

After the arrow was clicked to advance to Dec.

Selected Dec. 25

13. jquery see the official documentation at //learn.jquery.com/ see the terse api documentation at...

Documents