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


  1. Create a base HTML page

  2. Add the jQuery library to your site

http://jquery.com/download/




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


  1. JavaScript
  2. 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
  1. a header tag as a title
  2. an unordered list with 5 list items
  3. 3 paragraphs, each with a different class
  4. 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()
.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


  1. CSS
  2. 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

http://api.jquery.com/category/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
Made with Slides.com