• When it comes to the simple tasks where we wanted to change colors of a certain tag (h2 for example), what's the difference between modifying some of the CSS using jQuery versus going directly into the CSS file itself?

    Dynamism! Suppose we want to allow the user to click a button to change the color scheme (e.g. dark mode). We need JS to modify the live document, rather than sending an email to the coder to ask them to edit the CSS file, save and reload.

    We could even have JS look at the computer clock (on the browser, not the server) and switch to dark mode at, say, 6pm local time.

  • Is it safe to assume that there are matching DOM functions for most CSS pseudo-classes? (like hover, checked, etc?)

    Yes, I think so. I can't guarantee that there isn't some obscure feature that isn't handled by the DOM, but the goal is to allow everything to be dynamic.

  • Can we talk more about when a function is executed immediately v.s when it is passed as a reference?

    For sure! Suppose we have a function named darkMode that does all the changes we want for dark mode. What's the difference between: 

    
    darkMode();
    $("#darkModeButton").click(darkMode);

    The former executes *now*; the latter hands the function to the browser to execute when (if ever) the button is clicked.

    Functions are crucial for this, because they package up code in a way that can defer execution.

    and, just for completeness: 

    
    $("#darkModeButton").click(darkMode());
    // or
    const val = darkMode();
    $("#darkModeButton).click(val);
  • Please explain more about the event handler.

    The event handler is how we refer to the function that is invoked when an event occurs. That is, the purpose of the function is to handle the event.

    An event handler isn't a special kind of function. It's a function that used for a purpose.

  • can you talk more about why we can also use '<ul>' as a selector?

    Yes, that's a syntactic feature of jQuery (though of course the same ability is available in the native API).

    It's really not a selector. It *is* the argument to $(), but in this case it doesn't select anything.

    Instead, jQuery notices that it's a tag in angle brackets, and so jQuery creates a new element of that kind, unattached to the page. (We can attach it later when we're ready.)

    I like to think of the new element as "off stage".

    In the native API, these look very different: 

    
    const elts = document.querySelectorAll('ul');
    const elt2 = document.createElement('ul');

    But jQuery is all about brevity, so it does things differently.