A Brief Look
DOM Traversal and Manipulation
Get the <button>
element with the class 'continue' and change its HTML to 'Next Step...'
1
|
$( "button.continue" ).html( "Next Step..." ) |
Event Handling
Show the #banner-message
element that is hidden with display:none
in its CSS when any button in #button-container
is clicked.
1
2
3
4
|
var hiddenBox = $( "#banner-message" ); $( "#button-container button" ).on( "click", function( event ) { hiddenBox.show(); }); |
Ajax
Call a local script on the server /api/getWeather
with the query parameter zipcode=97201
and replace the element #weather-temp
's html with the returned text.
1
2
3
4
5
6
7
8
9
|
$.ajax({ url: "/api/getWeather", data: { zipcode: 97201 }, success: function( data ) { $( "#weather-temp" ).html( "<strong>" + data + "</strong> degrees" ); } }); |