Intro to jQuery

View Github Repository Open presentation in a new window

danlucas

See all presentation from danlucas

Intro to jQuery

0 0

intro-to-jquery

On Github danlucas / intro-to-jquery

Show navigation

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');
Going over types because I'll be using those terms

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);
Show wikipedia list, note how it's different from a framework

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>

jQuery: The most popular library

Write less code for common tasks.

Abstract on top of cross-browser differences.

Open source, big community

That's a lot, maybe too much!

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();
shorter, cross-browser

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);
shorter, cross-browser

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 collection is different than HTMLCollection or nodeList

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')

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'
Consider live coding from here...

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>
Intro to jQuery -- Girl Develop It --