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?
Jquery Intro
By Tyler Bettilyon
Jquery Intro
- 1,643