JQuery

$('dollaBills').html('yo');

Objectives

• Define the term "Library" as it relates to software
• Use JQuery to:
  • Select and manipulate DOM elements
  • Add elements to the DOM
  • Add event listeners

Libraries

Libraries are a collection of pre-written code that can perform common functions.

For example there is a built in library in JavaScript called Math.

Math.random();   // some random number from 0-1
Math.floor(5.5); // 5
Math.ceil(5.5);  // 6

JQuery is a library

It helps you write less code to achieve more

var element = document.getElementById('someId');
var elementList = document.getElementsByClassName('className');

element.addEventListener('click', callbackFunction);
element.style.marginTop = '5px';

Vanilla JS

var element = $('#someId');
var elementList = $('.className');

element.click(callbackFunction);
element.css('marginTop', '5px');

JQuery

JQuery Syntax

var element = $('#someId');

$ is a variable -- it points to an object

'#someId' is a "selector" it behaves just like CSS selectors
 

element.css('marginTop', '5px');

element is a special JQuery HTML object, which is why it has the .css function.

Mix 'n Match Allowed

Use a vanilla selector, but get JQuery functions!

var element = document.getElementById('#someId');

console.log(element.css); // undefined

// The next two console.logs will be 'Function'

console.log($(element).css); // temporary JQuery object

element = $(element); // Save element as a JQuery object

console.log(element.css); 

JQuery Recipe

<div id="someId"></div>

// Select the element
var element = $('#someId');

// Manipulate the element
element.addClass("special");

<div id="someId" class="special"></div>

:)

Save, Manipulate, :)

JQuery Recipe

<div id="someId"></div>

// Select the element
var element = $('#someId');
var newElement = $('<p>');

// Manipulate the element
newElement.addClass("megaSpecial");
newElement.html("aawwww yeah dawg");
element.append(newElement);

<div id="someId">
    <p class="megaSpecial">aawwww yeah dawg</p>
</div>

:)

Create, Manipulate, Inject, :)

JQuery Recipe

<div id="someId"></div>

// Select the element
var element = $('#someId');
element.on('click', clickCallback);
element.on('mouseenter', mouseEnterCallback);
element.on('hover', hoverCallback);

:)

Events

Objectives Review

• Define the term "Library" as it relates to software?
• Use JQuery to:
  • Select and manipulate DOM elements?
  • Add elements to the DOM?
  • Add event listeners?

Can we...

Questions?