Shape of the Day:

• Learn about JavaScript Libraries and more practice with jQuery

Website of the Day:

https://www.takecareofyourtrails.com/ – jQuery showcase #2: this well-designed and engaging site is from the Netherlands

1. If you are still struggling to get jQuery onto your page, then try following these instructions/code to set it up.
2. Continuing from the jQuery Part 1, open the code from your file named jQueryIntro.html and add the following code to an appropriate spot on your page:

   • <h1>Famous discoveries</h1>
     
     <h2 id="math-heading">Math discoveries</h2>
     
     <ul>
     <li>323–283 BC – Euclid: wrote a series of 13 books on geometry called The Elements</li>
     <li>Al-Khawarizmi (780-850): wrote the first major treatise on Algebra titled "Al-jabr wal-muqabaleh"</li>
     </ul>
     
     <h2 id="science-heading">Science discoveries</h2>
     <ul>
     <li>1543 – Copernicus: discovered the heliocentric model of the solar system.
     </li>
     <li>1672 – Sir Isaac Newton: discovers that white light is a spectrum of a mixture of distinct coloured rays.</li>
     </ul>
     
     <a href="https://en.wikipedia.org/wiki/Timeline_of_scientific_discoveries">Read about more discoveries on Wikipedia.</a>

3. Start by using jQuery to find the “math-heading” ID and store it in a variable named math.
4. Now use jQuery to change the math heading to be the previous text plus an exclamation like ‘ …wow!’ or ‘…amazing!’ (hint, review what you did last lesson when adding/changing text after calling a selector)
5. Try the same steps for the Science heading.

The following review can be found on Khan Academy. Recall that DOM stands for Document Object Model – the logical structure of documents the way a document is access and manipulated which is run by an application programming interface (API) for HTML files.

To find DOM elements with jQuery, pass a valid CSS selector into the jQuery function:

$("h1"); // selects all the h1s
$("#heading"); // selects the element with id of "heading"
$(".warning"); // selects all the elements with class name of "warning"

Note that the jQuery function can be named $ or jQuery, so those are the same as:

jQuery("h1");  
jQuery("#heading");  
jQuery(".warning");  

Many people prefer $ because it’s so short.

The jQuery function will always return a jQuery collection of matching elements, even if there is only one matching element — or none! You can read more about the jQuery function in their documentation.

Once you’ve found DOM elements with jQuery, you can do things like set their inner contents with text(): $("#temperature").text("89° Fahrenheit"); (See full example)

You can use the same method text() to get the inner content, by passing it 0 parameters:
var heading = $("#heading").text();

In the next tutorial, you’ll learn many more methods to get and set properties of DOM elements.

Behind the scenes, these jQuery functions all use the DOM API that we taught in the HTML/JS course. For example, the $ function uses methods like getElementById() and querySelectorAll(), and attr() uses the getAttribute() method. When you use the $ function, you get to use those functions in fewer lines of code, and also know that your code will work in all of jQuery’s supported browsers, which is especially important when using the more recent DOM API functions.

Now complete this lesson on Khan Academy and take screenshots of your console, either after you complete each task or after it is all done.