13. jquery see the official documentation at //learn.jquery.com/ see the terse api documentation at...
TRANSCRIPT
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
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>
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
$(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 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
$(document).ready(function() {
$('div.mid').addClass('highlight');});
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/
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/jquery-1.11.3.js"></script>
<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/jquery-1.11.3.js"></script>
<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