Function show something() contains the code we actually want to run on each click. In this case, it’s just a standard JavaScript “alert” method that displays a message to the user. Try it yourself Here is another example with slightly more code but fancier results. Can you guess what it does? Here’s how this script works: tells jQuery to deal with element id=’name’. .keyup(update name) calls the jQuery keyup method and tells it to run the update name function whenever it detects a keystroke on the name element. The first line of the update names() function makes use of the jQuery val() method to read the current value of name input. It will then store that value inside the ‘name’ variable. The second line calls the jQuery text() method.
which replaces the text content of the user-name element with the value we stored in our name variable. Try it yourself Showing and hiding content show-hide Showing and hiding content is the special leads to nuts and bolts of user interface code. Dropdown menus, modal dialogs, slide shows, and tabs all require this simple functionality — showing and hiding page elements as necessary. jQuery has few methods to show and hide content:show() and hide() methods — do what they say toggle() — toggles between show() and hide() methods, depending on current visibility of the elementConsider this example: Try it yourself Tip: Try replacing show() and hide() with slideUp() and slideDown() method to get an interesting animation effect.
The code above is straightforward — we are using the click method on #show-btn and which runs showing and hide menu functions respectively. However, this seems like a lot of work for simple functionality. It would be much better if we had a way to use one button which toggles the state of the menu – show it if it’s hidden, and hide it if it’s visible. The toggle method does exactly that: Voila! Our code is cut in half and we have a nice-looking dropdown menu. Try it yourself Tip: Replace toggle() with slideToggle() method to get an interesting animation effect. 3. Moving things around moving Modifying web page layout on the fly is a huge use case for jQuery. The most common methods are appendTo and prependTo, which move the selection to another element.