I'm sorry that you feel they are tricky. I don't intend them to be tricky. Please talk to me about this.

It's an interface between parts of a program, whether you (or your team) wrote both parts or whether one part is a library that other folks created. When you do import random in Python or Java, that's an API.

The DOM is an API that allows JS to dynamically modify the page, including the HTML and the CSS. So, yeah, they are similar. But HTML was originally intended to be written by humans, and so it was static. The DOM allows it to be dynamic.

There is a way to load it dynamically, but I always load it with a script tag in the HTML page.

You are right that JQuery is not strictly necessary. But we use libraries because they make things easier. JQuery makes working with the DOM a little easier.

Avoiding loading extra files can be part of the decision, but programmer effort is important as well.

H3 events aren't a thing. That was just a section header that I used as an example. Let's look at it together: click example

When we give something ID, we can refer to the thing using the hashtag character and the id.

    $("body").append("
this is an example
");
    $("#example").css("color","red");

They can also be used in URLs, to go directly to a location on the page

Excellent and subtle questions!

attr allows you to change any attribute, such as the src of an image (useful for image swaps). css allows a more structured way to modify the style attribute.

text and html are very similar. They are identical for text, but differ in how they handle HTML code.

$("#example").text("hello there");
$("#example").html("hello there");
$("#example").text("well, hello");
$("#example").html("well, hello");

Using the html() method is good when the HTML is not trustworthy, as with user-contributed content.

Here's a list of some common events which links to a longer list. We'll stick with click for a while and introduce others when needed

Yes.

Correct!

The find method is most useful when searching a subtree:

    $("a");  // finds all hyperlinks on the page
    $("nav").find("a");   // finds all hyperlinks in the NAV element

Sure. Just have the method return the object. Amazing

Don't we all?

I won't teach that in class, but I'm happy to talk in OH.

Let's talk in OH

Great!