Today’s goals:

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

 Today’s featured website:

• http://www.thefoodlens.com/– jQuery helps make this Boston foodie website engaging

 jQuery Practice

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 file. Save it as jQuery1.html. Add opening and closing html, head, title, and body tags.
2. In the head section add the CDN link for jQuery

   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.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.

Adding jQuery code

1. We’re now going to try adding some of the different code snippets from this tutorial to learn some jQuery basics. We will also use some code from Friday’s tutorials. You’ll notice that the browser saved your progress and you should have code in here to work with.
2. 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 a paragraph and grab some placeholder text from here.
3. Next, let’s add a box to our page. 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.
4. Last week we learned how to do several things with jQuery, including selecting elements and changing the CSS. Let’s begin by selecting the paragraph and drawing a border around it.
5. How could we add a border to the box we created?
6. Let’s now interact with our hyperlink by grabbing some of the sample code from here.
7. 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 a certain amount of time (milliseconds). Then we’ll bring it back. Also try changing hide to slideUp and show to slideDown to see what happens. Then try fadeOut and fadeIn in place of slideUp and slideDown and change the timing to slow it down.
8. Let’s copy the code and paste it below and then comment out the first line. We’re going to now animate the box. You can add any CSS property here, which can give the box a whole range of animated effects. For example, let’s make it bigger. Change fadeOut or whatever you had to animate then add parenthesis, a curly bracket, height: “300px”, closed curly bracket, comma, space, 300 for a duration, and close the parenthesis.