jquery_lesson.md

#jQuery & The DOM By the end of this lesson students will be able to:

• Explain the DOM, and how we use javascript to interact with it.
• Explain what a library is and why one would get used
• Explain how jQuery syntax works
• Explain method chaining and how it differs from object dot syntax
• Select a DOM element with jQuery and explain the object that is returned
• Explain the difference between JS DOM objects and native JQ DOM objects
• List common jQuery methods and their application

What is the DOM?
The DOM stands for Document Object Model

It's the medium between the javascript we write and the browser, it's how we use javascript to do things in the browser.

The DOM is the first API you'll ever use.

How is the DOM an API?
API stands for "Application programming interface", it is the Interface between our javascript code and what is happening in the browser

This is how javascript is able to do things on web browsers is because of the dom, the dom is a part of all browsers that enables it to be able to read and process javascript.

What is jQuery? jQuery is a library that sits on top of the DOM, and allows us to write less and do more. Instead of using the raw DOM API. We could use Javascript to do out DOM manipulations, but the main problem with this is that all browsers have slightly different DOM interfaces.

What is a library?
A library in javascript is just javascript code another developer or a team of developers wrote that you can add into your web page that serves some sort of purpose.

We can import a library by downloading it, using a package manager, or a CDN and then adding it in our HTML, before the library we want to reference it.

Why reinvent the wheel? ALWAYS go out and find a solution before trying to build one yourself, this is the point of a library.

First jQuery Program
Let's change the text to say something else when we click it., but first, let's just change the text.

We wrap our code in the $(document).ready() statement so that we can make sure the DOM is loaded before our javascript code executes.

$(document).ready(function(){
    // Code goes in here.
    
});

<p>Change Me</p>
<button class="button">Change Text</button>

Event Handlers
We make interactions

Method Chaining Method chaining is the act of doing multiple things to an item on one line to one item, rather than writing out a seperate jQuery Command.

// Let's go ahead and method chain when we change our p tag
$('p').text().css('color','red');

This differs from object dot syntax because each time we fire a jQuery methods, the jquery object is returned.

Always method chain, as it saves time from constantly querying the DOM, and it looks cleaner.

jQuery Methods

hide(),
show(),
.toggle(),

mouseenter(),
.on(),
mouseleave(),
dblclick(),
focus()
blur(),

//multiple handlers
.on({ mouse enter: function(){}, mouse leave})

.fadeIn(“slow”), fadein(3000), fadeout 
fadeToggle()

.css()
.text()
.val()
.attr()
.find()
.closest()
.data()
.delay()

$("#w3s").attr("href", function(i, origValue){
        return origValue + "/jquery"; 
    });

append()
prepend()
after()
before()
.remove()
.addClass()
.removeClass()

jQuery Patterns Avoidng Callback Hell (nested callbacks) Using Method Chaining

var updatePage = function(el, data) {
    // append fetched data to DOM
};
 
var fetch = function(ajaxOptions) {
    ajaxOptions = ajaxOptions || {
        // url: ...
        // dataType: ...
        success: updatePage
    };
 
    return $.ajax(ajaxOptions);
};
 
$('a.data').on('click', function() {
    $(this).fadeOut(400, fetch);
});

Explain the jQuery Object Let's go ahead and select an element in the console, and see what is returned.

$('p')

We can see that we get an array-like looking response that has all the different DOM elements.

Activities

Turn a div another color

Let's set up a button, and a square div on the page. When the user clicks the button, change the color of the box.

Hint: use the .css() or .addClass() jQuery methods

Make a text-formatter

Now that we see how to query and modify elements on the page, let's put a div with a block of Lorem Ipsum on the page, with three buttons:
Left-Align, Right-Align, Center-Align

Let's make an input with our text formatter

Let's add a fieldset with an input of title and a textarea of body, when the button is clicked, append post into a list. We'll code the first part together.