#software-engineering ## `document.querySelector` this is the most old school but almost guarantee working. ## [JQuery](https://jquery.com/) ### DOM Traversal and Manipulation Get the `<button>` element with the class 'continue' and change its HTML to 'Next Step...' ```js $( "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. ```js 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. ```js $.ajax({ url: "/api/getWeather", data: { zipcode: 97201 }, success: function( result ) { $( "#weather-temp" ).html( "<strong>" + result + "</strong> degrees" ); } }); ``` ## Cash [fabiospampinato/cash: An absurdly small jQuery alternative for modern browsers. (github.com)](https://github.com/fabiospampinato/cash) ```html <script src="https://cdn.jsdelivr.net/npm/cash-dom/dist/cash.min.js"></script> <script> $(function () { $('html').addClass ( 'dom-loaded' ); $('<footer>Appended with Cash</footer>').appendTo ( document.body ); }); </script> ```