Intro to jquery
CSIT570 (11/14/2013)
This is what we know
JavaScript
- functions
- objects
- events and handlers
- http requests (ajax)
CSS
- properties
- selectors
- changing it with JavaScript
XML & JSON
Today we will learn
what is jquery?
It's a JavaScript library
Javascript libraries
Pre-written JavaScript
with the purpose of making JavaScript
development easier
eg. jQuery, Prototype, Mootools, Zepto, and more
why jquery?
- Easy to get started
-
Market share
-
Community
-
Because I said so
Getting Started
wait for the document
In JavaScript:
document.onload = function(){
/* code to run once document is loaded
jQuery library will not work in here */
};
In jQuery:
$(document).ready(function(){
/* code to load once document is loaded
jQuery library *will* work here */
});
Let's examine this code
jQuery(document).ready( function(){
/* some code */
} );
jQuery = the jQuery function the library provides
document = the document object, like in JavaScript
.ready() = event listener for when an object is loaded
function(){} = the function to run when the event is detected
some shorthand
jQuery(document)
==
$(document)
some shorthand
$(document).ready()
==
$()
This is an anonymous function:
declared at runtime, does not have a name
like squares and rectangles
all jQuery is JavaScript!
not all JavaScript is jQuery!
Non-jQuery JavaScript (which we'll call JavaScript)
will work in
$(document).ready();
jQuery (which we'll just call jQuery)
will *not* work in
document.onload
Let's add some jquery
to our page!
our code
<script type="text/javascript" src="jquery.js"></script> <script type="text/javascript">
$(document).ready(function(){
// print "jquery is loaded" into the console
console.log("jquery is loaded"); }); </script>
Add some HTML to the page body
<body>
<ul> <li>First item</li> <li class="important">Important item</li> <li>Third item</li> </ul>
</body>
Let's get our list
-
JavaScript
-
jQuery syntax
Let's get our list
JavaScript
var list = document.getElementsByTagName('ul')[0];
jQuery Syntax
var list = $('ul').eq(0);
jQuery Objects
$('ul') will return any unordered lists on the page
(in our case, there is one)
$('ol') will return any ordered lists on the page
(in our case there is none)
Even if there are no <ol> on our page, $('ol') still exists as an empty object
TO THE CONSOLE!
DETECTING IF AN OBJECT EXISTS
if ( $('ol').length ) {
// this will only execute if there is an <ol> on our page
}
dom --> jquery
You cannot call jQuery functions on raw DOM elements
var list = document.getElementsByTagName('ul');
list.html(); // WILL NOT WORK!
dom --> jquery
You can convert raw DOM elements into jQuery objects
var list = document.getElementsByTagName('ul');
list.html(); // WILL NOT WORK!
$( list ).html(); // THIS WILL WORK!
And you can create new elements with jQuery
$('<li>') // empty list item
$('<li>A new item</li>') // list item with content
$('<li class="new">A new item</li>'); // list item with content and class
in-class assignment
We're going to dive into a bunch of jQuery functions
Create an HTML document with
-
a header tag as a title
-
an unordered list with 5 list items
-
3 paragraphs, each with a different class
-
3 links, can be within paragraphs or list items
Go to these slides (https://slid.es/jennschiffer/intro-to-jquery/) and use the functions listed over the next few slides and document in your code what the functions do
Example
Use http://api.jquery.com/ for documentation and help
// eq(n) reduces the set of elements to the one specified index n
var firstListItem = $('li').eq(1);
some jquery functions (1)
.eq()
.is()
.is()
.has()
.not()
.html() and .html(argument)
.text() and .text(argument)
.each()
.append()
.prepend()
.attr()
Some jquery functions (2)
.first()
.last()
.siblings()
.parent()
.next()
.find()
.closest()
.append()
.prepend()
.addClass()
.toggleClass()
IN-CLASS ASSIGNMENT COMPLETE!
NOW YOU KNOW THE BASICS,
LET'S DO SOME COOL STUFF
-
CSS
- Events
.css()
This function let's us change the style of an object
$(selector).css(property,value);
eg.
$('li').css('background-color','#00f');
Chaining
$('li').css('background-color','#00f').css('color','#fff');
==
$('li').css({
'background-color' : '#00f',
'color' : '#fff'
});
in-class assignment
Take the following CSS and turn it into jQuery
body { margin: 20px auto; font-family: Helvetica; font-size: 16px; }
h1 { color: #333; font-family: 'Comic Sans MS'; font-size: 2em; }
p { margin: 5px 0; line-height: 1.5em; }
a { color: #9cc; text-decoration: none; }
ul { margin: 0; padding: 0; list-item-type: disc; }
li { padding: 3px 10px; background-color: #c99; }
img { width: 50%; border: 1px solid #f0f; }
#most-important { color: #f00; font-weight: bold; text-decoration: underline; }
.alerts { color: #0f0; font-style: italic; background-color: #efefef; }
Events
.click()
.mouseover()
.mouseout()
.hover()
click
$('li').click(function(){
// print 'click' to the console console.log('click'); });
mouse over & out
$('li').mouseover(function(){ console.log('mouseover'); }); $('li').mouseout(function(){
console.log('mouseout');
});
Hover - a combo of mouse over and out
$('li').hover(
function(){ console.log('hover on); },
function(){
console.log('hover off');
} );
in-class assignment
Add hover and click events to the list items in your previous exercise:
on hover on: change background color
on hover off: revert background color
on click: print the list item's text to the console
on hover off: revert background color
on click: print the list item's text to the console
Intro to jquery
By Jenn Schiffer
Intro to jquery
- 2,630