WTH is jQuery?

Before we can learn wth jQuery is, lets learn why we use it.

#jQuery makes it easy to:

find // elements in an HTML document
change // html content
listen // to the actions of a user + then react appropriately
animate // content on pages
talk // across a network in order to pull in content

#"DOM" not "NOM" ##aka the Document Object Model ##aka the Document Object Model ##aka the Document Object Model

how does jQuery does these things you ask?

A long long time ago in a land far far away the BIG DOM happened and a whole new universe was created.

The DOM is like the tree of life. It creates everything you see on the web.

The DOM loads all of your code --HTML + CSS + JS + JQUERY + ETC-- in the browser. The DOM is just like a tree. The trunk of the tree is the doctype. The branches of that tree is made of HTML.The leaves on the branches is made of CSS. And the flowers & fruit that bloom from the flowers is Javascript or jQuery.

Once rendered, HTML elemenets become "branches" or more commonly called "nodes". These "nodes" have relationships with each other similar to how branches on a tree are interconnected.

Nodes come in two forms. Elements and text.

#Ok dude so like what happens when we interact with the DOM?

First we must understand what an interaction on the web really looks like. A user coming to your website is a lot like your neighbor walking across the street, knocking on your door and asking if they can have a cup of sugar. Walking across the street is like opening up a broswer. Knocking on the door is navigating to a website. And asking for sugar is the interaction that takes place where the user is at.

Your house is just like a web server. Your street address is just like a web url. It's where your "neighbor" aka user navigates to find you. On the web, this is known as requesting a webpage. When you answer the proverbial door, you are sending the HTML + other files needed to load your webpage. The door is the DOM. Every "home" aka web browser has a different front door / DOM interface. When someone knocks do you answer the door naked? No! You wear clothes. Well the HTML loading into a web broswer is a lot like a naked person answering the door. JavaScript -your proverbial clothes- is what interacts with the DOM. Not every neighbor will like what clothes you are wearing because they are judgmental. Which is where jQuery comes in. jQuery is the friendly neighbor who is liked by all. Almost every Web Broswer will let jQuery walk through their "door" aka interact with their unique DOM.

#How jQuery accessses the DOM

jQuery(document); --document === the DOM

how do we search through the dom? we use CSS selectors

h2 { color: orange; } p {font-size: 10,000em; }

we then use the jQuery function to find "nodes" or "branches"

jQuery("h2"); jQuery("p");

writing the word jQuery sucks. lets use the commmon syntax. jQuery === $

$("h2"); $("p");

we are telling jQuery to find these elements. now how can we modify the "H2" we just found.

we select the HTML element (aka "body", "title", "section", "div", "p", etc.). that looks like $("h2");

just like in a game of tag, we have to tag the "H2" or an elements text so we change who is it that looks like $("h2").text(); note: text() is a jquery method for tagging text!

html

head

title

body

"text"

"time for change"

ok so now that we have selected the H2 + the "text", how do we change the text "NO WAY"?

$("h2").text("NO WAY");

voila

###Troubleshooting

javascript may execute before the DOM loads. to mitigate this we make the DOM listen for the "I'm ready" command. that looks like: //this code will only run once the DOM is "ready" jQuery(document).ready(function(){ $("h2").text("NO WAY"); });

###Search for elements by ID or class

CSS | V | jQuery a {...} | | $('a'); #main{..} | | $('#container'); .class | | $('.class');

###Changing multiple elements at once select by class or id

$('.class'); $('#main');

#Searching the DOM

in order to select descendants use the descendant selector

$('#main li'); parent(#main) + space matters + descendant(li)

if you want to select only direct children $('#main > li'); parent(#main) + sign matters + child(li)

#Appending the DOM

how do we create a node so it isn't added to the dom?

$(document).ready(function() { //creat makeNode with a

node inside });

var makeNode = "make it happen";
FALSE var makeNode = "

make it happen

";
FALSE var makeNode = $('

make it happen

');
TRUE

ways to add makeNode to the DOM:

.append() //adds price to the bottom of.vacation

.prepend() //adds price to the top of.vacation

.after() //will put the price variable after .vacation

.before() //will put the price variable before .vacation

$('').remove() //will remove element from the DOM

lets learn how we can ask jQuery to target all buttons on a website, watch to see if users click the button, and if they click we will run a function:

$('button').on('click', function() { //runs when any button is clicked });

trub/WTH is jQuery.md