resource11 / jquery-dom

jQuery DOM Manipulation

Objectives

By the end of this lesson, students should be able to:

• Diagram the DOM
• Reference jQuery documentation when learning a new technique
• After selecting a DOM node, reach another node using traversal
• Get data from the DOM using jQuery
• Put data into the DOM using jQuery

The Document Object Model (DOM)

• The DOM is a recursive tree.

The DOM is a (potential) large object that describes the structure of our content. Since it's an object, we can use normal techniques to get and set data! In the browser, the DOM is represented by the document object. JS specifies some built-in methods that make using the DOM easier.

jQuery

• The "query" in jQuery comes from SQL.
• We can retrieve and put data into the DOM using jQuery.
• jQuery uses selectors (css selectors, remember?)

Demo: Diagram the DOM

1. Demo translating a wireframe into a tree diagram (should resemble the next sections)

Lab: Diagram the DOM

1. Consultant: Give wireframe
2. Developer: Draw a tree diagram
3. Consultant: Draw the solution
4. Discussion and questions

DOM Traversal

• Deface the broncos
• Add console snippet

var script = document.createElement('script');script.src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js";document.getElementsByTagName('head')[0].appendChild(script);

jQuery Setters & Getters

When reading the jQuery documentation, be sure to scroll through the whole document to ensure you're looking at the correct method signature. Most jQuery methods change their behavior depending on the number of arguments they have when called.

For example, have a look at .val(). Note in the table of contents that there are two method signatures, .val() and .val(value). This is our hint that .val() can do two things.

Reading the documentation, we discover that .val() is getter on an element, but that .val(value) is a setter on an element. Be sure you're using the correct method. Reading examples is very helpful, and the jQuery examples in the docs are fully functional!

Lab: Register an Event Handler

Continue defacing the Broncos.

Lab: Research Common jQuery Functions

Here is a list of most commonly used jQuery API functions:

1. find()
2. hide()
3. show()
4. html()
5. append()
6. prepend()
7. on()
8. off()
9. css()
10. attr()
11. val()
12. text()
13. each()

Gotchas

• Beware the difference between jQuery setters and getters
• Beware the difference between a jQuery collection and a jQuery object
• Beware the difference between .html(), .text(), and .val()

Additional Resources

• JavaScript | MDN
• jQuery API Documentation