Today’s goals:

• Practice writing jQuery
• Learn how to add jQuery to your webpage project

 Today’s featured site:

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

 jQuery Practice

Review from Monday

Let’s check out the FreeCodeCamp exercises  to review important concepts of jQuery: the $ (shorthand for jQuery), the document ready function, selectors, and APIs

How to Add jQuery to Your Webpage

jQuery is a JavaScript library that isn’t automatically included in the browser, like “regular” JavaScript. If you want to use it, you need to add it to your webpage by either downloading it from jQuery.com  or using a CDN (content delivery network) that basically links the appropriate hosted files to your webpage. We are going to use the CDN method today.

Note: If you were going to download jQuery to your computer, you would do so and then move it to the same file location as your webpage project. You would still have to link the jQuery files to your webpage in order to use it.

Adding jQuery via a CDN:

1. Open Notepad++ and start a new webpage with opening and closing html, head, title, and body tags. Save it as jQuery1.html.
2. In the head section add the CDN link for jQuery

   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
   </script>
   

3. Now add opening and closing script tags right below your jQuery CDN link. That’s where all of our jQuery code is going to go.
4. Finally, let’s add the document ready function (like we did at the beginning of Friday’s tutorials). All of your jQuery code has to go inside this function, which basically makes sure the webpage is loaded and ready before jQuery can execute. We can grab the code from here  and then delete the comment //Your code goes here.

Adding content to our page

1. Let’s add some content to our page to work with. First, add a link to http://jquery.com/ in your body section. Then, add some paragraph tags with your first and last name inside of them.
2. Next, let’s add a box to our page with CSS. Add some opening and closing style tags in your head section and create a class called .box in your style sheet. Give it height of 250px, a width of 300px, and a background-color of pink. Now, go into your HTML and add div class=”box” and close the div tag.

Adding jQuery code

1. Review: $(“select something here”).API(“do something here”);. Example: $("p").css("color" , "red"); makes all of your paragraphs red.
2. On Monday we learned how to select elements and used several jQuery APIs, including addClass(), removeClass(), css(), html(), etc.
3. Let’s begin by selecting the paragraph and drawing a border around it by using jQuery’s CSS API . Make the border’s value 1px solid black.
4. How could we add a border to the box we created?
5. Let’s now interact with our hyperlink by grabbing some of the sample code from here . What do you think this code will do?
6. We’re going to make this box disappear and then come back again use jQuery’s hide and show APIs. Let’s start with hide . We’re going to select our box and make it hide after 2000 milliseconds (2 seconds). How can we use the show API  to bring the box back after 2 seconds? Let’s also try “fast” and “slow” instead of time in milliseconds.
7. Basic animation part 1: Let’s use slideUp and slideDown and fadeOut and fadeIn. Let’s comment out the hide and show code by adding // before it and make the box slide up and down and also fade out and in by adding new code below. You can also add time in milliseconds for the animation or use “fast” and “slow”.
8. Basic animation part 2: Let’s animate the box by changing its width and height. First, let’s comment out the previous code and add some new code below. Now let’s select the box and then add animate.();. Inside the parenthesis we’ll add {height: "300px"}, 4000 which will change the height of the box from 250px to 300px over 4 seconds. Now let’s change the width and height at the same time. Note: jQuery’s animate API  can be used with any NUMERIC CSS property.
9. Code check: Download today’s code here  to compare with your own for trouble-shooting
10. Up next: More fun with jQuery’s animate API