Intro to jQuery

Slides: http://www.teaching-materials.org/jquery/

Review:

DOM & Data!

Our favorite Data Types

						var myString = "This is a string!";
var myInteger = 1;
var myBoolean = true;
var myArray = ["string", 1, myVar, true];
var myObject = {
  name: "Pamela",
  adjective: "Cool",
  roles: ["hacker", "teacher", "coder"]
}
					

Traversing the DOM with JavaScript

						document.getElementById('presentation');
document.getElementsByClassName('slide');
document.getElementsByTagName('body');
document.querySelectorAll('a');
document.querySelector('img');
					

What's a library?

A collection of reusable methods for a particular purpose.

A math library might have functions like:

						math.sum(array);
math.pow(num, num);
math.factorial(num);
					

What's a library?

Include a script tag to the library on your page.

Call functions from that library

						<body>
  <script src="http://imagine-it.org/math.js"></script>
  <script>
    var answer = math.sum(2, 2);
    alert(answer);
  </script>
</body>
					

Exercise Time!

jQuery:

the most popular library

Write less code for common tasks.

Abstract on top of cross-browser differences.

Open source, big community

jQuery: Why?

No library:

						var elems = document.getElementsByTagName("img");
for (var i = 0; i< elems.length; i++) {
	elems[i].style.display = "none";
}
					

jQuery:

						$('img').hide();
					

jQuery: Why?

No library:

						var p = document.createElement('p');
p.appendChild(document.createTextNode('Welcome!'));
p.style.cssFloat = 'left';
p.style.backgroundColor = 'red';
p.className = 'special';
document.querySelector('div.header').appendChild(p);
					

jQuery:

						var newP = $('

Welcome!

'); newP.css({'float': 'left', 'background-color': 'red'}); newP.addClass('special'); $('div.header').append(newP);

jQuery:

The Basics

						<p>Welcome to jQuery!</p>
					

						$('p').addClass('special');
					

						<p class="special">Welcome to jQuery!</p>
					

jQuery Recipe:

Select, Manipulate, Admire

Step 1: Select element

						$('p')
					

Step 2: Use a jQuery method to manipulate

						$('p').addClass('special');
					

Step 3: Admire your results!

									$('p').addClass('special');
								
$ ('p') addClass('special')

The global jQuery function. Can also be “jQuery”.

Finds DOM element(s) according to what’s in the quotes. Returns a “jQuery collection.”

Built-in jQuery method that adds the specified class to the collection.
Read the docs here.

jQuery:

Finding Elements

All CSS selectors are valid, plus more. Read the docs.

With this HTML: We find it this way:
<p>Welcome!</p>
$('p')
<div id="main">Welcome!</div>
$('#main')
<p class="intro">Welcome!</p>
$('.intro')
<div id="main">
  <p class="intro">Welcome!</p>
</div>
$('#main .intro')

Exercise Time!

jQuery:

Reading Elements

If we start with this HTML...

<a id="yahoo" href="http://www.yahoo.com" style="font-size:20px;">Yahoo!</a>

We can find it...

$('a#yahoo');

We can store it...

var myLink = $('a#yahoo');

...And we can find out lots of things about it:

myLink.html();
'Yahoo!'
myLink.attr('href');
'http://www.yahoo.com'
myLink.css('font-size');
'20px'

jQuery:

Changing Elements

If we start with this HTML:

<a href="http://www.google.com">Google</a>

We can use this jQuery:

$('a').html('Yahoo!');
$('a').attr('href', 'http://www.yahoo.com');
$('a').css({'color': 'purple'});

And we'll get this:

<a href="http://www.yahoo.com" style="color:purple">Yahoo</a>

jQuery Recipe:

Create, Manipulate & Inject

Step 1: Create element and store a reference

var p = $('<p>')

Step 2: Use a method to manipulate (optional)

p.addClass('special');

Step 3: Inject into your HTML

$('body').append(p);

jQuery:

Create and Store

Pass in any HTML string and jQuery will create it and return it as a collection.

With this jQuery... We create this HTML:
$('<p>');
<p></p>
$('<p>Welcome!</p>');
<p>Welcome!</p>
$('<p class="intro">Welcome!</p>');
<p class="intro">Welcome!</p>

Just like with the DOM API, we can store a reference to our new element in memory...

var myParagraph = $('<p class="intro">Welcome!</p>');

jQuery:

Manipulate

Now that we've stored a reference, we can make further revisions to our element.

var myParagraph = $('<p class="intro">Welcome!</p>');
myParagraph.css('font-size','4em');

jQuery:

Inject

Now, we can take our stored reference to myParagraph and inject it somewhere!

$('body').append(myParagraph);
$('body').prepend(myParagraph);

Regular DOM nodes to jQuery objects

var paragraphs = $('p'); // an array
var myParagraph = paragraphs[0]; // a regular DOM node
var $myParagraph = $(paragraphs[0]); // a jQuery Object

We can also loop through our array...

for(var i = 0; i < paragraphs.length; i++) {
  var element = paragraphs[i];
  var paragraph = $(element);
  paragraph.html(paragraph.html() + ' wowee!!!!');
};

jQuery:

Including

Download or link from an official CDN.

Then include using a <script> tag on the page.

<html>
<body>
  <h1>Hi!</h1>
  <script src="jquery.min.js"></script>
  <script>
  // Your code here
  </script>
</body>
</html>

Exercise Time!