jQuery Part 1

Shape of the Day:

  • Learn about jQuery and how to use it

Website of the Day:

https://mendeleev.me/ – jQuery is used to make this site engaging and interactive

  1. Download this code and paste it into a new Visual Studio File. Call the file jQueryIntro.html
  2. Watch this video from Khan Academy to help you understand how jQuery gets added to a webpage and the basics of how it works. Download this JavaScript file that is available from jQuery.com and make sure the file is in the same folder as your webpage file. Follow the same steps and add the code to your page.
  3. After watching the video and adding the code to change the h1 content on your page, change the script line of code to the p selectors on your page. Make the p selector color to red (is this done through jQuery, or CSS?).
  4. Create an ID using the hashtag symbol in CSS called “main-heading” and change the ID to the first h1 tag in HTML. Change the text of that heading using the same jQuery code you used for the p selector. This time, make the text read “jQuery can change SO MUCH!!”.
  5. Select the class “note” in your CSS and give the background property a value of yellow. Then add a third jQuery line of code that changes the text that have the “note” class to “NOTE: jQuery has been known to cause EXTREME JOY!

We will be doing a few more things with jQuery next week, if you would like to get ahead and explore more, you can complete/work through the Khan Academy lessons here.