FSA 1702 – March 21, 2017
It's about interacting with the DOM tree. jQuery happens on the client-side and is executed in the browser.
We manipulate the DOM based on events and interactivity.
- Our server gets a request and sends a file back to the client.
- Our client will make any additional requests that are embedded in
<script>or<link>tags on our page.
Front-end Javascript is a file served to the browser! It does not share code with the server.
On the server side we can define what our environment is (Node.js). But we can't assume it with the client. They might have different devices, versions, and browsers. These are serious concerns.
Browsers vary in their APIs, how elements get selected, and tons of other things.
Compatibility issues make writing vanilla Javascript in the browser a nightmare!
About 10 years ago, jQuery abstracted these differences and made them into a library to overcome client side compatibility issues.
jQuery made people reevaluate how JS could be used in the browser.
jQuery is extremely Googleable, because its event handlers and the CSS-style selectors make it easy to understand and copy-and-paste.
Aside from simpler DOM traversal, we can also take actions on our DOM nodes like .css(), .hide(), .show(), .fadeOut(1000), fadeIn(1000).
.val() is a cross-browser compliant function to get values out of elements.
If you get a set of elements back in a query and then operate on it, jQuery will implicitly loop over each element and apply your operation to each one.
The '$' function can Find||Create||Cast elements.
Create
If we pass in HTML $('<h1> My HTML </h1>') <-- creates a new node.
Casting
$(this);
$(document.getElementById('jukebox'));It's useful to cast DOM Nodes into jQuery DOM nodes so that we an call jQuery's methods on them.
On our event handler, we can pass in a second parameter (our target)
$('#jukebox').on ('click', 'button', function() {
// ^ here is our target
});Be careful not to register an event multiple times, or will fire as many times as it has been registered.
jQuery is wicked good at client-side DOM selection, event handling, and managing element properties.
You may still be using jQuery in your future applications, even though modern libraries like React/Angular are surpassing it.