CS 328 - Week 15 Lecture 1 - 2016-05-02
a few words about jQUery
* jQuery is a JavaScript LIBRARY
* a useful collection of JavaScript "things"!
* Wikipedia - "jQuery a cross-platform JavaScript library
designed to simplify the client-side scripting
of HTML"
* free and open source, licensed under the MIT
license
* there's a jQuery *foundation* -
https://jquery.org
...looks like it is a COLLECTION of *projects*, now
* original author: John Resig
* started as an "inkling" in 2005, first version
released in 2006
* note that there are MANY JavaScrpt libraries --
many client-side, many server-side as well --
* on the client-side, these extend JavaScript
to (typically) more easily
* ..."walk" the DOM
* ...respond to events
* ...handle browser incompatibilities
* there's also a jQuery Learning Center:
learn.jquery.com
* How do you reference jQuery?
...just like any other external JavaScript:
<script src="whatever.js" type="text/javascript"
defer="defer">
</script>
* from "About jQuery" tutorial at learn.jquery.com:
* the library's name is jquery.js
* this tutorial recommmend downloading a copy
and putting it in the same directory as
your files
* http://jquery.com/download
* use the uncompressed for development/debugging,
and the compressed for production
* notice that a JavaScript *you* write using jQuery
library things will depend on jquery.js, of course --
SO it will need jquery.js loaded first;
...it will need to be in an external JavaScript,
then, if you'd like to use defer="defer" to make
sure of this
<script src="jquery.js" type="text/javascript"
defer="defer">
</script>
<script src="jquery-play.js" type="text/javascript"
defer="defer">
* once you have some version of jquery.js --
what can you do with it?
* 1 example: additional functions, methods,
other goodies for your use;
JavaScript provides a typeof operator,
for PRIMITIVE types
var myValue = [1, 2, 3];
typeof myValue === "string" // false
typeof myValue === "number" // false
jQuery has some improved methods for
checking for non-primitive types:
jQuery.isFunction(myValue) // false
jQuery.isPlainObject(myValue) // false
jQuery.isArray(myValue) // true
* BUT there's more than just these;
...jQuery OBJECTS get used a lot more;
* jQuery objects tend to follow a certain style,
have certain methods, etc,
AND they also tend to represent objects also
represented in "plain" JavaScript,
********************************
SO: IMPORTANT jQuery STYLE GUIDELINE:
...if a JavaScript variable refers to a
jQuery object, START its name with a $
(like in PHP...)
(corollary: avoid starting a variable with
a $ if it DOES reference a "plain" JavaScript
object!)
*********************************
==========
* NEXT big idea:
You can put a variety of things within (such as a string
representing an HTML element in the DOM, but also
others) in:
$( )
... and this expression is something of a
"function in disguise" [codeCademy];
a function call whose result is a
jQuery object
* ONE thing that $() can accept as an argument
is a JavaScript DOM object;
and it returns the jQuery version of that JavaScript
DOM object
$(document)
... this returns a jQuery object version of the
JavaScript document object
$(document).ready( ... )
...this is calling that jQuery object version's
ready method
* let's talk about this particular method,
because it is a popular alternative
to JavaScript's window.onload
* this is NOT quite the same;
jQuery has a ready event for its $(document) object
...the ready event occurs as soon as the document
is ready to be manipulated, even if, say, all
images are not yet downloaded
...MIGHT be some better performance possibility here,
then;
$(document).ready(
function()
{
// code to be done when document is ready
// to be manipulated
});
* now, you can also give $( ) a double-quoted string representing
an element,
and it will return a jQuery object corresponding to
all of that kind of element in the document
$("p") - returns a jQuery object corresponding
to all of the paragraph elements in my document
$("li") - ... all the list item elements
* and the jQuery library sets these objects up
to have hopefully-more-convenient methods
and properties for working with these
$(document).ready(
function()
{
// this adds a onclick attribute to all
// the a elements in the document
$("a").click(
function(event)
{
alert("Thanks for visiting!");
});
});
$(document).ready(
function()
{
// this adds a onclick attribute to all
// the a elements in the document
$("a").click(
function(event)
{
var response = confirm("Do you REALLY want to go"
+ " THERE????");
if (!response)
{
// prevents the default behavior
// of most events
event.preventDefault();
}
});
});
* jQuery's versions element objects
have addClass and removeClass methods
$(element_str).addClass("desiredClassName");
$(element_str).removeClass("desiredClassName");
* callback -
a callback is a function that is passed
as an argument to another function
that is executed AFTER its parent function has completed
* special because they WAIT to executed until
their parent finishes
* MEANWHILE, the browser can be executing other
functions, doing other useful work
$.get("myhtmlpage.html",
function()
{
// callback can't have arguments,
// BUT it might CALL something
// with desired arguments...
myNotQuiteCallBackWithParams( arg1, arg2 );
});
* syntax for making a jQuery object corresponding
to an element(s) with a particular id or class
value --
uses CSS-like notation!
$("#desiredID") - creates a jQuery object for THE
element with id="desiredID"
$(".desiredClass") - creates a jQuery object for
the element(s) with class="desiredClass"