GDI Logo

Intro to jQuery

Welcome!

Girl Develop It is here to provide affordable and accessible programs to learn software through mentorship and hands-on instruction.

Welcome!

Some "Rules"

  • We are here for you!
  • Every question is important.
  • Help each other.
  • Have fun.

Welcome!

Tell us about yourself

  • Who are you?
  • What do you hope to get out of the class?

In this class…

Topics we will cover

  • What is jQuery?
  • What is a JavaScript scripting library?
  • Find, create, manipulate, and read page elements.

But first…

Review DOM and 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 = $('<p>Welcome!</p>');
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!

jQuery: The Basics

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

The global jQuery function.
Can also be "jQuery".

 
('p')

Finds DOM element(s) according to what's in the quotes.
Returns a "jQuery collection."

 
addClass('special')

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="https://code.jquery.com/jquery-1.12.0.min.js"></script>
  <script>
  // Your code here
  </script>
</body>
</html>

Exercise Time!

The End

Thanks!

Slides available at http://danlucas.org/intro-to-jquery/ Github: https://github.com/danlucas/intro-to-jquery