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 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.
- 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 translating a wireframe into a tree diagram (should resemble the next sections)
- Consultant: Give wireframe
- Developer: Draw a tree diagram
- Consultant: Draw the solution
- Discussion and questions
- Deface the Broncos
- Add console snippet below to use jQuery.
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);
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!
Continue defacing the Broncos. This time with an event handler.
Here is a list of most commonly used jQuery API functions:
- 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()