jQuery: Introduction ATLS 3020 - Digital Media 2 Week 8 - Day 1
Announcements March Mayhem ● BTU Lab Open House Tuesday, 5-6:30 ATLAS BTU Lab (ENVD 234) ● Toy Stories: Invention to Creation Wed, 4:3-6 ATLS 100 Stay and Play 6-7 ATLS Lobby ● Late Night with Ahol Wed, 10:30p-12 ATLS 100 ● BS-TAM and ATLAS Updates Thurs, 5-6 ATLS 204 ● Accelerator & Incubator Conference Kickoff Thurs, 6-8 ATLAS Black Box theater ● Otaku and Cool Japan Japanese Otaku Culture and its International Impact Fri, 4-5:30 ATLAS Black Box theater Community Gathering 5:30-7
Announcements No class on Wednesday BUT . . . there will still be a lesson and lab for you to complete. Look at the website for the materials and check your email. More information to come.
What is jQuery? ● Javascript Library ● Makes javascript easier to write (less code and easier functions) Makes common tasks in javascript easier. Example: ● ○ Selecting elements Calling Functions ○ Handling Events ○ ● Widely used, very popular ● Free ● Many plugins and libraries available
Accessing jQuery jQuery is essentially another javascript file you have to include on your webpage Method #1 Method #2 Include a link to the file from an Download the file and include it in online source your webpage files Pros : webpage will load faster on Pros : no internet connection server required Cons : must be connected to the Cons : webpage might load slower internet
Adding jQuery to a webpage HTML <head> // meta, title, css <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"> </script> <script> $(document).ready(function() { // your javascript/jQuery code }); </script> </head> This is showing adding jQuery with an externally hosted file. You can always go to this url, download the file, save it within your web files, and link to the local javascript file.
jQuery Selectors jQuery can select one or more elements with the jQuery object: Javascript var banner_div = document.getElementById("banner"); $("selector") “selector” helps identify the element jQuery you want to select $("#banner") HTML Javascript <div id="banner"></div> var banner_div = document.getElementsByClass("red"); <div class="red"></div> jQuery <a href="">Link 1</a> $(".red") <a href="">Link 2</a>
Exercise (pairs) 1. Download the starter code (same code from week 6-1) 2. Use a selector to change the innerHTML of the first paragraph.
jQuery Functions jQuery functions manipulate the selected element: $('selector').function(); jQuery Changes the HTML inside of the “banner” id $("#banner").html("<h1>Hello class</h1>"); jQuery Changes the text inside of the “banner” id $("#banner").text("Hi class"); jQuery Add HTML to the end of the HTML inside of the “banner” id $("#banner").append("<p>There are errors </p>"); jQuery Will delete the “banner” id all together $("#banner").remove();
Exercise (pairs) 1. Use the same code from the last exercise 2. Use a selector to change the text of the first paragraph. 3. Use a selector to change the html of the second paragraph.
jQuery Events jQuery functions can handle common events: $('selector').event(); jQuery Creates a click event $("#banner").click(function1, function2, ...); jQuery Combines mouseover and mouseout events $("#banner").hover(function1, function2, ...); jQuery Hides the “banner” id $("#banner").hide(); jQuery Shows the “banner” id $("#banner").show(); jQuery Alternates between hiding and showing the $("#banner").toggle(); “banner” id
Exercise (in pairs) 1. Use the same code from the last exercise 2. Create a function that will toggle the first paragraph of text 3. Create a selector that will get the click button 4. Add a click event to that button a. In that click event, call the function you created in step #2
jQuery Effects jQuery provides functions for common effects: $('selector').effect(); jQuery Makes a hidden element fade into view $("#banner").fadeIn(); jQuery Hides an element by fading it out $("#banner").fadeOut(); jQuery Makes a visible element side out of view $("#banner").slideUp(); jQuery Makes a hidden element slide into view $("#banner").slideDown();
Lab 10 1. Create a webpage with a button. (This can be a div, button, image, or whatever you want, it just has to be clickable by the user). Put an id on that button. 2. Access that button with a jQuery selector. 3. Add a click event to that button. Inside of the click event, call a function 4. Create a function (with the same name from step #3) that will change an element on the page (with a function, event, or effect). 5. Repeat steps 1-4 five more times. Make sure you have created new buttons and functions each time. Each function can change the same element, but you much use different functions/events/effects for each function. In the end you should have 6 buttons that, when clicked, make 6 different types of changes to your webpage.
Recommend
More recommend
